@tanstack/preact-table 0.0.1 → 9.0.0-alpha.14

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from '@tanstack/table-core'
+
+export * from './FlexRender'
+export * from './Subscribe'
+export * from './createTableHook'
+export * from './useTable'

package/src/useTable.ts

@@ -0,0 +1,132 @@
+import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks'
+import { constructTable } from '@tanstack/table-core'
+import { useStore } from '@tanstack/preact-store'
+import { FlexRender } from './FlexRender'
+import { Subscribe } from './Subscribe'
+import type {
+  CellData,
+  NoInfer,
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+import type { ComponentChildren } from 'preact'
+import type { FlexRenderProps } from './FlexRender'
+import type { SubscribeProps } from './Subscribe'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export type PreactTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+> = Table<TFeatures, TData> & {
+  /**
+   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.
+   *
+   * This is useful for opting into state re-renders for specific parts of the table state.
+   *
+   * @example
+   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax
+   *     <tr key={row.id}>
+   *       // render the row
+   *     </tr>
+   *   )}
+   * </table.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
+    children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+  }) => ComponentChildren
+  /**
+   * A Preact component that renders headers, cells, or footers with custom markup.
+   * Use this utility component instead of manually calling flexRender.
+   *
+   * @example
+   * ```tsx
+   * <table.FlexRender cell={cell} />
+   * <table.FlexRender header={header} />
+   * <table.FlexRender footer={footer} />
+   * ```
+   *
+   * This replaces calling `flexRender` directly like this:
+   * ```tsx
+   * flexRender(cell.column.columnDef.cell, cell.getContext())
+   * flexRender(header.column.columnDef.header, header.getContext())
+   * flexRender(footer.column.columnDef.footer, footer.getContext())
+   * ```
+   */
+  FlexRender: <TValue extends CellData = CellData>(
+    props: FlexRenderProps<TFeatures, TData, TValue>,
+  ) => ComponentChildren
+  /**
+   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
+   *
+   * @example
+   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
+   *
+   * console.log(table.state.globalFilter)
+   */
+  readonly state: Readonly<TSelected>
+}
+
+export function useTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+  selector: (state: TableState<TFeatures>) => TSelected = () =>
+    ({}) as TSelected,
+): PreactTable<TFeatures, TData, TSelected> {
+  const [table] = useState(() => {
+    const tableInstance = constructTable(tableOptions) as PreactTable<
+      TFeatures,
+      TData,
+      TSelected
+    >
+
+    tableInstance.Subscribe = function SubscribeBound<TSelected>(
+      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,
+    ) {
+      return Subscribe({ ...props, table: tableInstance })
+    }
+
+    tableInstance.FlexRender = FlexRender
+
+    return tableInstance
+  })
+
+  // sync table options on every render
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions,
+  }))
+
+  useIsomorphicLayoutEffect(() => {
+    // prevent race condition between table.setOptions and table.baseStore.setState
+    queueMicrotask(() => {
+      table.baseStore.setState((prev) => ({
+        ...prev,
+      }))
+    })
+  }, [
+    table.options.columns, // re-render when columns change
+    table.options.data, // re-render when data changes
+    table.options.state, // sync preact state to the table store
+  ])
+
+  const state = useStore(table.store, selector)
+
+  return useMemo(
+    () => ({
+      ...table,
+      state,
+    }),
+    [state, table],
+  )
+}

package/README.md

@@ -1,45 +0,0 @@
-# @tanstack/preact-table
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/preact-table`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**