The rows to show. With serverSide, only the current page.

The columns: { id, header, cell?(row), value?(row), sortable?, align?, hideOnMobile?, width? }. The first column names each row (and is the title of a phone card). value is what sorting, searching and the CSV read; without it the row's field named id is used.

A stable, unique id for a row, such as its database id. Used for selection, focus after a delete and the open link.

Accessible name of the table and the section, e.g. "Orders".

The data state, when your data layer gives you one: loading, empty, error or ready. It wins over isLoading and error. A ready table with no matching rows says nothing matches.

Show loading rows and skeleton cards, disable the controls, and mark the section busy.

Something went wrong loading: a message to show instead of the rows (true uses a general one).

Adds a Try again button to the error state.

Title shown when there are no rows at all. Defaults to "Nothing here yet".

Text under the empty title.

A control shown in the empty state when there are no rows at all (not when a search found nothing), such as an Add button.

Add a search box. true looks in every column; or list the column ids to look in.

Placeholder of the search box.

Filters shown as selects in the toolbar and in a sheet on a narrow screen: { id, label, options, match? }. Options are text or { value, label }.

Rows per page.

The search, filters, sort and page, when you keep them yourself (for example in the address). Without it the table keeps them.

Start with a search, filters, a sort or a page already set.

Called with the new query whenever the search, a filter, the sort or the page changes (typing waits for a short pause with serverSide). With serverSide, answer it with new rows.

Called with the search text whenever it changes.

Called with the chosen values of every filter whenever a filter changes or the filters are cleared.

The rows live on a server. The table then shows exactly the rows you pass and asks for new ones through onQueryChange.

With serverSide: how many rows match in all, so the pages and the count are right.

Add checkboxes to pick rows. The header box selects the rows on the page.

Controlled selection: the ids of the selected rows.

Rows selected at the start.

Called with the ids of the selected rows.

Actions for the selected rows, shown in a bar while something is selected: { id, label, icon?, variant?, permission?, confirm?, onAction(rows) }. A confirm opens a dialog that also says how many rows are affected. The selection clears when the action succeeds.

The actions of one row, shown in a More menu at the end of the row and of the card: { id, label, permission?, confirm?, variant?, onAction }. Return an empty list for none. After a delete, focus moves to the next row.

Makes the first cell of each row a button and calls this with the row, e.g. to open a details page or panel. onSelect is called too.

The conventional name for opening a row: called together with onRowOpen.

Makes the first cell of each row a link to this address instead of a button (onRowOpen and onSelect are still called).

Replaces the built-in CSV download. It gets the rows that match (all pages when the list is in memory) and the query. With serverSide the Export button is shown only when you give this.

What the app allows, by action: export (Export CSV), select (the checkboxes), bulk (the bulk bar as a whole) and rowActions (the More menu). Each answer is "allow", "disabled", "hidden", true, false or { state, reason }. Hidden removes the control; disabled keeps it focusable with the reason where there is a button, and leaves selection off. Single actions have a permission of their own. This only changes what people see: the server must check again.

Class names for the parts of the block, by slot name, added after the built-in ones so you can restyle one part without editing the file. Slots: root, toolbar, search, filters, count, export, bulk-bar, table, header, row, cell, cards, card, empty, error, footer, pagination.

Row spacing of the table.

Table or cards. auto shows cards when the block itself is narrower than about 640px (not just the screen).