Data Table Components

Material Design data tables display information in a way that's easy to scan, so that users can look for patterns and insights.

Basic Table

A simple data table with basic styling. Used for displaying tabular data in a clean, readable format.

Name
Email
Role
Status
Alice Johnson alice@example.com Admin Active
Bob Smith bob@example.com User Active
Carol Williams carol@example.com User Inactive

Sortable Table with Caption

A data table with sortable columns and a caption that provides context about the data. The Material Design icons indicate sortable columns and sort direction.

Employee Directory
Name
Department
Location
Phone
John Doe Engineering San Francisco 555-1234
Jane Smith Design New York 555-5678
Michael Johnson Marketing Seattle 555-9012
Sarah Williams HR Chicago 555-3456

Selectable Rows with Pagination

A data table with selectable rows and pagination controls. Selected rows are highlighted with a background color and proper ARIA attributes for accessibility.

Project
Client
Status
Deadline
Website Redesign Acme Inc. In Progress 2025-06-15
Mobile App XYZ Corp Completed 2025-03-01
E-commerce Platform 123 Store Planning 2025-08-30

Usage

<!-- Basic Table -->
<c-table.container>
  <c-slot name="header">
    <c-table.header_row>
      <c-table.header>Name</c-table.header>
      <c-table.header>Email</c-table.header>
    </c-table.header_row>
  </c-slot>
  <c-table.row>
    <c-table.cell>Alice Johnson</c-table.cell>
    <c-table.cell>alice@example.com</c-table.cell>
  </c-table.row>
</c-table.container>

<!-- Table with Caption -->
<c-table.container caption="Employee Directory">
  <!-- ... table content ... -->
</c-table.container>

<!-- Sortable Table -->
<c-table.container>
  <c-slot name="header">
    <c-table.header_row>
      <c-table.header sortable="true" sort_direction="asc">Name</c-table.header>
      <c-table.header sortable="true">Department</c-table.header>
    </c-table.header_row>
  </c-slot>
  <!-- ... table rows ... -->
</c-table.container>

<!-- Selectable Row -->
<c-table.row selected="true">
  <c-table.cell>Website Redesign</c-table.cell>
  <!-- ... more cells ... -->
</c-table.row>

<!-- Pagination Component -->
<c-table.pagination current_page="1" total_pages="5" />

Attributes

Table Container

Attribute
Type
Default
Description
caption string "" Table caption that provides context about the data
density string "default" Controls the spacing of table cells (compact, default, comfortable)

Table Header

Attribute
Type
Default
Description
sortable boolean false When true, displays sorting controls for the column
sort_direction string "" Sort direction: "asc", "desc", or empty string for no sort

Table Row

Attribute
Type
Default
Description
selected boolean false When true, highlights the row and sets proper ARIA attributes

Pagination

Attribute
Type
Default
Description
current_page number 1 Current page number
total_pages number 1 Total number of pages