Shadcn Data Grid CRUD Admin

Data grid with CRUD features. Built by composing Avatar, Badge, Button, Card, Checkbox and 10 more. Uses @tanstack/react-table, sonner alongside the shadcn primitives. A free, open source shadcn data grid example you can install with npx shadcn@latest add @reui/c-data-grid-22 and edit as your own code.

Data grid with CRUD features

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A user admin list with search, a status filter popover showing counts, row checkboxes and a row actions menu

When to use

Admin and back office tables that sort, filter, paginate and select rows
Spreadsheet style editing with cell selection, clipboard and inline edits
Large record sets that need virtualized rows, columns or infinite scroll

When not to use

A list that should match other Frame panels on the same page: use the Data Grid CRUD in Frame example
A short static list of rows with no sorting or paging: use the Table component
Records moved as cards between status columns: use the Kanban component
A folder or category hierarchy with no columns of data: use the Tree component

Agent notes

Edit, Delete and Add new run no code; only Copy ID in ActionsCell acts, through useCopyToClipboard
Search and the status checkboxes filter demoData into filteredData on the client, before the rows reach useTable
Copy ID confirms with toast from sonner, which renders only in an app that mounts a Sonner Toaster
With manualPagination, pass the server total to useTable as rowCount as well as recordCount, or the page buttons never render
Give useTable a stable getRowId whenever rows can be pinned, reordered or virtualized
Swap DataGridTable for DataGridTableVirtual when rows need virtualization or infinite scroll

Third-party API docs

TanStack Table v9: API reference, docs
Sonner v2: API reference, docs

Markdownhttps://reui.io/components/data-grid/c-data-grid-22.md

MCPget_example("c-data-grid-22")

Installnpx shadcn@latest add @reui/c-data-grid-22

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Data Grid CRUD Admin

Dependencies

@tanstack/react-table
sonner

About Shadcn Data Grid CRUD Admin

What You Can Build With Shadcn Data Grid CRUD Admin

Composes Avatar, Badge, Button, Card, Checkbox, Data Grid, Dropdown Menu, Input Group, Label, Popover, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-data-grid-22
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Data Grid Examples

Pagination Data grid with pagination
Cell Borders Data grid with cell border
Dense Layout Data grid with dense layout
Borderless Data grid without table borders
Striped Rows Data grid with striped rows
Auto Width Data grid with auto width table layout
Row Selection Data grid with row selection
Expandable Rows Data grid with expandable rows
Sub Table Data grid with sub table
Column Icons Data grid with column icons
Sortable Columns Data grid with sortable columns
Movable Columns Data grid with movable columns

Related Shadcn Component Categories

Date Selector
Open-source shadcn date selector components for date range picking, booking windows, and calendar filters.
Dialog
Open-source shadcn dialog components for modal forms, focused tasks, and confirmations.
Drawer
Open-source shadcn drawer components for mobile panels, slide-over forms, and secondary workflows.
Dropdown Menu
Open-source shadcn dropdown menu components for action menus, profile menus, and toolbar menus.
Emoji Picker
Open-source shadcn emoji picker components for message composers, reactions, page icons, statuses, and custom team emoji.
Empty
Open-source shadcn empty state components for zero-data screens, first-run onboarding, and guided next steps.

Frequently Asked Questions

When should I use Shadcn Data Grid CRUD Admin?

Use it for a user admin list with search, a status filter popover showing counts, row checkboxes and a row actions menu.

Shadcn Data Grid as a whole fits:

Admin and back office tables that sort, filter, paginate and select rows
Spreadsheet style editing with cell selection, clipboard and inline edits
Large record sets that need virtualized rows, columns or infinite scroll

For a list that should match other Frame panels on the same page, use the Data Grid CRUD in Frame example. For a short static list of rows with no sorting or paging, use the Table component. For records moved as cards between status columns, use the Kanban component. For a folder or category hierarchy with no columns of data, use the Tree component.

How do I install Shadcn Data Grid CRUD Admin?

Run npx shadcn@latest add @reui/c-data-grid-22. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Data Grid CRUD Admin free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Data Grid CRUD Admin use?

It composes Avatar, Badge, Button, Card, Checkbox, Data Grid, Dropdown Menu, Input Group, Label, Popover. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.