Table

Display tabular data using composable table primitives.

Examples

Default

A list of your recent invoices. Invoice Status Method Amount INV001 Paid Credit Card $250.00 INV002 Pending PayPal $150.00 
<c-table>
  <c-table-caption>A list of your recent invoices.</c-table-caption>
  <c-table-header>
    <c-table-row>
      <c-table-head>Invoice</c-table-head>
      <c-table-head>Status</c-table-head>
      <c-table-head>Method</c-table-head>
      <c-table-head table-head-classes="text-end">Amount</c-table-head>
    </c-table-row>
  </c-table-header>
  <c-table-body>
    <c-table-row>
      <c-table-cell table-cell-classes="font-medium">INV001</c-table-cell>
      <c-table-cell>Paid</c-table-cell>
      <c-table-cell>Credit Card</c-table-cell>
      <c-table-cell table-cell-classes="text-end">$250.00</c-table-cell>
    </c-table-row>
  </c-table-body>
</c-table>
Item Qty Price Plan A 1 $199.00 Support 1 $51.00 Total $250.00 
<c-table>
  <c-table-footer>
    <c-table-row>
      <c-table-cell table-cell-classes="font-medium">Total</c-table-cell>
      <c-table-cell></c-table-cell>
      <c-table-cell table-cell-classes="text-end">$250.00</c-table-cell>
    </c-table-row>
  </c-table-footer>
</c-table>

API Reference

Table

Composed table primitives for presenting tabular data.

Component Prop Type Default Description
c-table table-classes string '' Additional classes for the table root element.
c-table-header table-header-classes string '' Additional classes for the header section.
c-table-body table-body-classes string '' Additional classes for the body section.
c-table-footer table-footer-classes string '' Additional classes for the footer section.
c-table-row table-row-classes string '' Additional classes for each row container.
c-table-row data-state string '' State attribute used for row styling (for example selected).
c-table-head table-head-classes string '' Additional classes for table header cells.
c-table-head colspan string '' Sets the native colspan attribute on header cells.
c-table-cell table-cell-classes string '' Additional classes for table body/footer cells.
c-table-cell colspan string '' Sets the native colspan attribute on data cells.
c-table-caption table-caption-classes string '' Additional classes for the caption element.

Accessibility

  • Uses structured table primitives with header/data cells and caption support.
  • Preserves keyboard-safe, readable row/section grouping for tabular content.
  • Supports data-state="selected" styling hooks on rows.