Table Data
Batteries-included data table built on TanStack Table. Pass columns, data, and a paginator meta object; you get search, sort, filter, pagination, row selection, bulk actions, and column visibility out of the box. For static tables, use the primitive Table.
Default
Five rows with TanStack column definitions and a Laravel-style paginator meta.
Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-001 | Olivia Martin | Paid | $250.00 |
| INV-002 | Jackson Lee | Pending | $150.00 |
| INV-003 | Isabella Nguyen | Unpaid | $350.00 |
| INV-004 | Sofia Davis | Paid | $450.00 |
| INV-005 | Liam Brown | Paid | $120.00 |
Reorder rows
Set draggableRows and the table injects a handle column, binds the drag, and emits reorder with a new array in the order it now shows. Nothing else moves to the call site: no handle to draw, no sortable to wire, no rule to remember.
Dragging switches itself off while the rows on screen are not the stored list in its stored order - a search, a column filter or a sort - because a drop would then write positions read off a filtered view. That also means a reorderable table has to pass an empty initialSorting, or it is born sorted and can never be dragged.
The handle is a button, so the keyboard reaches it: focus it and the up and down arrow keys move the row one step at a time. Give each row a stable id (or name your key with rowKey) - selection and expansion are keyed by it, and without one they follow positions instead of records.
Reorder | Stage | Owner |
|---|---|---|
| Discovery | Olivia Martin | |
| Proposal | Jackson Lee | |
| Negotiation | Isabella Nguyen | |
| Onboarding | Sofia Davis |
Row actions
Put a TableRowActions in the actions column and the row gets its menu twice: under the ellipsis at the end of the row, and under the pointer when the row is right-clicked (a long press on touch). The items are written once as TableRowActionsItem, and each renders as a dropdown item or a context-menu item depending on which menu is drawing it.
A mouse right-click on a field, or on text that is already selected, still opens the browser's own menu, so paste and copy keep working there. A right-click on a link opens the row menu too, with Open in new tab for that link at the top. A table without TableRowActions keeps the browser's menu everywhere, and so does a row whose items are all conditioned out.
Dialogs stay with the component that owns the row's state, outside TableRowActions. If you mount them lazily, latch on open - it fires from either menu.
Invoice | Customer | Amount | Actions |
|---|---|---|---|
| INV-001 | Olivia Martin | $250.00 | |
| INV-002 | Jackson Lee | $150.00 | |
| INV-003 | Isabella Nguyen | $350.00 |
Right-click a row, or open its menu from the ellipsis.