Tables

Live Demo

Standard Data Table — Contribution Rates

Responsive Stacked Table — Plan Comparison

Sortable Table — Fee Schedule

Row states

1. Summary

2. Design Tokens

Tables consume these semantic tokens — no component-specific tokens are defined.

3. Authoring Fields

4. Validation

5. Content Guidance

• Caption: Write a concise, descriptive caption such as "DBplus Contribution Rates 2024–2027". Avoid generic labels like "Table 1".
• Headers: Keep column headers short (1–3 words). Include units in parentheses where applicable, e.g., "Fee Rate (bps)".
• Data cells: Use consistent formatting — align numbers to the right, use the same decimal precision within a column.
• Responsive mode: Use "stack" for comparison tables (≤ 4 columns). Use "scroll" for wide data tables (5+ columns).
• Sortable: Only enable sorting on columns with comparable data (numbers, dates). Avoid on free-text columns.

6. Semantic HTML

<div class="caat-table__wrapper" data-analytics-component="table">
  <table class="caat-table caat-table--striped caat-table--hover">
    <caption class="caat-table__caption">{caption}</caption>
    <thead>
      <tr>
        <th scope="col">{header1}</th>
        <th scope="col">{header2}</th>
        <!-- additional headers -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{cell1}</td>
        <td>{cell2}</td>
      </tr>
      <!-- additional rows -->
    </tbody>
  </table>
</div>

<!-- Sortable variant -->
<th scope="col">
  <button class="caat-table__sort-btn" aria-sort="none"
          data-analytics-action="table-sort"
          data-analytics-label="{column-id}">
    {header} <i class="bi bi-arrow-down-up"></i>
  </button>
</th>

<!-- Stacked responsive variant (adds data-label for mobile) -->
<td data-label="{header}">{cell}</td>

7. CSS Contract

8. Accessibility

9. SEO

• Use semantic <table>, <thead>, <tbody>, <caption> elements — search engines parse these for structured data.
• Caption text should include relevant keywords (e.g., "CAAT DBplus contribution rates").
• Avoid rendering tables as CSS grid/flex layouts which lose semantic meaning for crawlers.
• Tables presenting pension data may be eligible for rich snippets — ensure content is indexable (not loaded via JS).

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Notes

• Resource type: caat/components/table
• Sling model: Exposes caption, headerCells[], rows[].cells[], responsiveMode, sortable, striped.
• HTL template: Iterates rows multifield; outputs data-label on each <td> when responsive mode is "stack".
• Client library: caat.components.table — categories: caat.site.
• Policies: Allow placement in Content Container, Two-Column Layout, and Full-Width Container.
• Allowed renditions: Default table, Striped, Hover, Sortable (toggles combined).

12. Dialog Model (YAML)

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

caat-table-dialog:
  jcr:primaryType: nt:unstructured
  sling:resourceType: cq/gui/components/authoring/dialog
  content:
    sling:resourceType: granite/ui/components/coral/foundation/container
    items:
      tabs:
        sling:resourceType: granite/ui/components/coral/foundation/tabs
        items:

          # ── Data tab ─────────────────────────────────
          data:
            jcr:title: Data
            items:
              caption:
                sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                name: ./caption
                fieldLabel: Caption
                required: true
              headerRow:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./headerCells
                fieldLabel: Header columns
                composite: true
                required: true
                items:
                  field:
                    sling:resourceType: granite/ui/components/coral/foundation/container
                    items:
                      cellText:
                        sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                        name: ./cellText
                        fieldLabel: Column header
                        required: true
              dataRows:
                sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                name: ./dataRows
                fieldLabel: Data rows
                composite: true
                required: true
                items:
                  field:
                    sling:resourceType: granite/ui/components/coral/foundation/container
                    items:
                      cells:
                        sling:resourceType: granite/ui/components/coral/foundation/form/multifield
                        name: ./cells
                        fieldLabel: Cells
                        composite: true
                        items:
                          field:
                            sling:resourceType: granite/ui/components/coral/foundation/container
                            items:
                              cellValue:
                                sling:resourceType: granite/ui/components/coral/foundation/form/textfield
                                name: ./cellValue
                                fieldLabel: Cell value

          # ── Style tab ────────────────────────────────
          style:
            jcr:title: Style
            items:
              responsiveMode:
                sling:resourceType: granite/ui/components/coral/foundation/form/select
                name: ./responsiveMode
                fieldLabel: Responsive mode
                required: true
                items:
                  - { text: Horizontal scroll, value: scroll }
                  - { text: Stacked cards,     value: stack }
                  - { text: Collapse columns,  value: collapse }
                defaultValue: scroll
              sortable:
                sling:resourceType: granite/ui/components/coral/foundation/form/switch
                name: ./sortable
                fieldLabel: Enable sorting
                checked: false
              striped:
                sling:resourceType: granite/ui/components/coral/foundation/form/switch
                name: ./striped
                fieldLabel: Striped rows
                checked: true

13. QA Acceptance Checklist

• Standard, striped, and hover table variants render with correct styling and spacing.
• Responsive stacked mode displays rows as card-like blocks on viewports ≤ 768px, with data-label visible as pseudo-headers.
• Horizontal scroll mode shows a scrollbar on overflow without breaking page layout.
• Sortable columns toggle between ascending/descending on click; aria-sort updates correctly.
• Keyboard navigation works: Tab to sort buttons, Enter/Space to activate sort.
• <caption> or aria-labelledby is present on every rendered table.
• All <th> elements have scope attributes.
• Analytics table-sort event fires with correct column and direction payload.
• Colour contrast meets WCAG 2.1 AA on striped and hover backgrounds.
• Cross-browser tested (Chrome, Firefox, Safari, Edge) on desktop and mobile.

14. Definition of Done