import { useMemo, useState } from 'react' import { type ColumnDef, type FilterFn, type TableOptions, useReactTable, } from '@tanstack/react-table' import { createClientDataGridOptions, createTextGlobalFilter, } from '@/lib/data-grid-defaults' interface UseClientDataGridOptions { data: TData[] columns: ColumnDef[] getSearchText: (row: TData) => string getRowId: (row: TData) => string pageSize?: number tableOptions?: Partial> globalFilterFn?: FilterFn } export function useClientDataGrid({ data, columns, getSearchText, getRowId, pageSize = 10, tableOptions, globalFilterFn, }: UseClientDataGridOptions) { const [globalFilter, setGlobalFilter] = useState('') const filterFn = useMemo( () => globalFilterFn ?? createTextGlobalFilter(getSearchText), [getSearchText, globalFilterFn], ) const table = useReactTable({ data, columns, state: { globalFilter }, onGlobalFilterChange: setGlobalFilter, globalFilterFn: filterFn, ...createClientDataGridOptions({ initialState: { pagination: { pageSize } }, ...tableOptions, }), getRowId, }) const filteredCount = table.getFilteredRowModel().rows.length return { table, globalFilter, setGlobalFilter, filteredCount, } }