Sortable grids, bulk selection, filters, pagination and row actions.
The table itself is easy; the shell around it is the work — selection that survives pagination, a filter bar that says how many rows it removed, and an empty state that distinguishes "no data" from "no matches". These carry that shell. Sorting and filtering are callbacks, so a server-paginated table uses the same markup as a client-side one.
Reordering that works from the keyboard rather than by drag alone, pinned columns that cannot be hidden or moved, and a guard so the last visible column cannot be unchecked into a blank table.
The selection bar that asks the question most tables skip: this page, or all 1,284 rows the filter matches. Typed confirmation above a threshold, an undo with the window counting down, and a select-all that names its own scope.
Edit cells in the grid with staged changes, per-cell validation, the original value kept beside the attempt, and a save that counts what is still pending.
`aria-sort` on the active header cell, and the button inside the header rather than a click handler on the `<th>`. Without it, the order changes silently for anyone not watching the arrows.
Pagination or infinite scroll?
Pagination for anything people cite, bookmark or audit — an infinite list has no addressable position. Infinite scroll suits feeds, where nobody needs to find row 4,120 again.
Are these react data tables free to use?
All 8 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add data-table-sortable` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.