Data Grid

The Data Grid is a robust and feature-rich table component designed for displaying and managing complex datasets. It is built on top of @tanstack/react-table for headless logic and @dnd-kit for drag-and-drop interactions.

Usage

import { DataGrid, createSortableColumn } from '@orbitusdev/components/ui/grid';
 
const columns = [
  createSortableColumn('name', 'Name', 'name'),
  createSortableColumn('role', 'Role', 'role'),
  {
    id: 'actions',
    header: 'Actions',
    cell: ({ row }) => <Button onClick={() => edit(row.original)}>Edit</Button>
  }
];
 
export default function UsersTable({ users }) {
  return (
    <DataGrid
      columns={columns}
      data={users}
      searchPlaceholder="Search users..."
      pageSize={10}
      showPagination
      showSearch
      enableRowSelection
    />
  );
}

Features

• Sorting & Filtering: Built-in support for column sorting and global search.
• Pagination: Client-side pagination with configurable page sizes.
• Selection: Row selection with bulk actions (Delete, Export).
• Column Management:
  • Visibility: Toggle columns on/off.
  • Resizing: Drag to resize columns.
  • Pinning: Pin columns to the left or right.
• Row Interactions:
  • Row Click: Handle row click events.
  • Row Actions: Built-in Edit/Delete actions or custom renderers.
  • Expansion: Show detailed content within an expanded row.
  • Reordering: Drag and drop rows to reorder them.
• Exporting: Export data to Excel or CSV.
• Density: Toggle between Compact, Normal, and Comfortable row heights.
• Keyboard Navigation: Navigate cells using arrow keys.

API Reference

Props

Helper Functions

createSortableColumn

Helper to easily create a column definition with sorting enabled.

createSortableColumn(
  accessorKey: string,
  header: string,
  id?: string,
  options?: Partial<ColumnDef<T>>
)

Examples

With Toolbar Actions

<DataGrid
  data={data}
  columns={columns}
  renderToolbar={() => (
    <div className="flex gap-2">
      <Button>Custom Action</Button>
    </div>
  )}
  exportAction={{
    label: 'Export Data',
    onClick: handleExport
  }}
/>

Server-Side Pagination (Custom)

While DataGrid handles client-side pagination by default, you can pass showPagination={false} and implement your own pagination controls in renderFooter or outside the component for server-side scenarios.