react-hook-tanstack-table 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,78 @@
+# React Hook TanStack Table
+
+[Rules of React](https://react.dev/reference/rules) respecting bindings for [TanStack Table](https://tanstack.com/table).
+
+Because these hooks respect the Rules of React, they are compatible with the React Compiler, or just memoization in general. They are more performant than `@tanstack/react-table`'s API.
+
+## Usage
+
+Install this package and its peer dependencies:
+
+```sh
+yarn install react-hook-tanstack-table @tanstack/table-core @tanstack/react-table
+```
+
+`react-hook-tanstack-table` is a drop-in replacement for `@tanstack/react-table`.
+
+**Use our `useReactTable` hook to create your table instance.**
+
+You may use our `TableContext` and provide your `table` to it. Our hooks will find it through the context.
+Alternatively, you can provide your `table` instance directly to the hooks.
+
+## How it works
+
+Our `useReactTable` hook creates a `table` instance, and hooks into its `onStateChanged` handler to listen to state changes.
+
+Our other hooks subscribe to these changes using React's [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore), and run the getters on the relevant part of TanStack Table's API. You can then select the parts of the state that you need.
+
+## Hooks
+
+### `useTable`
+
+```typescript
+import { useTable } from 'react-hook-tanstack-table'
+
+const Table = () => {
+	const tableState = useTable((table) => table.state)
+}
+```
+
+### `useColumn`
+
+```typescript
+import { useColumn } from 'react-hook-tanstack-table'
+
+const Column = ({ columnId }: { columnId: string }) => {
+	const canFilter = useColumn(columnId, (column) => column.canFilter)
+}
+```
+
+### `useHeader`
+
+```typescript
+import { useHeader } from 'react-hook-tanstack-table'
+
+const Header = ({ headerId }: { headerId: string }) => {
+	const isPlaceholder = useHeader(headerId, (header) => header.isPlaceholder)
+}
+```
+
+### `useRow`
+
+```typescript
+import { useRow } from 'react-hook-tanstack-table'
+
+const Row = ({ rowId }, { rowId: string }) => {
+	const canSelect = useRow(rowId, (row) => row.canSelect)
+}
+```
+
+### `useCell`
+
+```typescript
+import { useCell } from 'react-hook-tanstack-table'
+
+const Cell = ({ column, rowId }: { columnId: string, rowId: string }) => {
+	const cellValue = useCell({ column: columnId, row: rowId }, (cell) => cell.value)
+}
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-hook-tanstack-table",
   "packageManager": "yarn@4.15.0",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Rules-of-React respecting bindings for TanStack Table.",
   "author": "Xandor Schiefer <me@xandor.co.za>",
   "license": "MIT",

package/src/hooks/useTable.ts

@@ -10,6 +10,7 @@ import type {
 import { identity } from "../lib/identity"
 import { runGetters } from "../lib/runGetters"
 import { isShallowEqual } from "../lib/isShallowEqual"
+import { hasTableArg } from "../lib/hasTableArg"
 
 import type { IsEqual, RunGetters } from "../types"
 
@@ -88,10 +89,23 @@ type Selector<TData extends RowData, Selection> = (
 ) => Selection
 
 export const useTable = <TData extends RowData, Selection = TableValues<TData>>(
-  table?: Table<TData> | undefined,
-  selector: Selector<TData, Selection> = identity as never,
-  isEqual: IsEqual<NoInfer<Selection>> = isShallowEqual,
+  ...args:
+    | [
+        table: Table<TData> | undefined,
+        selector?: Selector<TData, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
+    | [
+        selector?: Selector<TData, Selection> | undefined,
+        isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+      ]
 ): Selection => {
+  const [
+    table,
+    selector = identity as never,
+    isEqual = isShallowEqual,
+  ] = hasTableArg(args) ? args : [undefined, ...args]
+
   const getSelection = useCallback(
     (table: Table<TData>) => selector(getTableValues(table)),
     [selector],
@@ -105,8 +119,8 @@ const tableHook = useTable
 const tableHookʹ =
   <TData extends RowData>(table?: Table<TData> | undefined) =>
   <Selection = TableValues<TData>>(
-    selector: Selector<TData, Selection> = identity as never,
-    isEqual: IsEqual<NoInfer<Selection>> = isShallowEqual,
+    selector?: Selector<TData, Selection> | undefined,
+    isEqual?: IsEqual<NoInfer<Selection>> | undefined
   ): Selection =>
     tableHook(table, selector, isEqual)
 

package/src/lib/hasTableArg.ts

@@ -12,7 +12,7 @@ const isTable = <TData extends RowData>(
 
 export const hasTableArg = <
   TData extends RowData,
-  Rest extends [{}, ...unknown[]],
+  Rest extends [unknown?, ...unknown[]],
 >(
   args: [Table<TData> | undefined, ...Rest] | Rest,
 ): args is [Table<TData> | undefined, ...Rest] =>

package/README.org

@@ -1,29 +0,0 @@
-* React Hook TanStack Table
-
-[[https://react.dev/reference/rules][Rules of React]] respecting bindings for [[https://tanstack.com/table][TanStack Table]].
-
-** Development
-
-- Install dependencies:
-
-#+begin_src shell
-yarn install
-#+end_src
-
-- Run the playground:
-
-#+begin_src shell
-yarn run play
-#+end_src
-
-- Run the unit tests:
-
-#+begin_src shell
-yarn run test
-#+end_src
-
-- Build the library:
-
-#+begin_src shell
-yarn run build
-#+end_src