Table

Semantic tabular layout for data-dense views — user lists, invoices, reports, admin panels. Cells are slots: drop any letbe-ds component (badge, avatar, button, input, switch, chip) inside a .lb-table__cell. Every th and td carries that class — it is the styling contract, and bare cells render as an unstyled native table. Three sizes, alignment per cell, opt-in zebra striping, sticky header, row selection with select-all + indeterminate state, and sortable columns that dispatch a lb-table-sort event.

a11y (built in): real <table> semantics throughout — <th scope="col"> on every header, .lb-visually-hidden names on the checkbox and actions columns, aria-label on icon-only row controls with their glyphs aria-hidden. Sortable headers are a <button data-lb-sort> inside the <th>: LB.Table cycles aria-sort none → ascending → descending, resets the other columns, and swaps the indicator icon per state so direction is never carried by opacity alone. Select-all drives the native indeterminate property, row expansion toggles aria-expanded on a real button, column-resize handles are role="separator" + tabindex="0" with ←/→ resize and double-click reset (the WCAG 2.5.7 non-drag path), and paged or lazily-appended bodies keep aria-rowcount/aria-rowindex plus a polite live region for the result count.

Usage: Put data-lb-table on <table>. Selection checkboxes use data-lb-table-select-all (in <thead>) and data-lb-table-select (one per body row). Sortable headers use <button data-lb-sort="key">. Add data-lb-sort-auto on the table for built-in DOM sorting; otherwise listen for lb-table-sort and sort on your side. Rows added or removed at runtime (pagination, filtering) just work — selection and sorting are delegated; call el._lbTable.refresh() after swapping rows to sync pre-checked state and new sortable headers, and destroy() to fully detach.

Full demo

Canonical data-view arrangement: the .lb-toolbar sits above the table — density control at rest, and the whole bar flips to bulk actions (.lb-toolbar--selecting) when rows are selected, wired via the lb-table-select event. Sortable columns (Name, Amount) re-order in place (data-lb-sort-auto).

Search, filters + pagination

The client-side data-view flow: a debounced search plus a Filters popover narrow the row set, applied filters render as removable pills in a .lb-filter-bar (the × is the removal idiom, same as Multi-Select pills), pagination slices the result, and refresh() re-syncs selection after every render. Partial-DOM a11y per APG: aria-rowcount on the table, aria-rowindex per row, and the result count is a polite live region. In real apps, swap the filter/slice step for a server query — the chrome stays identical.

Status with icons

Badges accept a .lb-badge__icon slot (16px at medium, 12px at small). Useful when a row needs an immediately-legible status — money flow, delivery state, approval — at a glance. Example below: a transactions view with direction + status columns.

Missing cell values

When data loaded successfully but a specific field is null/empty, use <span class="lb-empty-value" aria-label="No data">—</span> — renders a muted em-dash so the row doesn't look broken or still loading. Different from skeleton (data hasn't arrived yet) and empty state row (nothing in the whole table). The em-dash is the conventional marker for a field that has no value.

Sizes

Three row densities. Default is medium. Use .lb-table--sm for dense dashboards and .lb-table--lg for light settings views.

The data-view pattern: a Segmented control swaps the size class and remembers the choice. Wire lb-segmented-change → toggle --sm/--lg; persist per view.

Alignment

Default is --start (text). Use --center for icons/indicators, --end for numbers or dates (tabular-nums is applied so digits line up).

Cell content — slots

Cells accept any component. Below: avatar + text stack, icon + text, badge, chip, switch, input, link. Wrap grouped content with .lb-table__stack (vertical) or .lb-table__inline (horizontal) helpers. Secondary text uses .lb-table__caption.

Row states

Hover highlight (on .lb-table--hoverable), persistent selection (.lb-table__row--selected, auto-applied when the row checkbox is checked), and keyboard focus outline (for row-click patterns).

Zebra striping (opt-in)

Add .lb-table--striped for alternating rows. Off by default — cleaner dashboards look tidier without it; long financial tables read better with it.

Sticky header

Split the table into two — one for the header, one for the body — so the vertical scrollbar lives only along the rows area, never alongside the pinned <thead>. Both tables get .lb-table--sticky (which applies table-layout: fixed so columns align by default). For unequal column widths, add matching <colgroup> to both. This demo also opts into column resize: data-lb-table-resize on the wrap keeps both split tables' colgroups in sync — drag a header edge, use ←/→ on the focused handle, or double-click the edge to reset (the WCAG 2.5.7 non-drag path). And it demonstrates chunked lazy-append: 200 rows load 30 at a time as you near the scroller's end (aria-rowcount announces the real total; async consumers append skeleton rows while fetching). That's the DS-side scale boundary — for 100k-row sets bring a windowed virtualizer (TanStack Virtual, Clusterize) per the pluggable-engines rule.

Row expansion + side peek

Two ways to reveal a record's depth: expansion — a data-lb-table-expand button toggles the adjacent .lb-table__detail-row in place (aria-expanded, chevron rotates, detail rows travel with their parent through sorting; not compatible with --striped) — and side peek — the row's end action opens a right lb-sheet with the record while the table stays in context. Dispatches lb-table-expand.

Pinned first column

Wide tables scroll horizontally inside the wrap while .lb-table--pin-first keeps the identity column sticky at the left edge (P&P: as important for horizontal scroll as the fixed header is for vertical). Base background is opaque, row states (hover, selected) still paint through, and a hairline marks the pin boundary. Never collapse a table to display: block for small screens — this is the sanctioned responsive strategy.

Loading (skeleton)

Set aria-busy="true" on <tbody> and fill cells with .lb-skeleton .lb-skeleton--text. Mirror the final column structure so the layout doesn't jump when data arrives.

Empty state

A single row spanning all columns via colspan. Include a hint for what to do next.