Data Table

npx shadcn add @qotra/data-table

import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';

export default function Root() {
  return (
    <NuqsAdapter>
      <App />
    </NuqsAdapter>
  );
}

import type { ColumnDef } from '@tanstack/react-table';
import { Text, CalendarIcon, Tag } from 'lucide-react';
import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header';

interface Task {
  id: string;
  title: string;
  status: 'todo' | 'in-progress' | 'done';
  priority: 'low' | 'medium' | 'high';
  createdAt: Date;
}

const columns: ColumnDef<Task>[] = [
  {
    id: 'title',
    accessorKey: 'title',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    cell: ({ row }) => <span>{row.getValue('title')}</span>,
    meta: {
      label: 'Title',
      placeholder: 'Search titles...',
      variant: 'text',
      icon: Text,
    },
    enableColumnFilter: true,
  },
  {
    id: 'status',
    accessorKey: 'status',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    meta: {
      label: 'Status',
      variant: 'multiSelect',
      icon: Tag,
      options: [
        { label: 'Todo', value: 'todo' },
        { label: 'In Progress', value: 'in-progress' },
        { label: 'Done', value: 'done' },
      ],
    },
    enableColumnFilter: true,
  },
  {
    id: 'createdAt',
    accessorKey: 'createdAt',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Created" />
    ),
    meta: {
      label: 'Created At',
      variant: 'dateRange',
      icon: CalendarIcon,
    },
    enableColumnFilter: true,
  },
];

import { useDataTable } from '@/hooks/use-data-table';

function TasksTable({ data, pageCount }: { data: Task[]; pageCount: number }) {
  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    initialState: {
      sorting: [{ id: 'createdAt', desc: true }],
      pagination: { pageSize: 20 },
    },
    getRowId: (row) => row.id,
  });

  return (
    <DataTable table={table}>
      <DataTableToolbar table={table}>
        <DataTableSortList table={table} />
      </DataTableToolbar>
    </DataTable>
  );
}

import { DataTable } from '@/components/data-table/data-table';
import { DataTableToolbar } from '@/components/data-table/data-table-toolbar';
import { DataTableSortList } from '@/components/data-table/data-table-sort-list';

<DataTable table={table}>
  <DataTableToolbar table={table}>
    <DataTableSortList table={table} />
  </DataTableToolbar>
</DataTable>

import { DataTableAdvancedToolbar } from '@/components/data-table/data-table-advanced-toolbar';
import { DataTableFilterList } from '@/components/data-table/data-table-filter-list';
import { DataTableSortList } from '@/components/data-table/data-table-sort-list';

<DataTable table={table}>
  <DataTableAdvancedToolbar table={table}>
    <DataTableFilterList table={table} />
    <DataTableSortList table={table} />
  </DataTableAdvancedToolbar>
</DataTable>

import { DataTableFilterMenu } from '@/components/data-table/data-table-filter-menu';

<DataTable table={table}>
  <DataTableAdvancedToolbar table={table}>
    <DataTableFilterMenu table={table} />
    <DataTableSortList table={table} />
  </DataTableAdvancedToolbar>
</DataTable>

import { BulkActionBar } from '@/components/data-table/bulk-action-bar';
import { Button } from '@/components/ui/button';

function TaskActionBar({ table }: { table: Table<Task> }) {
  const rows = table.getFilteredSelectedRowModel().rows;

  return (
    <BulkActionBar
      count={rows.length}
      noun="task"
      onClear={() => table.toggleAllRowsSelected(false)}
    >
      <Button
        variant="outline"
        size="sm"
        onClick={() => handleDelete(rows.map((r) => r.original.id))}
      >
        Delete
      </Button>
    </BulkActionBar>
  );
}

<DataTable table={table} actionBar={<TaskActionBar table={table} />}>
  <DataTableToolbar table={table} />
</DataTable>

<DataTable table={table} isLoading={isFetching}>
  <DataTableToolbar table={table} />
</DataTable>

<DataTable
  table={table}
  hasMore={hasNextPage}
  onLoadMore={fetchNextPage}
>
  <DataTableToolbar table={table} />
</DataTable>

const { table, page, perPage, sorting, filterValues } = useDataTable({
  data,
  columns,
  pageCount,
  enableAdvancedFilter: true,
});

// Use these in your data fetching (e.g. with React Router loaders):
// page        → current page number
// perPage     → page size
// sorting     → [{ id: 'createdAt', desc: true }]
// filterValues → advanced filter state from the URL

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const page = Number(url.searchParams.get('page') ?? 1);
  const perPage = Number(url.searchParams.get('perPage') ?? 20);
  const sort = url.searchParams.get('sort');

  const { data, total } = await getTasks({ page, perPage, sort });

  return { data, pageCount: Math.ceil(total / perPage) };
}

interface Option {
  label: string;
  value: string;
  count?: number;
  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
}

interface QueryKeys {
  page: string;       // default: 'page'
  perPage: string;    // default: 'perPage'
  sort: string;       // default: 'sort'
  filters: string;    // default: 'filters'
  joinOperator: string; // default: 'joinOperator'
}

interface DataTableRowAction<TData> {
  row: Row<TData>;
  variant: 'update' | 'delete';
}