Function useTable

apps/start/src/components/ui/data-table/use-table.tsx:34–240

({
  columns,
  pageSize,
  data,
  loading,
  name,
}: {
  columns: ColumnDef<TData>[];
  pageSize: number;
  data: TData[];
  loading: boolean;
  name: string;
})

};

export function useTable<TData>({
  columns,
  pageSize,
  data,
  loading,
  name,
}: {
  columns: ColumnDef<TData>[];
  pageSize: number;
  data: TData[];
  loading: boolean;
  name: string;
}) {
  const [page, setPage] = useQueryState(
    'page',
    parseAsInteger.withDefault(1).withOptions(nuqsOptions),
  );
  const [perPage, setPerPage] = useQueryState(
    'perPage',
    parseAsInteger.withDefault(pageSize ?? 10).withOptions(nuqsOptions),
  );
  const pagination: PaginationState = {
    pageIndex: page - 1,
    pageSize: perPage,
  };

  const { columnVisibility, setColumnVisibility, columnOrder, setColumnOrder } =
    useDataTableColumnVisibility(columns, name);

  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
    left: [
      ...columns
        .filter((column) => column.meta?.pinned === 'left')
        .map((column) => column.id!),
    ],
    right: columns
      .filter((column) => column.meta?.pinned === 'right')
      .map((column) => column.id!),
  });

  // Build per-key query parsers based on column metadata
  const filterParsers = useMemo(() => {
    return columns.reduce<
      Record<string, Parser<string> | Parser<string[]> | Parser<number[]>>
    >((acc, column) => {
      const columnId = (column.id ?? (column as any).accessorKey)?.toString();
      if (!columnId) return acc;
      const variant = column.meta?.variant;

      switch (variant) {
        case 'text':
        case 'number':
          acc[columnId] = parseAsString.withDefault('');
          break;
        case 'select':
          acc[columnId] = parseAsString.withDefault('');
          break;
        case 'multiSelect':