Components Data and consoles

Data Table

Material Design 3 data table web components (sortable, selectable, paginated, resizable, virtualized).

  • 5.0 KB gzipped
  • @lit-material/data-table 0.1.0
  • Renders on the server

Example

Install

npm install @lit-material/data-table @lit-material/tokens
import "@lit-material/data-table";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

<lit-material-data-table-cell>

A single cell inside a lit-material-data-table-row.

Properties

PropertyAttributeTypeDefaultDescription
headerheaderbooleanfalse
numericnumericbooleanfalse
sortKeysort-keystring | undefinednone
sortDirectionsort-directionSortDirection"none"Kept in sync by the parent table — see the class docs. Not meant to be set directly.
resizableresizablebooleanfalseAdds a drag handle at the trailing edge. Only meaningful on a header cell.
minWidthmin-widthnumber60Floor for the width this cell's handle will report while dragging.
flexflexbooleanfalseLays the cell out with flexbox instead of display: table-cell — see lit-material-data-table-row.
widthwidthstring | undefinednoneThis cell's width in flex mode (any CSS flex-basis value, e.g. "96px"). Ignored otherwise.

Events

EventDescription
column-resizedetail: { width } (pixels), while dragging a resizable cell's handle.

Slots

SlotDescription
defaultThe cell's content.

CSS parts

PartDescription
sort-buttonThe button wrapping content, for sortable header cells.
sort-iconThe ascending/descending indicator.
resize-handleThe drag handle for a resizable header cell.

<lit-material-data-table-pagination>

A pagination footer for lit-material-data-table — a standalone, headless control rather than something the table renders itself, since the table never owns your data (see its own class docs) and paging is exactly as data-shaped a concern as sorting/selection. Place one below a table, feed it total/page/page-size, and re-render (or re-fetch) the table's rows in response to page-change — this component never touches the table directly.

Properties

PropertyAttributeTypeDefaultDescription
pagepagenumber00-based current page index.
pageSizepage-sizenumber10
totaltotalnumber0Total row count across every page — this control has no idea what a "row" is beyond this number.
pageSizeOptionspage-size-optionsreadonly number[][10, 25, 50]
unknownTotalunknown-totalbooleanfalseThe total isn't known (cursor paging): total is ignored, has-more drives Next.
hasMorehas-morebooleanfalseWith unknown-total: there is a page after this one.
disableddisabledbooleanfalseDisables every control, e.g. while a page loads.

Events

EventDescription
page-changedetail: { page, pageSize }, when a nav button is activated or the page-size select changes (which also resets page to 0).

<lit-material-data-table-row>

A row inside a lit-material-data-table — holds lit-material-data-table-cell children.

Properties

PropertyAttributeTypeDefaultDescription
headerheaderbooleanfalse
selectedselectedbooleanfalseHighlights the row — set by the table from a row-select checkbox's checked state, not directly.
flexflexbooleanfalseLays the row out with flexbox instead of display: table-row — see the class docs.

Slots

SlotDescription
defaultlit-material-data-table-cell elements.

<lit-material-data-table>

Material Design 3 data table — a container for lit-material-data-table-row elements (each holding lit-material-data-table-cell elements).

Properties

PropertyAttributeTypeDefaultDescription
sortKeysort-keystring | undefinednone
sortDirectionsort-directionSortDirection"ascending"
itemsproperty onlyreadonly unknown[][]The full dataset for virtualized mode. Empty (the default) means "not virtualized".
rowRendererproperty only(item: unknown, index: number) => unknown | undefinednoneRenders one virtualized body row. Required alongside items to turn virtualization on.
rowKeyproperty only(item: unknown, index: number) => string | number | undefinednoneStable key per item, for correct DOM reuse as the visible window scrolls. Defaults to the index.
rowHeightrow-heightnumber44Fixed row height in pixels — every virtualized row is assumed to be exactly this tall.
viewportHeightviewport-heightnumber400Visible scroll-viewport height in pixels.
overscanoverscannumber4Extra rows rendered beyond each edge of the visible window, to absorb fast scrolling.

Events

EventDescription
selection-changedetail: { selected: string[] } (the checked rows' data-row-id values), when a data-row-select/data-select-all checkbox changes.
sort-changedetail: { sortKey, sortDirection }, when a sortable header cell is activated.

Slots

SlotDescription
defaultlit-material-data-table-row elements (in virtualized mode, the header row only).

CSS parts

PartDescription
tableThe table layout container.
viewportThe scrollable viewport, in virtualized mode.
spacerThe full-height spacer inside the viewport, in virtualized mode.

Source on GitHub npm