DataTable

Responsive data table with sortable headers, native row selection, selection callbacks, and reduced-motion row reordering.

InterfaceSource ready8 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/data-table.json
Interactive preview
Interface
Project activity
Atlas redesignIn reviewToday
Billing cleanupActiveYesterday
Launch notesDraftJul 12

Install with the CLI

# adds DataTable to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/data-table.json

Or install the package

// npm install @uigrids/react-ui
import { DataTable } from '@uigrids/react-ui'

export default function App() {
  return <DataTable />
}

Props

PropTypeDefaultDescription
captionstring'Project activity'Configures the caption option.
columnsunknownDEFAULT_COLUMNSConfigures the columns option.
rowsunknownDEFAULT_ROWSConfigures the rows option.
defaultSelectedarray[]Configures the default selected option.
minWidthnumber620Configures the min width option.
onSelectionChangeunknown-Configures the on selection change option.
onSortChangeunknown-Configures the on sort change option.
classNamestring''Additional CSS classes for the outer element.