Zero dependencies. Two independent instances below.
text, number, link, external, copy, status, select (with a change
callback), image (local files from examples/avatars/),
textarea, download, html and actions — plus the
Columns menu to hide any of them. Scroll the table sideways.
The Actions column is a dropdown (☰ ▾) with five entries; the
inline layout it replaced is still available as menu: false
and is shown in demo 7.
tag column)
CSV needs nothing. XLSX/PDF go to an adapter: the Go binary behind
/service/export by default, or SheetJS / jsPDF when those
libraries are loaded on the page. Without any adapter the button reports
an error event and falls back to CSV.
export status: —
Drag a header edge to resize, drag a header body onto another to reorder, use the Columns menu to show/hide. “ID” is pinned left and “Actions” pinned right (scroll sideways to see them stay); the header sticks while the body scrolls. The buttons below drive the same operations from code.
Only the rows in view are in the DOM; two spacer rows keep the scrollbar the size of the whole set. Scroll the box, then check the row count below — it stays small. Search and sort still run over all 50 000 rows.
A server-backed table with a deliberately slow source. The first load shows skeleton rows, a reload dims the rows under the overlay, and a failure shows the error row with a Retry button.
Tick rows (or the header checkbox for the whole page) and the bulk bar
appears above the table. Disabled rows are the ones with status
“Disabled” — selectable refuses them. The selection is kept by
row id, so it survives search, sort and paging.
Delete here opens the built-in dialog restyled through
remove.confirm: a heading of its own plus three classes of
ours on the box, the button row and the Delete button. The dialog also
takes this table’s theme and type, so it matches the table that opened it.
nothing selected
A filter row under the header: a number range on ID, text on user and
email, a dropdown on country and status (its options come from the
column's map). Filters, the search box and sorting are an AND.
This table watches its own width: below 640px every row becomes a card with the column label in front of each value. Narrow the window (or press the button to squeeze the container) to see it switch.