Data Grid

import {
  DataGrid,
  DataGridFieldsMenu,
  DataGridFilterMenu,
  DataGridGroupMenu,
  DataGridKeyboardShortcuts,
  DataGridRowHeightMenu,
  DataGridSortMenu,
  DataGridViewMenu,
  getDataGridSelectColumn,
  useDataGrid
} from '@docyrus/ui/components/data-grid';
import type { ColumnDef, DataGridAction } from '@docyrus/ui/components/data-grid';

const columns: ColumnDef<Person>[] = [
  getDataGridSelectColumn<Person>(),
  {
    accessorKey: 'name',
    header: 'Name',
    size: 180,
    meta: { label: 'Name', cell: { variant: 'short-text' } }
  },
  {
    accessorKey: 'email',
    header: 'Email',
    size: 220,
    meta: { label: 'Email', cell: { variant: 'email' } }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    size: 130,
    meta: {
      label: 'Status',
      cell: {
        variant: 'status',
        options: [
          { label: 'Active', value: 'active', color: '#22c55e' },
          { label: 'Inactive', value: 'inactive', color: '#ef4444' }
        ]
      }
    }
  }
];

function MyGrid() {
  const [data, setData] = useState(initialData);

  const { table, ...gridProps } = useDataGrid({
    data,
    columns,
    enableSearch: true,
    enableGrouping: true,
    onDataChange: setData,
    onRowAdd: () => {
      setData(prev => [...prev, emptyRow]);
      return null;
    },
    onRowsDelete: (rows, indices) => {
      setData(prev => prev.filter((_, i) => !indices.includes(i)));
    }
  });

  return (
    <div>
      <div className="mb-3 flex items-center gap-2">
        <DataGridFilterMenu table={table} />
        <DataGridSortMenu table={table} />
        <DataGridGroupMenu table={table} />
        <DataGridRowHeightMenu table={table} />
        <DataGridFieldsMenu table={table} />
        <DataGridViewMenu table={table} storageKey="my-grid" />
      </div>
      <DataGridKeyboardShortcuts enableSearch />
      <DataGrid table={table} {...gridProps} height={500} />
    </div>
  );
}

import { getDataGridActionsColumn } from '@docyrus/ui/components/data-grid';

const actionColumn = getDataGridActionsColumn<Person>({
  cell: ({ row }) => (
    <div className="flex items-center gap-0.5">
      <Button variant="ghost" size="icon" className="size-7" onClick={() => onExpand(row.original)}>
        <Expand className="size-4" />
      </Button>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon" className="size-7">
            <MoreHorizontal className="size-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={() => onEdit(row.original)}>
            <Pencil className="size-4" /> Edit
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive" onClick={() => onDelete(row.original)}>
            <Trash2 className="size-4" /> Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
});

const columns = [
  getDataGridSelectColumn<Person>(),
  actionColumn,
  ...dataColumns
];

const actionColumn = getDataGridActionsColumn<Person>({
  visibleOnHover: false,
  actionCount: 1,
  cell: ({ row }) => (
    <Button variant="ghost" size="icon" className="size-7">
      <MoreHorizontal className="size-4" />
    </Button>
  )
});

const actions: DataGridAction<Person>[] = [
  {
    label: 'Export',
    icon: <Download className="size-3.5" />,
    onAction: (rows) => exportToCsv(rows)
  },
  {
    label: 'Delete',
    icon: <Trash2 className="size-3.5" />,
    variant: 'destructive',
    onAction: (rows) => deleteRows(rows)
  }
];

<DataGrid table={table} {...gridProps} actions={actions} />

import type { RowChange } from '@docyrus/ui/components/data-grid';

const { table, ...gridProps } = useDataGrid({
  data,
  columns,
  enableChangeTracking: true,
  onDataChange: setData,
  onChangesSave: async (changes: RowChange[], data) => {
    await api.batchUpdate(changes);
  },
  onChangesDiscard: () => {
    // Optional: called when user clicks Cancel
  },
  getRowLabel: (row) => row.name
});

import {
  DataGridSkeleton,
  DataGridSkeletonToolbar,
  DataGridSkeletonGrid
} from '@docyrus/ui/components/data-grid';

<DataGridSkeleton>
  <DataGridSkeletonToolbar actionCount={4} align="end" />
  <DataGridSkeletonGrid />
</DataGridSkeleton>

import { applyViewToTable, type SavedDataGridView } from '@docyrus/ui/components/data-grid';
import { DataGridViewSelect } from '@docyrus/ui/components/data-grid-view-select';
import { DataGridViewEditor } from '@docyrus/ui/components/data-grid-view-select';

const [views, setViews] = useState<SavedDataGridView[]>(initialViews);
const [activeViewId, setActiveViewId] = useState('view-all');
const [editorOpen, setEditorOpen] = useState(false);
const [editingView, setEditingView] = useState<SavedDataGridView | undefined>();

<DataGridViewSelect
  table={table}
  variant="horizontal-tabs"
  views={views}
  activeViewId={activeViewId}
  onViewChange={(view) => setActiveViewId(view.id)} />

<DataGridViewEditor
  table={table}
  open={editorOpen}
  onOpenChange={setEditorOpen}
  value={editingView}
  onSave={(view) => {
    setViews(prev => {
      const idx = prev.findIndex(v => v.id === view.id);
      return idx >= 0
        ? prev.map(v => v.id === view.id ? view : v)
        : [...prev, view];
    });
    setActiveViewId(view.id);
    applyViewToTable(table, view);
  }}
  onDelete={(viewId) => setViews(prev => prev.filter(v => v.id !== viewId))}
  showDelete={editingView !== undefined && views.length > 1} />

import type {
  DataGridRowColorRule,
  DataGridCellColorRule
} from '@docyrus/ui/components/data-grid';

const rowColorRules: DataGridRowColorRule[] = [
  { formula: 'status = "Cancelled"', color: 'red-50' },
  { formula: 'total > 10000', color: 'green-50' }
];

const cellColorRules: DataGridCellColorRule[] = [
  { column: 'priority', formula: 'priority = "Urgent"', color: 'red-100' },
  { column: 'total', formula: 'total > 5000', color: 'emerald-100' }
];

const { table, ...gridProps } = useDataGrid({
  data,
  columns,
  rowColorRules,
  cellColorRules
});

const columns: ColumnDef<Product>[] = [
  {
    accessorKey: 'trend',
    header: 'Revenue Trend',
    size: 160,
    meta: {
      cell: {
        variant: 'chart',
        chartType: 'sparkline',
        color: '#10b981',
        expandedCellContent: (rowData) => {
          const row = rowData as Product;
          return (
            <div className="space-y-2">
              <h4 className="font-medium">{row.name} — Detailed Trend</h4>
              {/* Full chart, stats, grid, etc. */}
            </div>
          );
        }
      }
    }
  },
  {
    accessorKey: 'weeklyUnits',
    header: 'Weekly Units',
    size: 140,
    meta: {
      cell: {
        variant: 'chart',
        chartType: 'bar',
        dataKey: 'units',
        color: '#8b5cf6'
      }
    }
  }
];

import {
  DataGrid,
  useDataGrid
} from '@docyrus/ui/components/data-grid';

const { table, ...gridProps } = useDataGrid<Task>({
  data,
  columns,
  pagingMode: 'standard',
  pageSize: 50
});

// Spread `gridProps` — `pagingMode` flows through automatically.
return <DataGrid table={table} {...gridProps} height="auto" />;

const selectColumn = getDataGridSelectColumn<Person>({
  size: 44,
  enableRowMarkers: true
});
const columns = [selectColumn, ...yourColumns];

const actionColumn = getDataGridActionsColumn<Person>({
  cell: ({ row }) => (
    <Button variant="ghost" size="icon" className="size-7">
      <MoreHorizontal className="size-4" />
    </Button>
  )
});
const columns = [getDataGridSelectColumn<Person>(), actionColumn, ...yourColumns];

{
  accessorKey: string;
  header: string | (() => ReactNode);
  size?: number;
  meta?: {
    label?: string;
    group?: string;
    cell?: CellOpts;
    visibleOnHover?: boolean;
    format?: (value: TValue, row: TData) => string;
  };
}

type RowHeightValue = 'short' | 'medium' | 'tall' | 'extra-tall';

type Direction = 'ltr' | 'rtl';