Scale — Table

Install

Examples

Dynamic (data-driven)

The compact path: pass .columns + .rows and sc-table-dynamic generates the markup, delegating sorting, selection, and pagination to sc-table-basic. The table holds no data of its own — you own the rows. Click a header to sort.

Fetched from an API

The end-to-end dynamic pattern — fetch JSON, map it into rows, and assign .rows. This table is populated live from a public REST endpoint on load.

Bank account transactions

Cell values can be Lit templates, not just text. Here a select column drives row selection, desc renders an avatar + reference line, and debit/credit are colour-coded amounts.

Email

Icon columns via leadingIcon(row) (star, attachment) and a two-line cell via secondaryText(row) for the message preview.

Repo

Link columns via href(row) render real anchors, and the author cell is an avatar + name template.

Basic (hand-composed)

Compose rows and cells yourself for full control. A header row holds sc-table-head cells; sortable turns a head into a sort control; selected paints the active row.

Name

Role

Score

Ada Lovelace

Engineer

Alan Turing

Researcher

Grace Hopper

Designer

Building blocks

The four primitives the layers above are built from — sc-table-head, sc-table-cell, sc-table-footer, and sc-table-row.

Name

Ada Lovelace

Guidelines

Usage

tabular data with sorting, selection, and pagination. Reach for sc-table-dynamic first; drop to the building blocks only when you need bespoke layout.

Do

Reach for sc-table-dynamic first; drop to the building blocks only for bespoke layouts.
Right-align numeric columns and keep headers concise and sortable where it helps.
Paginate large data sets rather than rendering thousands of rows at once.

Don’t

Don’t use a table for layout — it’s for tabular data with real rows and columns.
Don’t make every column sortable if sorting most of them is meaningless.
Don’t hide critical actions behind horizontal scroll on narrow screens.

Accessibility

Roles: the grid exposes role="table" with role="row", role="columnheader", and role="cell" on its parts.
Name: the label sets the table’s aria-label; always provide one.
Sort: a sortable header reflects the current direction with aria-sort (ascending / descending).
Selection: selectable columns render real Checkboxes with their own labels.
Links & icons: href columns render real anchors; leading icons are decorative, so the cell text must carry the meaning.

Properties

Page Controls — compact pagination for non-table sequences.
Checkbox — row and select-all controls.
Avatar — used inside cells for people rows.
Badge — status pills inside cells.

Table