react-hook-tanstack-table 0.0.1

package/src/hooks/useCell.ts

@@ -0,0 +1,156 @@
+import { useCallback } from "react"
+
+import type {
+  Cell,
+  Column,
+  RequiredKeys,
+  Row,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { identity } from "../lib/identity"
+import { hasTableArg } from "../lib/hasTableArg"
+import { runGetters } from "../lib/runGetters"
+import { isShallowEqual } from "../lib/isShallowEqual"
+import { invariant } from "../lib/invariant"
+
+import type { IsEqual, RunGetters } from "../types"
+
+import type { ColumnValues } from "./useColumn"
+import type { RowValues } from "./useRow"
+import { useTableWithSelector } from "./useTableWithSelector"
+
+export interface CellValues<TData extends RowData, TValue> extends RunGetters<
+  Cell<TData, TValue>
+> {}
+
+const cellValuesCache = new WeakMap<
+  RequiredKeys<TableOptionsResolved<any>, "state">,
+  Map<string, Map<string, CellValues<any, any>>>
+>()
+
+const getCellValues = <TData extends RowData, TValue>(
+  table: Table<TData>,
+  rowId: string,
+  columnId: string,
+): CellValues<TData, TValue> => {
+  let cellCache = cellValuesCache.get(table.options)
+  if (!cellCache) {
+    cellCache = new Map()
+    cellValuesCache.set(table.options, cellCache)
+  }
+
+  let rowCache = cellCache.get(rowId)
+  if (!rowCache) {
+    rowCache = new Map()
+    cellCache.set(rowId, rowCache)
+  }
+
+  let cached = rowCache.get(columnId)
+
+  if (!cached) {
+    const cell = table
+      .getRow(rowId)
+      ?.getAllCells()
+      .find((c) => c.column.id === columnId) as Cell<TData, TValue> | undefined
+
+    invariant(cell)
+
+    cached = runGetters(cell)
+
+    rowCache.set(columnId, cached)
+  }
+
+  return cached
+}
+
+type Selector<TData extends RowData, TValue, Selection> = (
+  cellValues: CellValues<TData, TValue>,
+) => Selection
+
+interface CellCoords<TData extends RowData, TValue> {
+  column: Column<TData, TValue> | ColumnValues<TData> | string
+  row: Row<TData> | RowValues<TData> | string
+}
+
+export const useCell = <
+  TData extends RowData,
+  TValue,
+  Selection = CellValues<TData, TValue>,
+>(
+  ...args:
+    | [
+        table: Table<TData> | undefined,
+        cell:
+          | Cell<TData, TValue>
+          | CellValues<TData, TValue>
+          | CellCoords<TData, TValue>,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+    | [
+        cell:
+          | Cell<TData, TValue>
+          | CellValues<TData, TValue>
+          | CellCoords<TData, TValue>,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+): Selection => {
+  const [
+    table,
+    cellOrCoords,
+    selector = identity as never,
+    isEqual = isShallowEqual,
+  ] = hasTableArg(args) ? args : [undefined, ...args]
+
+  const { columnId, rowId } =
+    "id" in cellOrCoords ?
+      { columnId: cellOrCoords.column.id, rowId: cellOrCoords.row.id }
+    : {
+        columnId:
+          typeof cellOrCoords.column === "string" ?
+            cellOrCoords.column
+          : cellOrCoords.column.id,
+        rowId:
+          typeof cellOrCoords.row === "string" ?
+            cellOrCoords.row
+          : cellOrCoords.row.id,
+      }
+
+  const getSelection = useCallback(
+    (table: Table<TData>) => selector(getCellValues(table, rowId, columnId)),
+    [columnId, rowId, selector],
+  )
+
+  return useTableWithSelector(table, getSelection, isEqual)
+}
+
+const cellHook = useCell
+
+const cellHookʹ =
+  <TData extends RowData, TValue>(
+    ...args:
+      | [
+          table: Table<TData> | undefined,
+          cell:
+            | Cell<TData, TValue>
+            | CellValues<TData, TValue>
+            | CellCoords<TData, TValue>,
+        ]
+      | [
+          cell:
+            | Cell<TData, TValue>
+            | CellValues<TData, TValue>
+            | CellCoords<TData, TValue>,
+        ]
+  ) =>
+  <Selection = CellValues<TData, TValue>>(
+    selector?: Selector<TData, TValue, Selection> | undefined,
+    isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+  ): Selection =>
+    cellHook(...[...args, selector, isEqual])
+
+export { cellHookʹ as useCellʹ }

package/src/hooks/useColumn.ts

@@ -0,0 +1,168 @@
+import { useCallback } from "react"
+
+import type {
+  Column,
+  RequiredKeys,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { identity } from "../lib/identity"
+import { hasTableArg } from "../lib/hasTableArg"
+import { runGetters } from "../lib/runGetters"
+import { isShallowEqual } from "../lib/isShallowEqual"
+import { invariant } from "../lib/invariant"
+
+import type { IsEqual, RunGetters } from "../types"
+
+import { useTableWithSelector } from "./useTableWithSelector"
+
+export interface ColumnValues<
+  TData extends RowData,
+  TValue = unknown,
+> extends RunGetters<Column<TData, TValue>> {}
+
+const columnValuesCache = new WeakMap<
+  RequiredKeys<TableOptionsResolved<any>, "state">,
+  Map<string, ColumnValues<any, any>>
+>()
+
+const columnHandlersCache = new WeakMap<
+  Column<any, any>,
+  {
+    toggleGroupingHandler: ReturnType<
+      Column<any, any>["getToggleGroupingHandler"]
+    >
+    toggleSortingHandler: ReturnType<
+      Column<any, any>["getToggleSortingHandler"]
+    >
+    toggleVisibilityHandler: ReturnType<
+      Column<any, any>["getToggleVisibilityHandler"]
+    >
+  }
+>()
+
+const getColumnValues = <TData extends RowData, TValue = unknown>(
+  table: Table<TData>,
+  columnId: string,
+): ColumnValues<TData, TValue> => {
+  let columnCache = columnValuesCache.get(table.options)
+  if (!columnCache) {
+    columnCache = new Map()
+    columnValuesCache.set(table.options, columnCache)
+  }
+
+  let cached = columnCache.get(columnId)
+
+  if (!cached) {
+    const column = table.getColumn(columnId) as
+      | Column<TData, TValue>
+      | undefined
+
+    invariant(column)
+
+    let cachedHandlers = columnHandlersCache.get(column)
+    if (!cachedHandlers) {
+      cachedHandlers = {
+        toggleGroupingHandler: column.getToggleGroupingHandler(),
+        toggleSortingHandler: column.getToggleSortingHandler(),
+        toggleVisibilityHandler: column.getToggleVisibilityHandler(),
+      }
+      columnHandlersCache.set(column, cachedHandlers)
+    }
+
+    const {
+      toggleGroupingHandler,
+      toggleSortingHandler,
+      toggleVisibilityHandler,
+    } = cachedHandlers
+
+    cached = {
+      ...runGetters(column),
+      toggleGroupingHandler,
+      toggleSortingHandler,
+      toggleVisibilityHandler,
+    }
+
+    columnCache.set(columnId, cached)
+  }
+
+  return cached
+}
+
+type Selector<TData extends RowData, TValue, Selection> = (
+  table: ColumnValues<TData, TValue>,
+) => Selection
+
+export const useColumn = <
+  TData extends RowData,
+  TValue = unknown,
+  Selection = ColumnValues<TData, TValue>,
+>(
+  ...args:
+    | [
+        table: Table<TData> | undefined,
+        column:
+          | Column<TData, TValue>
+          | ColumnValues<TData, TValue>
+          | { id: string }
+          | string,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+    | [
+        column:
+          | Column<TData, TValue>
+          | ColumnValues<TData, TValue>
+          | { id: string }
+          | string,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+): Selection => {
+  const [
+    table,
+    columnOrId,
+    selector = identity as never,
+    isEqual = isShallowEqual,
+  ] = hasTableArg(args) ? args : [undefined, ...args]
+
+  const columnId = typeof columnOrId === "string" ? columnOrId : columnOrId.id
+
+  const getSelection = useCallback(
+    (table: Table<TData>) => selector(getColumnValues(table, columnId)),
+    [columnId, selector],
+  )
+
+  return useTableWithSelector(table, getSelection, isEqual)
+}
+
+const columnHook = useColumn
+
+const columnHookʹ =
+  <TData extends RowData, TValue = unknown>(
+    ...args:
+      | [
+          table: Table<TData> | undefined,
+          column:
+            | Column<TData, TValue>
+            | ColumnValues<TData, TValue>
+            | { id: string }
+            | string,
+        ]
+      | [
+          column:
+            | Column<TData, TValue>
+            | ColumnValues<TData, TValue>
+            | { id: string }
+            | string,
+        ]
+  ) =>
+  <Selection = ColumnValues<TData, TValue>>(
+    selector?: Selector<TData, TValue, Selection> | undefined,
+    isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+  ): Selection =>
+    columnHook(...[...args, selector, isEqual])
+
+export { columnHookʹ as useColumnʹ }

package/src/hooks/useHeader.ts

@@ -0,0 +1,151 @@
+import { useCallback } from "react"
+
+import type {
+  Header,
+  RequiredKeys,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { identity } from "../lib/identity"
+import { hasTableArg } from "../lib/hasTableArg"
+import { runGetters } from "../lib/runGetters"
+import { isShallowEqual } from "../lib/isShallowEqual"
+import { invariant } from "../lib/invariant"
+
+import type { IsEqual, RunGetters } from "../types"
+
+import { useTableWithSelector } from "./useTableWithSelector"
+
+export interface HeaderValues<TData extends RowData, TValue> extends RunGetters<
+  Header<TData, TValue>
+> {}
+
+const headerValuesCache = new WeakMap<
+  RequiredKeys<TableOptionsResolved<any>, "state">,
+  Map<string, HeaderValues<any, any>>
+>()
+
+const headerHandlersCache = new WeakMap<
+  Header<any, any>,
+  {
+    resizeHandler: ReturnType<Header<any, any>["getResizeHandler"]>
+  }
+>()
+
+const getHeaderValues = <TData extends RowData, TValue>(
+  table: Table<TData>,
+  headerId: string,
+): HeaderValues<TData, TValue> => {
+  let headerCache = headerValuesCache.get(table.options)
+  if (!headerCache) {
+    headerCache = new Map()
+    headerValuesCache.set(table.options, headerCache)
+  }
+
+  let cached = headerCache.get(headerId)
+
+  if (!cached) {
+    const header = table.getFlatHeaders().find((h) => h.id === headerId) as
+      | Header<TData, TValue>
+      | undefined
+
+    invariant(header)
+
+    let cachedHandlers = headerHandlersCache.get(header)
+    if (!cachedHandlers) {
+      cachedHandlers = {
+        resizeHandler: header.getResizeHandler(),
+      }
+      headerHandlersCache.set(header, cachedHandlers)
+    }
+
+    const { resizeHandler } = cachedHandlers
+
+    cached = {
+      ...runGetters(header),
+      resizeHandler,
+    }
+
+    headerCache.set(headerId, cached)
+  }
+
+  return cached
+}
+
+type Selector<TData extends RowData, TValue, Selection> = (
+  headerValues: HeaderValues<TData, TValue>,
+) => Selection
+
+export const useHeader = <
+  TData extends RowData,
+  TValue,
+  Selection = HeaderValues<TData, TValue>,
+>(
+  ...args:
+    | [
+        table: Table<TData> | undefined,
+        header:
+          | Header<TData, TValue>
+          | HeaderValues<TData, TValue>
+          | { id: string }
+          | string,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+    | [
+        header:
+          | Header<TData, TValue>
+          | HeaderValues<TData, TValue>
+          | { id: string }
+          | string,
+        selector?: Selector<TData, TValue, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+): Selection => {
+  const [
+    table,
+    headerOrId,
+    selector = identity as never,
+    isEqual = isShallowEqual,
+  ] = hasTableArg(args) ? args : [undefined, ...args]
+
+  const headerId = typeof headerOrId === "string" ? headerOrId : headerOrId.id
+
+  const getSelection = useCallback(
+    (table: Table<TData>) => selector(getHeaderValues(table, headerId)),
+    [headerId, selector],
+  )
+
+  return useTableWithSelector(table, getSelection, isEqual)
+}
+
+const headerHook = useHeader
+
+const headerHookʹ =
+  <TData extends RowData, TValue>(
+    ...args:
+      | [
+          table: Table<TData> | undefined,
+          header:
+            | Header<TData, TValue>
+            | HeaderValues<TData, TValue>
+            | { id: string }
+            | string,
+        ]
+      | [
+          header:
+            | Header<TData, TValue>
+            | HeaderValues<TData, TValue>
+            | { id: string }
+            | string,
+        ]
+  ) =>
+  <Selection = HeaderValues<TData, TValue>>(
+    selector?: Selector<TData, TValue, Selection> | undefined,
+    isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+  ): Selection =>
+    headerHook(...[...args, selector, isEqual])
+
+export { headerHookʹ as useHeaderʹ }

package/src/hooks/useReactTable.ts

@@ -0,0 +1,88 @@
+import { useCallback, useState } from "react"
+
+import {
+  type OnChangeFn,
+  type RowData,
+  type Table,
+  type TableOptions,
+  type TableState,
+  createTable,
+} from "@tanstack/table-core"
+
+import { useShallowMemo } from "../lib/useShallowMemo"
+import { tableRegistry } from "../lib/tableRegistry"
+import { invariant } from "../lib/invariant"
+import { useLayoutEffect } from "../lib/useLayoutEffect"
+
+export const useReactTable = <TData extends RowData>({
+  state,
+  ...options
+}: TableOptions<TData>): Table<TData> => {
+  const memoOptions = useShallowMemo(options)
+  const memoState = useShallowMemo(state)
+
+  // We'll maintain both our internal state and any user-provided
+  // state.
+  const [internalState, setInternalState] = useState<TableState>(null!)
+
+  const onStateChange = useCallback<OnChangeFn<TableState>>(
+    (updater) => {
+      setInternalState(updater)
+      memoOptions.onStateChange?.call(undefined, updater)
+    },
+    [memoOptions.onStateChange],
+  )
+
+  // Create a new table and store it in state
+  const [table] = useState(() => {
+    // Compose in the generic memoOptions to the user memoOptions
+    const resolvedOptions = {
+      state: {}, // Dummy state
+      onStateChange: () => {}, // noop
+      renderFallbackValue: null,
+      ...memoOptions,
+    }
+
+    const table = createTable<TData>(resolvedOptions)
+
+    table.setOptions((prev) => ({
+      ...prev,
+      ...memoOptions,
+      state: {
+        ...table.initialState,
+        ...memoState,
+      },
+      onStateChange,
+    }))
+
+    tableRegistry.set(table, { listeners: new Set() })
+
+    return table
+  })
+
+  if (!internalState) {
+    setInternalState(table.initialState)
+  }
+
+  useLayoutEffect(() => {
+    // Compose the default state above with any user state. This will allow the user
+    // to only control a subset of the state if desired.
+    table.setOptions((prev) => ({
+      ...prev,
+      ...memoOptions,
+      state: {
+        ...internalState,
+        ...memoState,
+      },
+      onStateChange,
+    }))
+
+    const { listeners } = tableRegistry.get(table) ?? {}
+    invariant(listeners)
+    for (const listener of listeners) {
+      listener()
+    }
+  }, [memoOptions, memoState, onStateChange, table, internalState])
+
+  return table
+}

package/src/hooks/useRow.ts

@@ -0,0 +1,132 @@
+import { useCallback } from "react"
+
+import type {
+  RequiredKeys,
+  Row,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { identity } from "../lib/identity"
+import { hasTableArg } from "../lib/hasTableArg"
+import { runGetters } from "../lib/runGetters"
+import { isShallowEqual } from "../lib/isShallowEqual"
+
+import type { IsEqual, RunGetters } from "../types"
+
+import { useTableWithSelector } from "./useTableWithSelector"
+
+export interface RowValues<TData extends RowData> extends RunGetters<
+  Row<TData>
+> {}
+
+const hookRowCache = new WeakMap<
+  RequiredKeys<TableOptionsResolved<any>, "state">,
+  Map<string, RowValues<any>>
+>()
+
+const rowHandlersCache = new WeakMap<
+  Row<any>,
+  {
+    toggleExpandedHandler: ReturnType<Row<any>["getToggleExpandedHandler"]>
+    toggleSelectedHandler: ReturnType<Row<any>["getToggleSelectedHandler"]>
+  }
+>()
+
+const getRowValues = <TData extends RowData>(
+  table: Table<TData>,
+  rowId: string,
+): RowValues<TData> => {
+  let rowCache = hookRowCache.get(table.options)
+  if (!rowCache) {
+    rowCache = new Map()
+    hookRowCache.set(table.options, rowCache)
+  }
+
+  let cached = rowCache.get(rowId)
+
+  if (!cached) {
+    const row = table.getRow(rowId)
+
+    let cachedHandlers = rowHandlersCache.get(row)
+    if (!cachedHandlers) {
+      cachedHandlers = {
+        toggleExpandedHandler: row.getToggleExpandedHandler(),
+        toggleSelectedHandler: row.getToggleSelectedHandler(),
+      }
+      rowHandlersCache.set(row, cachedHandlers)
+    }
+
+    const { toggleExpandedHandler, toggleSelectedHandler } = cachedHandlers
+
+    const { getGroupingValue, getUniqueValues, getValue, ...rest } = row
+
+    cached = {
+      ...runGetters(rest),
+      getGroupingValue,
+      getUniqueValues,
+      getValue,
+      toggleExpandedHandler,
+      toggleSelectedHandler,
+    }
+
+    rowCache.set(rowId, cached)
+  }
+
+  return cached
+}
+
+type Selector<TData extends RowData, Selection> = (
+  rowValues: RowValues<TData>,
+) => Selection
+
+export const useRow = <TData extends RowData, Selection = RowValues<TData>>(
+  ...args:
+    | [
+        table: Table<TData> | undefined,
+        row: Row<TData> | RowValues<TData> | { id: string } | string,
+        selector?: Selector<TData, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+    | [
+        row: Row<TData> | RowValues<TData> | { id: string } | string,
+        selector?: Selector<TData, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+): Selection => {
+  const [
+    table,
+    rowOrId,
+    selector = identity as never,
+    isEqual = isShallowEqual,
+  ] = hasTableArg(args) ? args : [undefined, ...args]
+
+  const rowId = typeof rowOrId === "string" ? rowOrId : rowOrId.id
+
+  const getSelection = useCallback(
+    (table: Table<TData>) => selector(getRowValues(table, rowId)),
+    [rowId, selector],
+  )
+
+  return useTableWithSelector(table, getSelection, isEqual)
+}
+
+const rowHook = useRow
+
+const rowHookʹ =
+  <TData extends RowData>(
+    ...args:
+      | [
+          table: Table<TData> | undefined,
+          row: Row<TData> | RowValues<TData> | { id: string } | string,
+        ]
+      | [row: Row<TData> | RowValues<TData> | { id: string } | string]
+  ) =>
+  <Selection = RowValues<TData>>(
+    selector?: Selector<TData, Selection> | undefined,
+    isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+  ): Selection =>
+    rowHook(...[...args, selector, isEqual])
+
+export { rowHookʹ as useRowʹ }