@allem-ui/data-grid

Advanced data grid with sorting, filtering, and pagination for Allem UI -- powered by TanStack Table.

Installation

npm install @allem-ui/data-grid @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/data-grid";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import { DataGrid, DataGridToolbar, DataGridPagination } from "@allem-ui/data-grid";
import type { ColumnDef } from "@allem-ui/data-grid";

const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "role", header: "Role" },
];

export function UsersTable() {
  return (
    <div>
      <DataGridToolbar />
      <DataGrid data={users} columns={columns} />
      <DataGridPagination />
    </div>
  );
}

Components

| Component | Description | |-----------|-------------| | DataGrid | Main data table with sorting, filtering, and row selection | | DataGridToolbar | Search, filter controls, and bulk actions bar | | DataGridPagination | Page navigation with page size selector | | DataGridColumnHeader | Sortable column header with sort indicators |

Features

• Powered by TanStack Table -- Built on TanStack Table v8 for robust data handling
• Sorting -- Click column headers to sort ascending/descending
• Filtering -- Global search and per-column filtering
• Pagination -- Client-side pagination with configurable page sizes
• Composable -- Use DataGrid alone or with Toolbar and Pagination
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with generic ColumnDef<T> types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem