Skip to main content

Foundations

DataTable

Render shared table styling for structured row-and-column data. Because sometimes you just need a really good looking spreadsheet.

Curated demo

Release matrix

Surface Status
Docs app Ready
UI package Stable

Reference

Render shared table styling for structured row-and-column data. Because sometimes you just need a really good looking spreadsheet.

  • Pass exactly one of labelledBy or ariaLabel so the table has an accessible name. Screen readers need love too.
  • Pair with SortIndicator when headers need sort affordance.
  • Don't put a whole app inside a table cell. It's not 1999.

Example snippet

<DataTable ariaLabel="Release matrix">
  <tr slot="head">
    <th scope="col">Surface</th>
    <th scope="col">Status</th>
  </tr>
  <tr>
    <td data-label="Surface">Docs app</td>
    <td data-label="Status">Ready</td>
  </tr>
</DataTable>