Components Data and consoles

Table

Data-driven semantic table web component: a real <table> with header row, numeric and monospace columns, captions and a scroll container.

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

Example

Install

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

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

API

<lit-material-table>

A semantic, read-only table from data: a real <table> with a caption, a header row with scope="col", numeric and monospace columns, and a scroll container so a wide table scrolls inside its box, not the page.

Properties

PropertyAttributeTypeDefaultDescription
columnscolumnsTableColumn<Row>[][]
rowsrowsRow[][]
captioncaptionstring""Describes the table; read by screen readers.
captionHiddencaption-hiddenbooleanfalseKeep the caption for screen readers only.
densitydensity"standard" | "compact""standard"Row height: standard or compact.
stickyHeadersticky-headerbooleanfalseHeader stays visible while the container scrolls (give the host a height).

Slots

SlotDescription
emptyShown instead of the body when there are no rows.

CSS parts

PartDescription
containerThe scroll container.
tableThe <table>.

Source on GitHub npm