pnpm add @rouf-dev/pantheon-ui @tanstack/react-table

import { DataTable, DataTableColumnHeader } from "@rouf-dev/pantheon-ui";
import type { DataTableColumn } from "@rouf-dev/pantheon-ui";

type User = {
  name: string;
  email: string;
  status: string;
};

const columns: DataTableColumn<User>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
  },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "status", header: "Status" },
];

const data: User[] = [
  { name: "John Doe", email: "john@example.com", status: "Active" },
  { name: "Jane Smith", email: "jane@example.com", status: "Pending" },
];

<DataTable columns={columns} data={data} />

<DataTable
  columns={columns}
  data={data}
  searchable
  searchPlaceholder="Search users..."
  paginated
  pageSize={10}
  pageSizeOptions={[10, 20, 50]}
  selectable
  onSelectionChange={(selection) => console.log(selection)}
  exportable
  exportFilename="users"
  densityControl
  stickyHeader
/>