Responsive & mobile
How tablekit adapts to narrow containers with stacked cards, scrolling, or priority columns.
tablekit responds to its container’s width, not the viewport. This is done with ResizeObserver plus container queries, so a table in a narrow sidebar behaves like it would on a phone.
Choose a behavior with appearance.responsive (or responsive on Table.Root):
| Mode | Below the breakpoint | Good for |
|---|---|---|
stack (default) |
Each row becomes a card. The first column is the title and the actions menu sits in the card header. A Sort select replaces the column headers. | Lists people scan and act on: orders, members, tickets |
priority |
Columns drop out by priority (1 = keep, 5 = drop first) at 1024 / 840 / 680 / 520px |
Dense operational data: deployments, logs |
scroll |
Horizontal scroll, with pinned columns kept visible | Spreadsheets and comparisons |
stackBelow (default 640) sets the breakpoint in container pixels.
Touch
On pointer: coarse devices, buttons, inputs, page links and menu items are at least 44 px tall, checkboxes are larger, and the resize handle hit area is wider.
Try it
Resize your browser, or use the width switcher in the Playground.
Native mobile
@tablekit/core has no DOM dependency. It sorts, filters, paginates and selects plain arrays, which makes it the foundation for a future React Native adapter. The stacked-card layout is designed so it can be rebuilt with FlatList.