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} />;
}
