Guides
One page per feature, each with live examples you can copy.
Getting started
Updatingshadcn add copies this block's source into your project — after that, the code is yours, and upstream releases don't reach it automatically.Migrating from MRTThe data table follows Material React Table (MRT) closely: the same hook-then-component shape, most of the same options, and the same TanStack Table underneath.
Filtering & search
Column filteringEach column can expose its own filter control in a per-column filter row.Filter modesFilter modes let users change how a column's filter is applied — for example matching with Contains, Starts with, Equals, Between, Greater than, or Empty.Global searchAn expandable global search box appears in the toolbar by default (enableGlobalFilter: true).Advanced filterSet enableAdvancedFilter: true to add a toolbar button that opens a dialog where users build compound filter rules — multiple conditions joined by All (AND) or Any (OR) logic.
Columns
Column visibilityA "Columns" toggle in the toolbar lets users show or hide columns.Column orderingSet enableColumnOrdering: true to add a drag grip to each header.Column pinningSet enableColumnPinning: true to let users pin columns left or right from the column-actions menu.Column resizingSet enableColumnResizing: true to add a drag handle on each column's edge.
Rows
Row selectionSet enableRowSelection: true to add a leading checkbox column.Row orderingSet enableRowOrdering: true to add a drag-handle column for drag-and-drop row reordering.Row draggingRows can be dragged out of a table — onto another table, or onto a drop zone of your own — with the pointer, touch or the keyboard.Row pinningSet enableRowPinning: true to add a pin toggle inside the row-number column.Row numbersSet enableRowNumbers: true to add a leading row-number column to the table.
Sorting, grouping & expanding
SortingSorting is on by default.Grouping & aggregationSet enableGrouping: true to let users group rows by a column.Detail panelProvide renderDetailPanel to render an expandable panel beneath each row.Tree dataFor hierarchical data, provide TanStack Table's getSubRows to tell the table where each row's children live.
Editing & actions
EditingSet enableEditing: true to make rows editable, then choose how editing is presented with editDisplayMode.Row actionsProvide renderRowActions to add a trailing actions column.Cell actionsCells can have a right-click menu.Event listenersThe data table exposes click handlers for rows and cells so you can react to user interaction.
Display & customization
DensityDensity controls the vertical padding of table rows and the padding around the toolbars.AnimationsThe table animates rows, columns, detail panels, the toolbar and a few controls so changes are easy to follow.Sticky header & footerThe header row (enableStickyHeader, default true) sticks to the top of the scroll surface.Toolbar customizationThe table renders a top toolbar (title slot + your actions on the left, an icon-action cluster on the right) and a bottom toolbar (pagination).Part props (slotProps)Every part of the table — the scroll surface, rows, cells, toolbars, the search box, edit fields and more — accepts extra props through the slotProps option.Display columnsSome features add columns of their own: row selection, the expand toggle, row actions, row numbers, row pinning and the row drag handle.Composition<DataTable /> lays out the whole table for you.Display modesSeveral features expose a *DisplayMode option that changes _how_ the UI is presented without changing the underlying behavior.Table refsThe table instance exposes DOM refs to its structural elements on table.dataTable.refs.ThemingThe data table is style-agnostic.Custom iconsEvery glyph is a named slot.LocalizationThe table ships in 38 languages.Right-to-leftThe table supports right-to-left languages such as Arabic, Hebrew and Persian.
Data & performance
Loading statePass isLoading: true to render skeleton rows and a progress bar in place of the data.Server-side dataWhen your data lives on a server, hand pagination, sorting, and filtering off to it.Production-ready tablesA table over a real API: data fetched with React Query, paging, sorting and search done on the server, the table's state kept in one hook, and edits saved through a mutation.PaginationThe table pages its rows by default, ten to a page, with a page-size menu and first / previous / next / last buttons below the rows.Infinite scrollInfinite scroll loads more rows as the user scrolls toward the bottom, instead of paging through the data.VirtualizationVirtualization renders only the cells currently in view, keeping large tables fast.Row heightBy default rows size to their content (and the virtualizer measures them).ExportThe table ships no built-in export — the same stance as Material React Table — so the block carries no CSV or spreadsheet dependencies.State managementThe data table keeps all of its state in TanStack Table's store: the standard table state (sorting, filters, selection…) and its own UI state (density, editing, filter modes…).Best practicesA few habits keep tables fast, typed and easy to change.Accessibility & keyboardThe table is built to be used without a mouse and with a screen reader.