Data Table

v1.0.1·Updated in 1.0.1

The admin table on TanStack Table v9: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones.

Type in the search to filter every searchable column at once (accents do not matter, so "cafe" finds Café and "12480" finds $12,480.00). Press a quick filter chip to toggle it; applied column filters show as removable chips with Clear filters. Click a header to sort (text A to Z first, numbers and dates biggest or newest first, a third click clears it) and Shift-click to add a second sort. The chevron on a header opens its menu: sort, filter (checkboxes for statuses and cities, a text box, a number range or a date range), pin left or right, move left or right, hide. Drag a header sideways to reorder columns; with columnResizing drag its edge (double-click resets, or focus the edge and use the arrows). The Columns panel shows and hides columns, reorders them by dragging the handle or with the arrow buttons, switches density and resets the layout. With selection on, click the checkbox (Shift-click selects a range) or the row; the toolbar turns into the bulk bar with its actions, and when the whole page is selected a banner offers every matching row. Rows can expand into a detail panel with the chevron (or a click anywhere on the row when it has no onRowClick and no selection). The ⋯ button and a right-click open the row's actions. Keyboard: the header's sort buttons and menus come first in the Tab order, then the rows are one tab stop (whenever they can be selected, opened, expanded or have actions): Up / Down, Home / End and PageUp / PageDown move between them, Space selects (Shift + Space or Shift + arrows extend), Ctrl/Cmd + A selects all, Escape clears the selection, Enter opens the row (or expands it when that is all it does), Right / Left expand and collapse, Shift+F10 or the context menu key opens the row menu. On a phone every row is a card: long press a card to start selecting, then tap to add more while the bulk bar floats at the bottom; sort, filters and row menus open as bottom sheets, and Load more appends the next rows. 10,000 rows scroll at 60fps because only the visible ones are in the DOM.