DataTable

A sortable, selectable data table built on the native <table>: <table is="root-data-table">.

Usage

The table wears the panel's skin - the page ground, the ramp-step frame and the radius step Details and Accordion use - so a table sits in a page beside them rather than as a grey block. alternate bands the rows, and the head is not sticky: a table that needs its head kept in view is placed in a scroll container of its own.

Name	Role	Size
Alpha	Editor	12
Bravo	Reader	3
Charlie	Owner	128
Delta	Editor	9
Echo	Reader	25
Foxtrot	Owner	7

Name	Role	Size
Alpha	Editor	12
Bravo	Reader	3
Charlie	Owner	128
Delta	Editor	9
Echo	Reader	25
Foxtrot	Owner	7

<table is="root-data-table" selectable alternate>
  <thead>
    <tr>
      <th sortable scope="col">Name</th>
      <th sortable scope="col">Role</th>
      <th sortable scope="col">Size</th>
    </tr>
  </thead>
  <tbody>
    <tr aria-selected="true"><td>Alpha</td><td>Editor</td><td>12</td></tr>
    <tr><td>Bravo</td><td>Reader</td><td>3</td></tr>
    <tr><td>Charlie</td><td>Owner</td><td>128</td></tr>
    <tr><td>Delta</td><td>Editor</td><td>9</td></tr>
    <tr><td>Echo</td><td>Reader</td><td>25</td></tr>
    <tr><td>Foxtrot</td><td>Owner</td><td>7</td></tr>
  </tbody>
</table>

Sorting

A <th sortable> gets a header button, an aria-sort state and a caret that turns with the direction. How a column sorts is read off the cells, not declared: a cell that is a number sorts by value (9 before 25 before 128), anything else sorts by the reader's own collation, which puts "Item 2" before "Item 10" and ignores case and accents. A column holding both sorts the numbers first.

Selection

selectable injects a leading checkbox column: a "select all" in the head that goes indeterminate on a partial selection, and one per row. The boxes are the design system's own <input is="root-checkbox">, so they match every other checkbox in a form. A selected row carries aria-selected="true", takes the accent tint and a marker on its inline edge, and the table emits selection-change.

Attributes

Attribute	Type	Default	Description
`selectable`	`boolean`	`false`	Inject a row-selection checkbox column
`alternate`	`boolean`	`false`	Band alternate rows
`sortable` (on `<th>`)	`boolean`	-	Make that column sortable

Events

Event	Detail	Description
`root-data-table.sort`	`{ column, direction }`	Fired after a column sort
`root-data-table.selection-change`	`{ selected }`	Fired when the row selection changes

Extends

HTMLTableElement - use with <table is="root-data-table">.