@manta-eu/react 0.1.9 → 0.2.0

package/src/components/table/selection-column.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { isPresent } from "@manta-eu/lib/present";
+import type { ColumnDef, Row, Table } from "@tanstack/react-table";
+import { useMemo, useRef } from "react";
+import { Checkbox } from "#components/checkbox/index";
+
+export type SelectionColumnOptions<TData> = {
+  id?: string;
+  size?: number;
+  getRowAriaLabel?: (row: Row<TData>) => string;
+  scope?: "all" | "page";
+};
+
+function selectRange<TData>(table: Table<TData>, anchorRowIndex: number, currentRow: Row<TData>): void {
+  const rows = table.getRowModel().rows;
+  const anchorPos = rows.findIndex((r) => r.index === anchorRowIndex);
+  const currentPos = rows.findIndex((r) => r.index === currentRow.index);
+  if (anchorPos === -1 || currentPos === -1 || anchorPos === currentPos) return;
+
+  const nextSelected = !currentRow.getIsSelected();
+  const [start, end] = anchorPos < currentPos ? [anchorPos, currentPos] : [currentPos, anchorPos];
+  for (let i = start; i <= end; i++) {
+    if (rows[i]?.getCanSelect()) rows[i]?.toggleSelected(nextSelected);
+  }
+}
+
+export function useSelectionColumn<TData>(options?: SelectionColumnOptions<TData>): ColumnDef<TData> {
+  const { id = "select", size = 36, getRowAriaLabel, scope = "all" } = options ?? {};
+  const getRowAriaLabelRef = useRef(getRowAriaLabel);
+  getRowAriaLabelRef.current = getRowAriaLabel;
+  const lastClickedRowIndexRef = useRef<number | null>(null);
+
+  return useMemo<ColumnDef<TData>>(
+    () => ({
+      id,
+      size,
+      // Nothing else sizes a column, so w-full would hand this one a share of the slack.
+      meta: { className: "w-0" },
+      enableSorting: false,
+      enableHiding: false,
+      enableResizing: false,
+      header: ({ table }) => {
+        const pageScoped = scope === "page";
+        const allSelected = pageScoped ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected();
+        const someSelected = pageScoped ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected();
+        return (
+          <Checkbox
+            aria-label={pageScoped ? "Select all rows on this page" : "Select all rows"}
+            checked={allSelected ? true : someSelected ? "indeterminate" : false}
+            onCheckedChange={(value) =>
+              pageScoped ? table.toggleAllPageRowsSelected(!!value) : table.toggleAllRowsSelected(!!value)
+            }
+            onClick={(event) => event.stopPropagation()}
+          />
+        );
+      },
+      cell: ({ row, table }) => (
+        <Checkbox
+          aria-label={getRowAriaLabelRef.current?.(row) ?? "Select row"}
+          checked={row.getIsSelected()}
+          disabled={!row.getCanSelect()}
+          onClick={(event) => {
+            event.stopPropagation();
+            if (event.shiftKey && isPresent(lastClickedRowIndexRef.current)) {
+              selectRange(table, lastClickedRowIndexRef.current, row);
+            }
+            lastClickedRowIndexRef.current = row.index;
+          }}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+        />
+      ),
+    }),
+    [id, size, scope],
+  );
+}

package/src/components/table/table-column-rearrange-popover.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+import { isPresent } from "@manta-eu/lib/present";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type Table } from "@tanstack/react-table";
+import { sentenceCase } from "change-case";
+import { GripVertical, SlidersHorizontal } from "lucide-react";
+import { equals } from "ramda";
+import { useEffect, useMemo, useState, type ComponentPropsWithoutRef, type DragEvent, type Ref } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "#components/button/index";
+import { Checkbox } from "#components/checkbox/index";
+import { cn } from "#style";
+
+export type WithClassName = {
+  className?: string;
+};
+
+const rearrangePopoverContent = tv({
+  base: [
+    "z-50 w-70 overflow-hidden p-1.5",
+    "bg-card border border-default-border rounded-md-v4 shadow-md",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    // A closed overlay stays hit-testable — see the note on the modal overlay.
+    "data-[state=closed]:hidden",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    "origin-(--radix-popover-content-transform-origin)",
+  ],
+});
+
+const rearrangeItem = tv({
+  base: [
+    "flex items-center gap-2 px-1.5 py-2 rounded-sm-v4",
+    "bg-card transition-all duration-200 ease-out",
+    "cursor-move",
+    "hover:bg-faint",
+  ],
+});
+
+const rearrangeHeader = tv({
+  base: ["flex items-center px-1.5 py-2 rounded-sm-v4", "bg-card", "typography-caption-medium text-muted-foreground"],
+});
+
+type RearrangeItem = {
+  id: string;
+  label: string;
+  checked: boolean;
+};
+
+type RearrangePopoverContentProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, "onToggle"> & {
+  title?: string;
+  items: RearrangeItem[];
+  onToggle: (id: string) => void;
+  onReorder: (items: RearrangeItem[]) => void;
+  onReset?: () => void;
+  resetLabel?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  ref?: Ref<HTMLDivElement>;
+};
+
+function RearrangePopoverContent(props: RearrangePopoverContentProps) {
+  const {
+    className,
+    title = "Edit Columns",
+    items,
+    onToggle,
+    onReorder,
+    onReset,
+    resetLabel = "Reset",
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    ref,
+    ...otherProps
+  } = props;
+
+  const [draggedIndex, setDraggedIndex] = useState<number>();
+  const [displayItems, setDisplayItems] = useState<RearrangeItem[]>(items);
+  const [originalIndex, setOriginalIndex] = useState<number>();
+
+  const currentDisplayItems = isPresent(draggedIndex) ? displayItems : items;
+
+  const handleDragStart = (index: number) => {
+    setDisplayItems(items);
+    setDraggedIndex(index);
+    setOriginalIndex(index);
+  };
+
+  const reorderItems = (fromIndex: number, toIndex: number) => {
+    if (fromIndex === toIndex) return;
+
+    const newItems = [...currentDisplayItems];
+    const [draggedItem] = newItems.splice(fromIndex, 1);
+    if (!draggedItem) return;
+
+    newItems.splice(toIndex, 0, draggedItem);
+    setDisplayItems(newItems);
+  };
+
+  const handleDragOver = (e: DragEvent, index: number) => {
+    e.preventDefault();
+    if (!isPresent(draggedIndex) || draggedIndex === index) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midpoint = rect.top + rect.height / 2;
+    const mouseY = e.clientY;
+
+    let targetIndex = index;
+    if (draggedIndex < index && mouseY < midpoint) {
+      targetIndex = index - 1;
+    } else if (draggedIndex > index && mouseY > midpoint) {
+      targetIndex = index + 1;
+    }
+
+    if (targetIndex !== draggedIndex && targetIndex >= 0 && targetIndex < currentDisplayItems.length) {
+      reorderItems(draggedIndex, targetIndex);
+      setDraggedIndex(targetIndex);
+    }
+  };
+
+  const finalizeDrag = () => {
+    if (isPresent(draggedIndex) && originalIndex !== draggedIndex) {
+      onReorder(displayItems);
+    }
+    setDraggedIndex(undefined);
+    setOriginalIndex(undefined);
+    setDisplayItems(items);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    finalizeDrag();
+  };
+
+  const handleDragEnd = () => {
+    finalizeDrag();
+  };
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(rearrangePopoverContent(), className)}
+        {...otherProps}
+      >
+        <div className="flex flex-col gap-1">
+          <div className={rearrangeHeader()}>{title}</div>
+
+          <div className="flex flex-col">
+            {currentDisplayItems.map((item, index) => (
+              <div
+                key={item.id}
+                draggable
+                onDragStart={() => handleDragStart(index)}
+                onDragOver={(e) => handleDragOver(e, index)}
+                onDrop={handleDrop}
+                onDragEnd={handleDragEnd}
+                className={cn(rearrangeItem(), draggedIndex === index && "opacity-50 scale-95")}
+              >
+                <GripVertical className="size-5 shrink-0 text-muted-foreground cursor-grab active:cursor-grabbing" />
+                <Checkbox checked={item.checked} onCheckedChange={() => onToggle(item.id)} label={item.label} />
+              </div>
+            ))}
+          </div>
+
+          {onReset && (
+            <Button variant="tertiary" size="sm" rounded="sm" className="w-full" onClick={onReset}>
+              {resetLabel}
+            </Button>
+          )}
+        </div>
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export type ColumnRearrangeDefaultState = {
+  order: string[];
+  visibility: Record<string, boolean>;
+};
+
+export type TableColumnRearrangePopoverProps<TData> = WithClassName & {
+  table: Table<TData>;
+  formatLabel?: (columnId: string) => string;
+  columnLabels?: Record<string, string>;
+  title?: string;
+  defaultState?: ColumnRearrangeDefaultState;
+  defaultOrder?: string[];
+  defaultVisibility?: Record<string, boolean>;
+} & ({ enableReset: true; resetLabel?: string } | { enableReset?: false; resetLabel?: string });
+
+export function TableColumnRearrangePopover<TData>(props: TableColumnRearrangePopoverProps<TData>) {
+  const {
+    table,
+    className,
+    formatLabel: formatLabelProp,
+    columnLabels,
+    title = "Edit Columns",
+    enableReset = false,
+    resetLabel,
+    defaultState,
+    defaultOrder,
+    defaultVisibility,
+  } = props;
+
+  const formatLabel = useMemo(
+    () => formatLabelProp ?? (columnLabels ? (id: string) => columnLabels[id] ?? sentenceCase(id) : sentenceCase),
+    [formatLabelProp, columnLabels],
+  );
+
+  const [open, setOpen] = useState(false);
+
+  const { columnVisibility, columnOrder } = table.getState();
+
+  const tableItems = useMemo(() => {
+    const hideableColumns = table.getAllColumns().filter((col) => col.getCanHide());
+
+    if (columnOrder.length > 0) {
+      hideableColumns.sort((a, b) => {
+        const indexA = columnOrder.indexOf(a.id);
+        const indexB = columnOrder.indexOf(b.id);
+
+        if (indexA === -1 && indexB === -1) return 0;
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+
+        return indexA - indexB;
+      });
+    }
+
+    return hideableColumns.map((column) => ({
+      id: column.id,
+      label: formatLabel(column.id),
+      checked: column.getIsVisible(),
+    }));
+  }, [table, formatLabel, columnVisibility, columnOrder]);
+
+  const [pendingItems, setPendingItems] = useState<RearrangeItem[] | null>(null);
+
+  useEffect(() => {
+    setPendingItems(null);
+  }, [tableItems]);
+
+  const items = pendingItems ?? tableItems;
+
+  if (items.length === 0) return null;
+
+  const handleToggle = (id: string) => {
+    const column = table.getColumn(id);
+    if (!column) return;
+
+    const base = pendingItems ?? tableItems;
+    const current = base.find((item) => item.id === id);
+    const newVisible = !(current?.checked ?? column.getIsVisible());
+
+    column.toggleVisibility(newVisible);
+    setPendingItems(base.map((item) => (item.id === id ? { ...item, checked: newVisible } : item)));
+  };
+
+  const handleReorder = (newItems: RearrangeItem[]) => {
+    setPendingItems(newItems);
+
+    const allColumns = table.getAllColumns();
+    const nonHideableColumns = allColumns.filter((col) => !col.getCanHide()).map((col) => col.id);
+    const newOrder = [...nonHideableColumns, ...newItems.map((item) => item.id)];
+
+    if (!equals(table.getState().columnOrder, newOrder)) {
+      table.setColumnOrder(newOrder);
+    }
+  };
+
+  const handleReset = () => {
+    const allColumns = table.getAllColumns();
+    const hideableColumns = allColumns.filter((col) => col.getCanHide());
+    const hideableColumnIds = new Set(hideableColumns.map((col) => col.id));
+    const nonHideableColumns = allColumns.filter((col) => !col.getCanHide()).map((col) => col.id);
+
+    let targetOrder: string[];
+    let targetVisibility: Record<string, boolean>;
+
+    if (defaultState) {
+      targetOrder = defaultState.order.filter((id) => hideableColumnIds.has(id));
+      targetVisibility = defaultState.visibility;
+    } else if (defaultOrder || defaultVisibility) {
+      const order = (defaultOrder ?? hideableColumns.map((col) => col.id)).filter((id) => hideableColumnIds.has(id));
+      const vis = defaultVisibility ?? {};
+
+      targetOrder = order;
+      targetVisibility = Object.fromEntries(order.map((id) => [id, vis[id] !== false]));
+    } else {
+      targetOrder = hideableColumns.map((col) => col.id);
+      targetVisibility = Object.fromEntries(hideableColumns.map((col) => [col.id, true]));
+    }
+
+    setPendingItems(
+      targetOrder.map((id) => ({
+        id,
+        label: formatLabel(id),
+        checked: targetVisibility[id] ?? true,
+      })),
+    );
+
+    hideableColumns.forEach((column) => {
+      column.toggleVisibility(targetVisibility[column.id] ?? true);
+    });
+
+    table.setColumnOrder([...nonHideableColumns, ...targetOrder]);
+  };
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <Button
+          size="base"
+          variant="tertiary"
+          icon={SlidersHorizontal}
+          iconOnly
+          aria-label="Columns"
+          className={cn("rounded-xl border border-default-border p-2.5 [&_svg]:size-5", className)}
+        />
+      </PopoverPrimitive.Trigger>
+      <RearrangePopoverContent
+        items={items}
+        onToggle={handleToggle}
+        onReorder={handleReorder}
+        title={title}
+        onReset={enableReset ? handleReset : undefined}
+        resetLabel={resetLabel}
+        align="end"
+      />
+    </PopoverPrimitive.Root>
+  );
+}

package/src/components/table/table-config.ts

@@ -0,0 +1,102 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  OnChangeFn,
+  PaginationState,
+  Row,
+  SortingState,
+  VisibilityState,
+  RowSelectionState,
+  TableOptions,
+} from "@tanstack/react-table";
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
+
+export interface TableConfigProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  sorting?: SortingState;
+  setSorting?: OnChangeFn<SortingState>;
+  columnFilters?: ColumnFiltersState;
+  setColumnFilters?: OnChangeFn<ColumnFiltersState>;
+  columnVisibility?: VisibilityState;
+  setColumnVisibility?: OnChangeFn<VisibilityState>;
+  columnOrder?: ColumnOrderState;
+  setColumnOrder?: OnChangeFn<ColumnOrderState>;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: OnChangeFn<RowSelectionState>;
+  enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+  getRowId?: (row: T, index: number, parent?: Row<T>) => string;
+  columnPinning?: ColumnPinningState;
+  pagination?: PaginationState;
+  setPagination?: OnChangeFn<PaginationState>;
+  manualSorting?: boolean;
+  manualPagination?: boolean;
+}
+
+// Module-level, not fresh literals: `createTableConfig` runs inside render, and a new `[]` changes
+// `getFilteredRowModel`'s memo deps every render, which fires `_autoResetPageIndex` -> a microtask
+// `setPagination` with a new object -> React cannot bail out -> the table locks. Only bites a caller
+// that omits a key and wires its setter, and only after a post-mount render, so a full page load
+// looks fine and a client-side navigation hangs. Not frozen: TanStack's state types are mutable and
+// identity is the requirement, not immutability. `table-config.test.ts` pins it.
+const emptySorting: SortingState = [];
+const emptyColumnFilters: ColumnFiltersState = [];
+const emptyColumnOrder: ColumnOrderState = [];
+const emptyColumnVisibility: VisibilityState = {};
+const emptyRowSelection: RowSelectionState = {};
+const emptyColumnPinning: ColumnPinningState = {};
+const defaultPagination: PaginationState = { pageIndex: 0, pageSize: 10 };
+
+export function createTableConfig<T>(tableConfig: TableConfigProps<T>): TableOptions<T> {
+  const {
+    data,
+    columns,
+    sorting = emptySorting,
+    setSorting,
+    columnFilters = emptyColumnFilters,
+    setColumnFilters,
+    columnVisibility = emptyColumnVisibility,
+    setColumnVisibility,
+    columnOrder = emptyColumnOrder,
+    setColumnOrder,
+    rowSelection = emptyRowSelection,
+    setRowSelection,
+    enableRowSelection,
+    getRowId,
+    pagination = defaultPagination,
+    setPagination,
+    columnPinning = emptyColumnPinning,
+    manualSorting = false,
+    manualPagination = false,
+  } = tableConfig;
+
+  return {
+    data,
+    columns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      columnOrder,
+      rowSelection,
+      pagination,
+      columnPinning,
+    },
+    manualSorting,
+    manualPagination,
+    enableRowSelection,
+    ...(getRowId === undefined ? {} : { getRowId }),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  };
+}

package/src/components/table/table-utils.ts

@@ -0,0 +1,41 @@
+import type { Column } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+
+export type CombinedSortOption<T extends string> = `${T}-${"asc" | "desc"}`;
+
+export type PinnedColumnInfo = {
+  isLeftPinned: boolean;
+  isRightPinned: boolean;
+  isPinned: boolean;
+  isLastLeftPinnedColumn: boolean;
+  isFirstRightPinnedColumn: boolean;
+};
+
+export function getPinnedColumnInfo<TData, TValue>(column: Column<TData, TValue>): PinnedColumnInfo {
+  const isPinned = column.getIsPinned();
+  const isLeftPinned = isPinned === "left";
+  const isRightPinned = isPinned === "right";
+  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    isLeftPinned,
+    isRightPinned,
+    isPinned: isLeftPinned || isRightPinned,
+    isLastLeftPinnedColumn,
+    isFirstRightPinnedColumn,
+  };
+}
+
+export function getCommonPinnedColumnStyles<TData, TValue>(column: Column<TData, TValue>): CSSProperties {
+  const { isPinned, isLeftPinned, isRightPinned } = getPinnedColumnInfo(column);
+
+  if (!isPinned) return {};
+
+  return {
+    position: "sticky",
+    zIndex: 20,
+    ...(isLeftPinned && { left: `${column.getStart?.("left") ?? 0}px` }),
+    ...(isRightPinned && { right: `${column.getAfter?.("right") ?? 0}px` }),
+  };
+}

package/src/components/table/use-max-table-rows.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMainContentSizing } from "#components/main-content/index";
+
+const tableHeaderHeight = 52;
+const tableRowHeight = 57;
+const contentPadding = 48;
+const paginationHeight = 32;
+const uiGap = 24;
+
+export function useMaxTableRows() {
+  const { availableContentHeight, fullPageFilterHeight } = useMainContentSizing();
+  const [maxRows, setMaxRows] = useState<number>();
+
+  useEffect(() => {
+    if (availableContentHeight > 0) {
+      const availableHeight =
+        availableContentHeight - fullPageFilterHeight - contentPadding - paginationHeight - tableHeaderHeight - uiGap;
+      const calculatedMaxRows = Math.floor(availableHeight / tableRowHeight);
+      setMaxRows(Math.max(calculatedMaxRows, 1));
+    }
+  }, [availableContentHeight, fullPageFilterHeight]);
+
+  return maxRows;
+}

package/src/components/table/use-table-state.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import type {
+  ColumnFiltersState,
+  ColumnOrderState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useState, type SetStateAction } from "react";
+import { useDebounceValue, useLocalStorage } from "usehooks-ts";
+
+export type UseTableStateOptions = {
+  useLocalState?: boolean;
+  defaultPageSize?: number;
+  enableRowSelection?: boolean;
+};
+
+export function useTableState(tableKey: string, initialSorting: SortingState = [], options?: UseTableStateOptions) {
+  const useLocalState = options?.useLocalState ?? false;
+  const defaultPageSize = options?.defaultPageSize ?? 20;
+  const enableRowSelection = options?.enableRowSelection;
+
+  const [localPagination, setLocalPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: defaultPageSize,
+  });
+
+  const [urlPageIndex, setUrlPageIndex] = useQueryState(`${tableKey}-page`, parseAsInteger.withDefault(0));
+
+  const [urlPageSize, setUrlPageSize] = useQueryState(
+    `${tableKey}-pageSize`,
+    parseAsInteger.withDefault(defaultPageSize),
+  );
+
+  const pagination: PaginationState = useLocalState
+    ? localPagination
+    : { pageIndex: urlPageIndex, pageSize: urlPageSize };
+
+  const setPagination = useLocalState
+    ? setLocalPagination
+    : (updater: SetStateAction<PaginationState>) => {
+        const nextPagination =
+          typeof updater === "function" ? updater({ pageIndex: urlPageIndex, pageSize: urlPageSize }) : updater;
+        void setUrlPageIndex(nextPagination.pageIndex);
+        void setUrlPageSize(nextPagination.pageSize);
+      };
+
+  const [searchQuery, setSearchQuery] = useQueryState(`${tableKey}-search`, {
+    defaultValue: "",
+  });
+
+  const [debouncedSearchQuery] = useDebounceValue(searchQuery, 500);
+
+  const [sorting, setSorting] = useState<SortingState>(initialSorting);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(
+    `table-${tableKey}-column-visibility`,
+    {},
+  );
+  const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(`table-${tableKey}-column-order`, []);
+  const [rowSelection, setRowSelection] = useState({});
+
+  return {
+    pagination,
+    setPagination,
+    pageIndex: pagination.pageIndex,
+    setPageIndex: (pageIndex: number) => setPagination((prev) => ({ ...prev, pageIndex })),
+    searchQuery,
+    setSearchQuery,
+    debouncedSearchQuery,
+    sorting,
+    setSorting,
+    columnFilters,
+    setColumnFilters,
+    columnVisibility,
+    setColumnVisibility,
+    columnOrder,
+    setColumnOrder,
+    rowSelection,
+    setRowSelection,
+    enableRowSelection,
+  };
+}