Data Table

A sortable data table that demonstrates column sorting by clicking headers.

Package: @solidiom/data-table
Version: 0.0.1-next.0
Status: stable

Examples

The live example displays a table of programming languages that can be sorted by name, year, or paradigm. Click any column header to cycle through ascending, descending, and unsorted states.

Keyboard interaction is fully supported: press Tab to move focus between sortable headers, then press Enter or Space to toggle sort direction. The active sort column exposes aria-sort with the current direction so screen readers announce the state change.

Name	Year	Paradigm
Rust	2010	Systems
TypeScript	2012	Multi-paradigm
Go	2009	Concurrent
Kotlin	2011	Object-oriented
Swift	2014	Multi-paradigm
Elixir	2011	Functional

View source

        export function DataTableExample(props: DataTableExampleProps) {
  const headers = () => COLUMN_HEADERS[props.locale]

  const columns = () => [
    { id: "name", header: headers().name, accessorKey: "name" as const, sortable: true },
    { id: "year", header: headers().year, accessorKey: "year" as const, sortable: true },
    {
      id: "paradigm",
      header: headers().paradigm,
      accessorKey: "paradigm" as const,
      sortable: true,
    },
  ]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="data-table-example"
      data-data-table-example
    >
      <DataTable.Root columns={columns()} data={DATA}>
        <DataTable.Header>
          <tr>
            <DataTable.HeaderCell columnId="name">
              <span class="data-table-example__header-label">{headers().name}</span>
            </DataTable.HeaderCell>
            <DataTable.HeaderCell columnId="year">
              <span class="data-table-example__header-label">{headers().year}</span>
            </DataTable.HeaderCell>
            <DataTable.HeaderCell columnId="paradigm">
              <span class="data-table-example__header-label">{headers().paradigm}</span>
            </DataTable.HeaderCell>
          </tr>
        </DataTable.Header>
        <DataTable.Body>
          {DATA.map((row) => (
            <DataTable.Row rowId={row.id}>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.name}</span>
              </DataTable.Cell>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.year}</span>
              </DataTable.Cell>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.paradigm}</span>
              </DataTable.Cell>
            </DataTable.Row>
          ))}
        </DataTable.Body>
      </DataTable.Root>
    </div>
  )
}