Complete example: Toolbar with search + filter pills + primary action, sortable + selectable table with mixed cell types, and pagination footer.

Simple variant: Search + basic table + pagination. No selection, no filters, no bulk actions.

BULK BAR: .tw-data-table-bulk | .tw-data-table-bulk-head | .tw-data-table-bulk-count | .tw-data-table-bulk-clear | .tw-data-table-bulk-actions

White bar with a primary rail, shown when rows are selected. A head row carries the count and Clear selection; beneath it the action buttons wrap. Hide the whole bar with .tw:hidden on a wrapper when nothing is selected.

Every action stays on the surface. When a list has more bulk actions than a row can hold, the buttons wrap — they do not move into an overflow menu, collapse to icons, or scroll sideways. The count leads with its scope ("across 3 pages"), and .tw-data-table-bulk-clear sits at the far right of the head row, away from the count, so a stray click can't discard a large selection. Seventeen actions below, all visible, in two rows.

INLINE BULK: .tw-data-table-bulk-inline | .tw-data-table-bulk-clear | .tw-data-table-bulk-divider

A compact bulk selection indicator that sits inline within the toolbar row. Use when the toolbar already has a title, tabs, or filters and a separate bar would be too heavy. The count and clear action sit alongside other items; bulk action buttons go in toolbar-end.

No results: Use .table-empty inside the data table when no records match the current filter or search.

Dense variant: Combine .table-sm with the data table pattern for high-density data views. Useful for dashboards and reporting screens.

COMPOSES: Table + Counted Tag (Tag + Badge)
CELL CLASS: .tw-data-table-cell-block

For allocation grids where rows are subjects/courses and columns are blocks or time slots. Each cell contains a counted tag showing the group name and fill count.

One order, every list screen. Production varies the order and contents of this row from screen to screen, so the same control lives somewhere different on each list. The rule: -toolbar-start holds everything that decides which records you see (saved view → Filters → active filter chips → search); -toolbar-end holds everything that acts on the list as shown (Columns → Export → Share). The primary create action is not here at all — it belongs in .tw-page-header-actions.

Two toolbar affordances: a saved-views selector at the start of the toolbar (the current view's name is the trigger; the menu lists views with a check on the active one, then "Save current view…") and a Columns control at the end (a multi-select dropdown driven by data-controller="table-columns" — unticking a column hides its header and cells; cells opt in with data-column keys). "Year group" starts unticked below — tick it to bring the column back.