> ## Documentation Index
> Fetch the complete documentation index at: https://woltz.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# DataTableCriteria

> A complete data table component integrated with React Query and TanStack Table.

<a href="https://react-rich-domain.netlify.app/#table" target="_blank">
  Live Demo
</a>

## Instalation

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn add "https://tarcisioandrade.github.io/rich-domain/packages/react-rich-domain/public/r/data-table-criteria.json"
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn add "https://tarcisioandrade.github.io/rich-domain/packages/react-rich-domain/public/r/data-table-criteria.json"
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn add "https://tarcisioandrade.github.io/rich-domain/packages/react-rich-domain/public/r/data-table-criteria.json"
  ```
</CodeGroup>

#### Features

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

#### Basic Usage

```tsx theme={null}
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, criteria } = useCriteriaTable<User>({
    filterFields,
    columns,
    queryKey: ["users"],
    queryFn: getUsers,
    searchOptions: {
      searchPlaceholder: "Search users...",
    },
    criteriaOptions: {
      pageSize: 10,
      syncWithUrl: true,
    },
  });

  return <DataTableCriteria table={table} criteria={criteria} />;
}
```