Table

Tables present structured data with scannable rows and columns. In Nuxt / PLAI use UTable.

Element	Source
Borders, header background, row striping	Nuxt UI zinc neutrals
Row links	CI --ci-color-text-link
Link hover	CI link blue (docs reference mix)

Live examples

Default

Document	Status	Updated
Contract draft.pdf	Ready	12 Mar 2026
Witness statement.docx	Processing	11 Mar 2026
Court filing.pdf	Ready	10 Mar 2026

Zebra striping

User	Role
Ada Müller	Admin
Ben Schmidt	Member
Clara Weber	Viewer

HTML

<div class="ci-table-wrap">
  <table class="ci-table ci-table--striped">
    <thead>
      <tr>
        <th scope="col">Document</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      …
    </tbody>
  </table>
</div>

Accessibility

• Use <th scope="col"> / scope="row" for headers.
• Wrap wide tables in .ci-table-wrap for horizontal scroll on small viewports.
• Row actions: put controls in the last column with visible labels.
• Do not use tables for layout grids.

Related patterns

• Link — row links
• Badge — status cells