Skip to main content

​
Instalation

npx shadcn add "https://tarcisioandrade.github.io/rich-domain/packages/react-rich-domain/public/r/data-table-criteria.json"

​
Features

  • Integrated filtering, sorting, and pagination
  • Search functionality with debouncing
  • Column visibility toggle
  • Export to CSV/Excel
  • Mobile responsive
  • Customizable action bar

​
Basic Usage

import { useCriteriaTable } from "@/hooks/use-criteria-table";
import { DataTableCriteria } from "@/components/data-table-criteria/data-table-criteria";
import type { ColumnDef } from "@tanstack/react-table";
import type { QueryFilter } from "@/lib/filter-utils";
import type { FileFormat } from "./components/data-view-criteria/data-view-toolbar";

interface User {
  id: string;
  name: string;
  email: string;
  age: number;
  status: "active" | "inactive";
  createdAt: string;
}

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "age",
    header: "Age",
  },
  {
    accessorKey: "status",
    header: "Status",
  },
];

async function getExport(format: FileFormat) {
  const result = await apiCall(format);
  return result;
}

const filterFields: QueryFilter[] = [
  { field: "name", fieldLabel: "Name", type: "string" },
  { field: "age", fieldLabel: "Age", type: "number" },
  {
    field: "status",
    fieldLabel: "Status",
    type: "string",
    multiSelect: true,
    options: [
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ],
  },
];

function UserTable() {
  const { table, data, isLoading, filterProps, searchProps } =
    useCriteriaTable<User>({
      columns,
      filterFields,
      queryKey: ["users"],
      queryFn: getUsers,
      criteriaOptions: {
        pageSize: 10,
        syncWithUrl: true,
      },
    });

  return (
    <DataTableCriteria
      table={table}
      data={data}
      isLoading={isLoading}
      filterProps={filterProps}
      searchProps={searchProps}
      onExport={getExport}
      searchPlaceholder="Search users..."
      emptyMessage="No users found."
    />
  );
}