Data Table
A fully-featured, animated data table with sorting, search, selection, inline editing, column resizing, and pagination.
18 rows
Name
Role
Department
Status
Start Date
Ava Chen
Staff Engineer
Engineering
Active
2019-03-14
Marcus Johnson
Product Designer
Design
Remote
2020-07-22
Priya Sharma
Engineering Manager
Engineering
Active
2018-01-10
James Walker
Data Scientist
Analytics
On Leave
2021-11-05
Sofia Rodriguez
Frontend Developer
Engineering
Active
2022-02-28
Liam O'Brien
DevOps Engineer
Infrastructure
Remote
2020-09-15
Yuki Tanaka
UX Researcher
Design
Active
2021-06-01
Elena Popov
Backend Developer
Engineering
Active
2023-01-09
Noah Kim
Product Manager
Product
Remote
2019-08-20
Zara Ahmed
QA Engineer
Engineering
Active
2022-05-17
Showing 1–10 of 18
Installation
npx shadcn@latest add https://wise-ui.com/r/data-table.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | - | Array of row objects. Each must have an `id` field (string | number). |
| columns | DataTableColumn<T>[] | - | Column definitions with key, label, and optional features. |
| searchable | boolean | false | Show the search toolbar for filtering rows. |
| searchKeys | (keyof T)[] | all columns | Which fields to search across. |
| selectable | boolean | false | Enable row selection with checkboxes. |
| onSelectionChange | (rows: T[]) => void | - | Callback fired when selection changes. |
| paginated | boolean | false | Enable pagination controls. |
| pageSize | number | 10 | Rows per page when paginated. |
| className | string | - | Additional CSS classes on the wrapper. |