43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import type { HTMLAttributes } from "react";
|
|
import type { UseQueryResult } from "@tanstack/react-query";
|
|
import { useReactTable, type TableOptions } from "@tanstack/react-table";
|
|
import { DataTable } from "@common/components";
|
|
import { NoData } from "../ui/no-data";
|
|
import type { PageableList } from "../model";
|
|
import { matchQueryStatus } from "./match-query-status";
|
|
|
|
type UseDataTableOptions<T> = {
|
|
query: UseQueryResult<PageableList<T>>;
|
|
tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
|
|
dataTableOptions?: DataTableOptions<T>;
|
|
};
|
|
|
|
type DataTableOptions<T> = {
|
|
variant?: "default" | "secondary" | "line";
|
|
className?: HTMLAttributes<HTMLTableElement>["className"];
|
|
viewPagination?: boolean;
|
|
onRowClick?: (row: T) => void;
|
|
};
|
|
|
|
export const useDataTable = <T,>({
|
|
query,
|
|
tableOptions,
|
|
dataTableOptions,
|
|
}: UseDataTableOptions<T>) => {
|
|
const table = useReactTable({
|
|
...tableOptions,
|
|
data: query.data?.content ?? [],
|
|
rowCount: query.data?.totalElements ?? 0,
|
|
});
|
|
|
|
return {
|
|
tableComponent: matchQueryStatus(query, {
|
|
Empty: <NoData />,
|
|
Success: () => {
|
|
return <DataTable table={table} {...dataTableOptions} />;
|
|
},
|
|
}),
|
|
tableInstance: table,
|
|
};
|
|
};
|