Mokri

Preview

Name	Email	Role	Department	Projects	Last Login
John Doe	john@example.com	Admin	Engineering	12	2 hours ago
Jane Smith	jane@example.com	User	Marketing	8	1 day ago
Bob Johnson	bob@example.com	Moderator	Support	15	30 minutes ago
Alice Brown	alice@example.com	User	Sales	5	Never

<> import.ts

import { DataTable } from "@/components/ui/data-table"

<> component.tsx

import { DataTable } from "@/components/ui/data-table"

<DataTable />

A flexible, sortable, selectable data table.

<> import.ts

import { DataTable, DataTablePresets } from "@/components/ui/data-table"

Prop	Type	Default	Description
`data`	`T[]`	—	Row data array
`columns`	`Array<{ key: keyof T; label: string; sortable?: boolean; width?: string; render?: (value: any, row: T, index: number) => React.ReactNode }>`	—	Column definitions
`className`	`string`	`""`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Cell sizing
`selectable`	`boolean`	`true`	Enable row selection
`onSelectionChange`	`(selectedRows: T[]) => void`	—	Selection callback
`onRowClick`	`(row: T, index: number) => void`	—	Row click callback
`emptyMessage`	`string`	`"No data available"`	Shown when no rows

<> example.tsx

// Basic
<DataTable data={rows} columns={[{ key: 'name', label: 'Name' }]} />

small

Small, selectable

medium

Medium, selectable

large

Large, selectable