Shadcn React Table

Search documentation

Search the docs

Material React Table parity for shadcn/ui

Every data-table feature, in your shadcn style

A feature-complete React data table — sorting, filtering, grouping, inline editing, virtualization and more — installed as source you own. One hook in, one component out.

  • MRT V3 parity
  • TanStack Table v8
  • shadcn registry
ID
AvaThompsonOwnerEngineeringactive22$45,000Jan 2, 2023
0%
LiamNguyenAdminMarketinginactive25$47,137Jan 13, 2023
9%
NoahSilvaEditorDesignpending28$49,274Jan 24, 2023
18%
EmmaCarterViewerSalesactive31$51,411Feb 4, 2023
27%
OliviaRossiOwnerSupportinactive34$53,548Feb 15, 2023
36%
WilliamWalkerAdminEngineeringpending37$55,685Feb 26, 2023
45%
SophiaPatelEditorMarketingactive40$57,822Mar 9, 2023
54%
JamesMullerViewerDesigninactive43$59,959Mar 20, 2023
63%
IsabellaParkOwnerSalespending46$62,096Mar 31, 2023
72%
LucasReyesAdminSupportactive49$64,233Apr 11, 2023
81%
$4,120,536
Rows per page
1–10 of 48

Everything Material React Table does

The full breadth of MRT, rebuilt on TanStack Table v8 and driven by a single hook — nothing bolted on.

Sorting

Single and multi-column sorting with shift-click and order badges.

Filtering & search

Per-column filter row, switchable match modes, and fuzzy global search.

Column management

Reorder, pin, resize, and toggle visibility of any column.

Grouping & trees

Group with aggregation footers, detail panels, and hierarchical sub-rows.

Inline editing

Edit by cell, row, table, or modal with create and save hooks.

Rows & selection

Selection, row numbers, pinning, drag-to-reorder, and row actions.

Virtualization

Row and column virtualization keep thousands of rows smooth.

Export

Export selected or filtered rows to CSV and Excel.

Localization & icons

Override every string and swap in your own icon set.

Why this table

MRT is the most complete React table, but it's tied to Material UI. This brings that breadth to the shadcn/ui ecosystem.

01

shadcn-native

It only uses standard shadcn primitive APIs — button, table, popover, command — declared as registry dependencies. No Material UI, no design system to fight.

02

You own the source

The component is copied into your repo under components/ui/data-table/. No opaque dependency to wrap or patch — extend any line you like.

03

Style-agnostic

shadcn add installs the primitives in your configured style and base color, so the table adopts your look with nothing to override.

04

One hook, one component

useDataTable(options) returns an enriched TanStack instance; <DataTable table={table} /> renders it. If you know TanStack Table, you already know this.

Drop it in with the shadcn CLI

One command installs the table source, the primitives it uses in your style, and its dependencies.

Terminal
$ pnpm dlx shadcn@latest add https://monabbir-ahmmad.github.io/shadcn-react-table/r/data-table.json
import { DataTable, useDataTable } from "@/components/ui/data-table"

function Users({ data, columns }) {
  const table = useDataTable({ data, columns })
  return <DataTable table={table} />
}