Skip to content

Implement Table pattern surfaces - #238

Draft
tbielich with Copilot wants to merge 2 commits into
mainfrom
copilot/enhance-table-component
Draft

Implement Table pattern surfaces#238
tbielich with Copilot wants to merge 2 commits into
mainfrom
copilot/enhance-table-component

Conversation

Copilot AI commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Baseline documentation change

Scope

This adds the missing repository-owned Table surfaces so the pattern exists end-to-end in Runtime: token export, CSS pattern, progressive enhancement, macros, docs, playground wiring, and Code Connect stub. The only unresolved part remains the external Figma publication dependency, so the schema keeps TABLE-NODE-ID as a placeholder.

  • Pattern + behavior

    • Adds src/ui/patterns/table.css for sticky headers, sortable states, row selection, loading/empty states, density variants, and resizable-column affordances.
    • Adds src/ui/components/table.js with enhanceTable() / observeTable() for sort toggling, single/multi row selection, checkbox sync, keyboard activation, and column resizing.
  • Design-token integration

    • Adds 16 --uif-table-* component tokens to figma/exports/Patterns (UI).tokens.json.
    • Keeps runtime-only resize width state out of the token namespace via an allowlisted custom property.
  • Authoring surfaces

    • Adds table macros to site/_includes/macros/ui.njk (table, tableHead, tableBody, tableFoot, th, tr, td).
    • Wires table into src/ui/index.css, playground renderers/code generators, and the patterns index.
  • Docs + schema

    • Adds site/patterns/table.md and site/patterns/table-playground.md.
    • Adds schemas/web-table.figma.ts with the expected mapping shape; Figma node ID stays unresolved until the component is published.
{% call uif.table(caption="Destinations", selection="single", sortable=true) %}
  {% call uif.tableHead() %}
    <tr>
      {{ uif.th("Destination", sort=true) }}
      {{ uif.th("Departure", sort=true) }}
      {{ uif.th("Duration") }}
      {{ uif.th("Price") }}
    </tr>
  {% endcall %}
  {% call uif.tableBody() %}
    {{ uif.tr(["Mallorca", "15 Aug 2025", "7 nights", "£499"]) }}
  {% endcall %}
{% endcall %}

Review checklist

  • Terminology is consistent with docs/terminology.md.
  • docs/canonical-reference-matrix.md is updated when new terms, rules, or canonical sources are introduced.
  • @ui-foundations-maintainers has been notified for review.
  • Ownership remains team-based; no person-specific or parallel ownership rule is introduced.
  • Changes preserve the Runtime/Vault authority boundary.
  • Relevant documentation and CI checks pass.

Copilot AI linked an issue Jul 24, 2026 that may be closed by this pull request
7 tasks
Copilot AI changed the title [WIP] Add data table component with sortable columns and sticky header Implement Table pattern surfaces Jul 24, 2026
Copilot AI requested a review from tbielich July 24, 2026 11:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component: Table

2 participants