React data table components
Free React data table components: sortable headers, row selection, bulk actions, inline edit, column visibility, filters, pagination and loading states.
23 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Tables are where products spend most of their time, so these pieces cover the parts that usually get skipped: empty and loading rows, sticky columns, bulk action bars, saved views and density controls.
They are composable rather than one giant grid. Use the full data table block when you want everything, or take only the sortable header and pagination and keep your own data layer.
Components 22
Audit Filter BaruiFilter toolbar for audit logs combining a search field, actor filter chips for all, admins or system, and a date range picker in one wrapping row.npx shadcn@latest add ui.minidev.pro/r/audit-filter-bar.jsonAudit Log EntryuiSingle audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail.npx shadcn@latest add ui.minidev.pro/r/audit-log-entry.jsonAudit TrailuiBordered audit trail in React that renders a list of actor, action, target and time records as stacked log entries. Useful for security and admin history pages.npx shadcn@latest add ui.minidev.pro/r/audit-trail.jsonBulk Actions BaruiFloating Tailwind selection bar that appears once rows are selected, showing the count, your action buttons and a clear button. Sticks to the bottom edge.npx shadcn@latest add ui.minidev.pro/r/bulk-actions-bar.jsonColumn Visibility MenuuiColumns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.npx shadcn@latest add ui.minidev.pro/r/column-visibility-menu.jsonData TableuiReact data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.npx shadcn@latest add ui.minidev.pro/r/data-table.jsonDensity ToggleuiToggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.npx shadcn@latest add ui.minidev.pro/r/density-toggle.jsonEmpty TableuiEmpty table placeholder with a dashed border, a No data yet title, helper text and an optional button to create the first row. For React tables.npx shadcn@latest add ui.minidev.pro/r/empty-table.jsonExpandable RowuiBordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content.npx shadcn@latest add ui.minidev.pro/r/expandable-row.jsonFilter BaruiA wrapping Tailwind toolbar for tables and lists: a search input first, your own filter controls as children, and a Clear button when onClear is set.npx shadcn@latest add ui.minidev.pro/r/filter-bar.jsonInline Cell EdituiClick to edit table cell text: the value turns into an input on click, saves on Enter or blur and cancels on Escape. Built for editable React data grids.npx shadcn@latest add ui.minidev.pro/r/inline-cell-edit.jsonLoading TableuiA skeleton placeholder for data tables with configurable rows and columns, a header row and aria-busy so assistive tech knows content is loading.npx shadcn@latest add ui.minidev.pro/r/loading-table.jsonQuery BuilderuiFilter query builder that chains field, operator and value clauses with AND. Add or remove rows, each with labelled selects, built in React and Tailwind.npx shadcn@latest add ui.minidev.pro/r/query-builder.jsonRow SelectionuiRow selection checkbox for data tables with checked and indeterminate states and a default Select row label. Pairs with a header checkbox for select all.npx shadcn@latest add ui.minidev.pro/r/row-selection.jsonSaved ViewsuiSaved views list for filters, rendered as a listbox of named views with item counts and a highlighted active view. Works controlled or uncontrolled in React.npx shadcn@latest add ui.minidev.pro/r/saved-views.jsonSortable HeaderuiSortable table header button that shows an up, down or neutral arrow for the current sort direction and calls onToggle on click. Pairs with any Tailwind table.npx shadcn@latest add ui.minidev.pro/r/sortable-header.jsonSticky ColumnuiSticky table column wrapper that pins content to the left or right edge with a solid background and divider while the rest of a wide table scrolls horizontally.npx shadcn@latest add ui.minidev.pro/r/sticky-column.jsonTable PaginationuiTable pagination footer showing Page X of Y with previous and next icon buttons that disable at the first and last page. Wire it to onPageChange in React.npx shadcn@latest add ui.minidev.pro/r/table-pagination.jsonTable ToolbaruiToolbar above a data table with a search input on the left and a right slot for filters, view toggles or export buttons. Wraps cleanly on narrow screens.npx shadcn@latest add ui.minidev.pro/r/table-toolbar.jsonTableuiTable primitives for header, body, footer, row, head, cell and caption, wrapped in a horizontal scroll container. Same API as the shadcn Table, in Tailwind.npx shadcn@latest add ui.minidev.pro/r/table.jsonVirtualized ListuiVirtualized list that renders only the visible rows plus a small buffer, using a fixed item height and absolute positioning. Keeps thousands of React rows fast.npx shadcn@latest add ui.minidev.pro/r/virtualized-list.jsonInfinite ScrolluiLoad the next page when a sentinel scrolls into view, with a loading row, an end of list message and a Load more button as the accessible fallback.npx shadcn@latest add ui.minidev.pro/r/infinite-scroll.json
Blocks and full pages 1
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Does the data table work with TanStack Table?
Yes. The components are presentational, so you can drive sorting, filtering and pagination from TanStack Table and render with these parts.
Can it handle thousands of rows?
Use the virtualized list component or paginate on the server. Rendering thousands of DOM rows at once is slow in any library.
Is there a mobile layout?
Tables scroll horizontally with a sticky first column on small screens, and expandable rows let you move secondary data into a detail panel.