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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/FlexRender.d.ts

@@ -0,0 +1,46 @@
+import { Cell, CellData, Header, RowData, TableFeatures } from '@tanstack/table-core';
+import { ComponentChild, ComponentType } from 'preact';
+export type Renderable<TProps> = ComponentChild | ComponentType<TProps>;
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+export declare function flexRender<TProps extends object>(Comp: Renderable<TProps> | null, props: TProps): ComponentChild | Element | null;
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example <FlexRender cell={cell} />
+ * @example <FlexRender header={header} />
+ * @example <FlexRender footer={footer} />
+ */
+export type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
+    cell: Cell<TFeatures, TData, TValue>;
+    header?: never;
+    footer?: never;
+} | {
+    header: Header<TFeatures, TData, TValue>;
+    cell?: never;
+    footer?: never;
+} | {
+    footer: Header<TFeatures, TData, TValue>;
+    cell?: never;
+    header?: never;
+};
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example
+ * ```tsx
+ * <FlexRender cell={cell} />
+ * <FlexRender header={header} />
+ * <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())
+ * ```
+ */
+export declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): ComponentChild;

package/dist/esm/FlexRender.js

@@ -0,0 +1,41 @@
+import { jsx } from "preact/jsx-runtime";
+function isPreactComponent(component) {
+  return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
+}
+function isClassComponent(component) {
+  return typeof component === "function" && (() => {
+    const proto = Object.getPrototypeOf(component);
+    return proto.prototype && proto.prototype.isPreactComponent;
+  })();
+}
+function isExoticComponent(component) {
+  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["preact.memo", "preact.forward_ref"].includes(
+    component.$$typeof.description
+  );
+}
+function flexRender(Comp, props) {
+  return !Comp ? null : isPreactComponent(Comp) ? /* @__PURE__ */ jsx(Comp, { ...props }) : Comp;
+}
+function FlexRender(props) {
+  if ("cell" in props && props.cell) {
+    return flexRender(props.cell.column.columnDef.cell, props.cell.getContext());
+  }
+  if ("header" in props && props.header) {
+    return flexRender(
+      props.header.column.columnDef.header,
+      props.header.getContext()
+    );
+  }
+  if ("footer" in props && props.footer) {
+    return flexRender(
+      props.footer.column.columnDef.footer,
+      props.footer.getContext()
+    );
+  }
+  return null;
+}
+export {
+  FlexRender,
+  flexRender
+};
+//# sourceMappingURL=FlexRender.js.map

package/dist/esm/FlexRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexRender.js","sources":["../../src/FlexRender.tsx"],"sourcesContent":["import type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\nimport type { ComponentChild, ComponentType } from 'preact'\n\nexport type Renderable<TProps> = ComponentChild | ComponentType<TProps>\n\nfunction isPreactComponent<TProps>(\n  component: unknown,\n): component is ComponentType<TProps> {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isPreactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['preact.memo', 'preact.forward_ref'].includes(\n      component.$$typeof.description,\n    )\n  )\n}\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps> | null,\n  props: TProps,\n): ComponentChild | Element | null {\n  return !Comp ? null : isPreactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example <FlexRender cell={cell} />\n * @example <FlexRender header={header} />\n * @example <FlexRender footer={footer} />\n */\nexport type FlexRenderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> =\n  | { cell: Cell<TFeatures, TData, TValue>; header?: never; footer?: never }\n  | {\n      header: Header<TFeatures, TData, TValue>\n      cell?: never\n      footer?: never\n    }\n  | {\n      footer: Header<TFeatures, TData, TValue>\n      cell?: never\n      header?: never\n    }\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example\n * ```tsx\n * <FlexRender cell={cell} />\n * <FlexRender header={header} />\n * <FlexRender footer={footer} />\n * ```\n *\n * This replaces calling `flexRender` directly like this:\n * ```tsx\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n * flexRender(header.column.columnDef.header, header.getContext())\n * flexRender(footer.column.columnDef.footer, footer.getContext())\n * ```\n */\nexport function FlexRender<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(props: FlexRenderProps<TFeatures, TData, TValue>) {\n  if ('cell' in props && props.cell) {\n    return flexRender(props.cell.column.columnDef.cell, props.cell.getContext())\n  }\n  if ('header' in props && props.header) {\n    return flexRender(\n      props.header.column.columnDef.header,\n      props.header.getContext(),\n    )\n  }\n  if ('footer' in props && props.footer) {\n    return flexRender(\n      props.footer.column.columnDef.footer,\n      props.footer.getContext(),\n    )\n  }\n  return null\n}\n"],"names":[],"mappings":";AAWA,SAAS,kBACP,WACoC;AACpC,SACE,iBAAiB,SAAS,KAC1B,OAAO,cAAc,cACrB,kBAAkB,SAAS;AAE/B;AAEA,SAAS,iBAAiB,WAAgB;AACxC,SACE,OAAO,cAAc,eACpB,MAAM;AACL,UAAM,QAAQ,OAAO,eAAe,SAAS;AAC7C,WAAO,MAAM,aAAa,MAAM,UAAU;AAAA,EAC5C,GAAA;AAEJ;AAEA,SAAS,kBAAkB,WAAgB;AACzC,SACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,eAAe,oBAAoB,EAAE;AAAA,IACpC,UAAU,SAAS;AAAA,EAAA;AAGzB;AAMO,SAAS,WACd,MACA,OACiC;AACjC,SAAO,CAAC,OAAO,OAAO,kBAA0B,IAAI,IAClD,oBAAC,MAAA,EAAM,GAAG,MAAA,CAAO,IAEjB;AAEJ;AA2CO,SAAS,WAId,OAAkD;AAClD,MAAI,UAAU,SAAS,MAAM,MAAM;AACjC,WAAO,WAAW,MAAM,KAAK,OAAO,UAAU,MAAM,MAAM,KAAK,YAAY;AAAA,EAC7E;AACA,MAAI,YAAY,SAAS,MAAM,QAAQ;AACrC,WAAO;AAAA,MACL,MAAM,OAAO,OAAO,UAAU;AAAA,MAC9B,MAAM,OAAO,WAAA;AAAA,IAAW;AAAA,EAE5B;AACA,MAAI,YAAY,SAAS,MAAM,QAAQ;AACrC,WAAO;AAAA,MACL,MAAM,OAAO,OAAO,UAAU;AAAA,MAC9B,MAAM,OAAO,WAAA;AAAA,IAAW;AAAA,EAE5B;AACA,SAAO;AACT;"}

package/dist/esm/Subscribe.d.ts

@@ -0,0 +1,44 @@
+import { NoInfer, RowData, Table, TableFeatures, TableState } from '@tanstack/table-core';
+import { ComponentChildren } from 'preact';
+export type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = {
+    /**
+     * The table instance to subscribe to. Required when using as a standalone component.
+     * Not needed when using as `table.Subscribe`.
+     */
+    table: Table<TFeatures, TData>;
+    /**
+     * A selector function that selects the part of the table state to subscribe to.
+     * This allows for fine-grained reactivity by only re-rendering when the selected state changes.
+     */
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
+    /**
+     * The children to render. Can be a function that receives the selected state, or a Preact node.
+     */
+    children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
+};
+/**
+ * A Preact 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
+ * ```tsx
+ * // As a standalone component
+ * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // As table.Subscribe (table instance method)
+ * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </table.Subscribe>
+ * ```
+ */
+export declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren;

package/dist/esm/Subscribe.js

@@ -0,0 +1,9 @@
+import { useStore } from "@tanstack/preact-store";
+function Subscribe(props) {
+  const selected = useStore(props.table.store, props.selector);
+  return typeof props.children === "function" ? props.children(selected) : props.children;
+}
+export {
+  Subscribe
+};
+//# sourceMappingURL=Subscribe.js.map

package/dist/esm/Subscribe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subscribe.js","sources":["../../src/Subscribe.ts"],"sourcesContent":["import { useStore } from '@tanstack/preact-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = {\n  /**\n   * The table instance to subscribe to. Required when using as a standalone component.\n   * Not needed when using as `table.Subscribe`.\n   */\n  table: Table<TFeatures, TData>\n  /**\n   * A selector function that selects the part of the table state to subscribe to.\n   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.\n   */\n  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n  /**\n   * The children to render. Can be a function that receives the selected state, or a Preact node.\n   */\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * A Preact component that allows you to subscribe to the table state.\n *\n * This is useful for opting into state re-renders for specific parts of the table state.\n *\n * @example\n * ```tsx\n * // As a standalone component\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {\n  const selected = useStore(props.table.store, props.selector)\n\n  return typeof props.children === 'function'\n    ? props.children(selected)\n    : props.children\n}\n"],"names":[],"mappings":";AAwDO,SAAS,UAId,OAAuE;AACvE,QAAM,WAAW,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE3D,SAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,QAAQ,IACvB,MAAM;AACZ;"}

package/dist/esm/createTableHook.d.ts

@@ -0,0 +1,349 @@
+import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
+import { ComponentChildren, ComponentType } from 'preact';
+import { PreactTable } from './useTable.js';
+/**
+ * Enhanced CellContext with pre-bound cell components.
+ * The `cell` property includes the registered cellComponents.
+ */
+export type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
+    cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: () => ComponentChildren;
+    };
+    column: Column<TFeatures, TData, TValue>;
+    getValue: CellContext<TFeatures, TData, TValue>['getValue'];
+    renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
+    row: Row<TFeatures, TData>;
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Enhanced HeaderContext with pre-bound header components.
+ * The `header` property includes the registered headerComponents.
+ */
+export type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    column: Column<TFeatures, TData, TValue>;
+    header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: () => ComponentChildren;
+    };
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Template type for column definitions that can be a string or a function.
+ */
+type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
+/**
+ * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ */
+type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<IdentifiedColumnDef<TFeatures, TData, TValue>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+};
+/**
+ * Enhanced display column definition with pre-bound components.
+ */
+type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<DisplayColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+};
+/**
+ * Enhanced group column definition with pre-bound components.
+ */
+type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<GroupColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer' | 'columns'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
+};
+/**
+ * Enhanced column helper with pre-bound components in cell/header/footer contexts.
+ * This enables TypeScript to know about the registered components when defining columns.
+ */
+export type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    /**
+     * Creates a data column definition with an accessor key or function.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
+        id: string;
+    } : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
+    /**
+     * Wraps an array of column definitions to preserve each column's individual TValue type.
+     */
+    columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
+    /**
+     * Creates a display column definition for non-data columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
+    /**
+     * Creates a group column definition with nested child columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
+};
+/**
+ * Options for creating a table hook with pre-bound components and default table options.
+ * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.
+ */
+export type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
+    /**
+     * Table-level components that need access to the table instance.
+     * These are available directly on the table object returned by useAppTable.
+     * Use `useTableContext()` inside these components.
+     * @example { PaginationControls, GlobalFilter, RowCount }
+     */
+    tableComponents?: TTableComponents;
+    /**
+     * Cell-level components that need access to the cell instance.
+     * These are available on the cell object passed to AppCell's children.
+     * Use `useCellContext()` inside these components.
+     * @example { TextCell, NumberCell, DateCell, CurrencyCell }
+     */
+    cellComponents?: TCellComponents;
+    /**
+     * Header-level components that need access to the header instance.
+     * These are available on the header object passed to AppHeader/AppFooter's children.
+     * Use `useHeaderContext()` inside these components.
+     * @example { SortIndicator, ColumnFilter, ResizeHandle }
+     */
+    headerComponents?: THeaderComponents;
+};
+/**
+ * Props for AppTable component - without selector
+ */
+export interface AppTablePropsWithoutSelector {
+    children: ComponentChildren;
+    selector?: never;
+}
+/**
+ * Props for AppTable component - with selector
+ */
+export interface AppTablePropsWithSelector<TFeatures extends TableFeatures, TSelected> {
+    children: (state: TSelected) => ComponentChildren;
+    selector: (state: TableState<TFeatures>) => TSelected;
+}
+/**
+ * Props for AppCell component - without selector
+ */
+export interface AppCellPropsWithoutSelector<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> {
+    cell: Cell<TFeatures, TData, TValue>;
+    children: (cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: () => ComponentChildren;
+    }) => ComponentChildren;
+    selector?: never;
+}
+/**
+ * Props for AppCell component - with selector
+ */
+export interface AppCellPropsWithSelector<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, TSelected> {
+    cell: Cell<TFeatures, TData, TValue>;
+    children: (cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: () => ComponentChildren;
+    }, state: TSelected) => ComponentChildren;
+    selector: (state: TableState<TFeatures>) => TSelected;
+}
+/**
+ * Props for AppHeader/AppFooter component - without selector
+ */
+export interface AppHeaderPropsWithoutSelector<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> {
+    header: Header<TFeatures, TData, TValue>;
+    children: (header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: () => ComponentChildren;
+    }) => ComponentChildren;
+    selector?: never;
+}
+/**
+ * Props for AppHeader/AppFooter component - with selector
+ */
+export interface AppHeaderPropsWithSelector<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>, TSelected> {
+    header: Header<TFeatures, TData, TValue>;
+    children: (header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: () => ComponentChildren;
+    }, state: TSelected) => ComponentChildren;
+    selector: (state: TableState<TFeatures>) => TSelected;
+}
+/**
+ * Component type for AppCell - wraps a cell and provides cell context with optional Subscribe
+ */
+export interface AppCellComponent<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>> {
+    <TValue extends CellData = CellData>(props: AppCellPropsWithoutSelector<TFeatures, TData, TValue, TCellComponents>): ComponentChildren;
+    <TValue extends CellData = CellData, TSelected = unknown>(props: AppCellPropsWithSelector<TFeatures, TData, TValue, TCellComponents, TSelected>): ComponentChildren;
+}
+/**
+ * Component type for AppHeader/AppFooter - wraps a header and provides header context with optional Subscribe
+ */
+export interface AppHeaderComponent<TFeatures extends TableFeatures, TData extends RowData, THeaderComponents extends Record<string, ComponentType<any>>> {
+    <TValue extends CellData = CellData>(props: AppHeaderPropsWithoutSelector<TFeatures, TData, TValue, THeaderComponents>): ComponentChildren;
+    <TValue extends CellData = CellData, TSelected = unknown>(props: AppHeaderPropsWithSelector<TFeatures, TData, TValue, THeaderComponents, TSelected>): ComponentChildren;
+}
+/**
+ * Component type for AppTable - root wrapper with optional Subscribe
+ */
+export interface AppTableComponent<TFeatures extends TableFeatures> {
+    (props: AppTablePropsWithoutSelector): ComponentChildren;
+    <TSelected>(props: AppTablePropsWithSelector<TFeatures, TSelected>): ComponentChildren;
+}
+/**
+ * Extended table API returned by useAppTable with all App wrapper components
+ */
+export type AppPreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = PreactTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & {
+    /**
+     * Root wrapper component that provides table context with optional Subscribe.
+     * @example
+     * ```tsx
+     * // Without selector - children is ComponentChildren
+     * <table.AppTable>
+     *   <table>...</table>
+     * </table.AppTable>
+     *
+     * // With selector - children receives selected state
+     * <table.AppTable selector={(s) => s.pagination}>
+     *   {(pagination) => <div>Page {pagination.pageIndex}</div>}
+     * </table.AppTable>
+     * ```
+     */
+    AppTable: AppTableComponent<TFeatures>;
+    /**
+     * Wraps a cell and provides cell context with pre-bound cellComponents.
+     * Optionally accepts a selector for Subscribe functionality.
+     * @example
+     * ```tsx
+     * // Without selector
+     * <table.AppCell cell={cell}>
+     *   {(c) => <td><c.TextCell /></td>}
+     * </table.AppCell>
+     *
+     * // With selector - children receives cell and selected state
+     * <table.AppCell cell={cell} selector={(s) => s.columnFilters}>
+     *   {(c, filters) => <td>{filters.length}</td>}
+     * </table.AppCell>
+     * ```
+     */
+    AppCell: AppCellComponent<TFeatures, TData, NoInfer<TCellComponents>>;
+    /**
+     * Wraps a header and provides header context with pre-bound headerComponents.
+     * Optionally accepts a selector for Subscribe functionality.
+     * @example
+     * ```tsx
+     * // Without selector
+     * <table.AppHeader header={header}>
+     *   {(h) => <th><h.SortIndicator /></th>}
+     * </table.AppHeader>
+     *
+     * // With selector
+     * <table.AppHeader header={header} selector={(s) => s.sorting}>
+     *   {(h, sorting) => <th>{sorting.length} sorted</th>}
+     * </table.AppHeader>
+     * ```
+     */
+    AppHeader: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>;
+    /**
+     * Wraps a footer and provides header context with pre-bound headerComponents.
+     * Optionally accepts a selector for Subscribe functionality.
+     * @example
+     * ```tsx
+     * <table.AppFooter header={footer}>
+     *   {(f) => <td><table.FlexRender footer={footer} /></td>}
+     * </table.AppFooter>
+     * ```
+     */
+    AppFooter: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>;
+};
+/**
+ * Creates a custom table hook with pre-bound components for composition.
+ *
+ * This is the table equivalent of TanStack Form's `createFormHook`. It allows you to:
+ * - Define features, row models, and default options once, shared across all tables
+ * - Register reusable table, cell, and header components
+ * - Access table/cell/header instances via context in those components
+ * - Get a `useAppTable` hook that returns an extended table with App wrapper components
+ * - Get a `createAppColumnHelper` function pre-bound to your features
+ *
+ * @example
+ * ```tsx
+ * // hooks/table.ts
+ * export const {
+ *   useAppTable,
+ *   createAppColumnHelper,
+ *   useTableContext,
+ *   useCellContext,
+ *   useHeaderContext,
+ * } = createTableHook({
+ *   _features: tableFeatures({
+ *     rowPaginationFeature,
+ *     rowSortingFeature,
+ *     columnFilteringFeature,
+ *   }),
+ *   _rowModels: {
+ *     paginatedRowModel: createPaginatedRowModel(),
+ *     sortedRowModel: createSortedRowModel(sortFns),
+ *     filteredRowModel: createFilteredRowModel(filterFns),
+ *   },
+ *   tableComponents: { PaginationControls, RowCount },
+ *   cellComponents: { TextCell, NumberCell },
+ *   headerComponents: { SortIndicator, ColumnFilter },
+ * })
+ *
+ * // Create column helper with TFeatures already bound
+ * const columnHelper = createAppColumnHelper<Person>()
+ *
+ * // components/table-components.tsx
+ * function PaginationControls() {
+ *   const table = useTableContext() // TFeatures already known!
+ *   return <table.Subscribe selector={(s) => s.pagination}>...</table.Subscribe>
+ * }
+ *
+ * // features/users.tsx
+ * function UsersTable({ data }: { data: Person[] }) {
+ *   const table = useAppTable({
+ *     columns,
+ *     data, // TData inferred from Person[]
+ *   })
+ *
+ *   return (
+ *     <table.AppTable>
+ *       <table>
+ *         <thead>
+ *           {table.getHeaderGroups().map(headerGroup => (
+ *             <tr key={headerGroup.id}>
+ *               {headerGroup.headers.map(h => (
+ *                 <table.AppHeader header={h} key={h.id}>
+ *                   {(header) => (
+ *                     <th>
+ *                       <table.FlexRender header={h} />
+ *                       <header.SortIndicator />
+ *                     </th>
+ *                   )}
+ *                 </table.AppHeader>
+ *               ))}
+ *             </tr>
+ *           ))}
+ *         </thead>
+ *         <tbody>
+ *           {table.getRowModel().rows.map(row => (
+ *             <tr key={row.id}>
+ *               {row.getAllCells().map(c => (
+ *                 <table.AppCell cell={c} key={c.id}>
+ *                   {(cell) => <td><cell.TextCell /></td>}
+ *                 </table.AppCell>
+ *               ))}
+ *             </tr>
+ *           ))}
+ *         </tbody>
+ *       </table>
+ *       <table.PaginationControls />
+ *     </table.AppTable>
+ *   )
+ * }
+ * ```
+ */
+export declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
+    appFeatures: TFeatures;
+    createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+    useAppTable: <TData extends RowData, TSelected = {}>(tableOptions: Omit<TableOptions<TFeatures, TData>, "_features" | "_rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppPreactTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    useTableContext: <TData extends RowData = RowData>() => PreactTable<TFeatures, TData>;
+    useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
+    useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
+};
+export {};

package/dist/esm/createTableHook.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx } from "preact/jsx-runtime";
+import { createContext } from "preact";
+import { useContext, useMemo } from "preact/hooks";
+import { createColumnHelper } from "@tanstack/table-core";
+import { useTable } from "./useTable.js";
+import { FlexRender } from "./FlexRender.js";
+function createTableHook({
+  tableComponents,
+  cellComponents,
+  headerComponents,
+  ...defaultTableOptions
+}) {
+  const TableContext = createContext(
+    null
+  );
+  const CellContext = createContext(null);
+  const HeaderContext = createContext(
+    null
+  );
+  function createAppColumnHelper() {
+    return createColumnHelper();
+  }
+  function useTableContext() {
+    const table = useContext(TableContext);
+    if (!table) {
+      throw new Error(
+        "`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`."
+      );
+    }
+    return table;
+  }
+  function useCellContext() {
+    const cell = useContext(CellContext);
+    if (!cell) {
+      throw new Error(
+        "`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`."
+      );
+    }
+    return cell;
+  }
+  function useHeaderContext() {
+    const header = useContext(HeaderContext);
+    if (!header) {
+      throw new Error(
+        "`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component."
+      );
+    }
+    return header;
+  }
+  function CellFlexRender() {
+    const cell = useCellContext();
+    return /* @__PURE__ */ jsx(FlexRender, { cell });
+  }
+  function HeaderFlexRender() {
+    const header = useHeaderContext();
+    return /* @__PURE__ */ jsx(FlexRender, { header });
+  }
+  function FooterFlexRender() {
+    const header = useHeaderContext();
+    return /* @__PURE__ */ jsx(FlexRender, { footer: header });
+  }
+  function useAppTable(tableOptions, selector) {
+    const table = useTable(
+      { ...defaultTableOptions, ...tableOptions },
+      selector
+    );
+    const AppTable = useMemo(() => {
+      function AppTableImpl(props) {
+        const { children, selector: appTableSelector } = props;
+        return /* @__PURE__ */ jsx(TableContext.Provider, { value: table, children: appTableSelector ? /* @__PURE__ */ jsx(table.Subscribe, { selector: appTableSelector, children: (state) => children(
+          state
+        ) }) : children });
+      }
+      return AppTableImpl;
+    }, [table]);
+    const AppCell = useMemo(() => {
+      function AppCellImpl(props) {
+        const { cell, children, selector: appCellSelector } = props;
+        const extendedCell = Object.assign(cell, {
+          FlexRender: CellFlexRender,
+          ...cellComponents
+        });
+        return /* @__PURE__ */ jsx(CellContext.Provider, { value: cell, children: appCellSelector ? /* @__PURE__ */ jsx(table.Subscribe, { selector: appCellSelector, children: (state) => children(extendedCell, state) }) : children(extendedCell) });
+      }
+      return AppCellImpl;
+    }, [table]);
+    const AppHeader = useMemo(() => {
+      function AppHeaderImpl(props) {
+        const { header, children, selector: appHeaderSelector } = props;
+        const extendedHeader = Object.assign(header, {
+          FlexRender: HeaderFlexRender,
+          ...headerComponents
+        });
+        return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: header, children: appHeaderSelector ? /* @__PURE__ */ jsx(table.Subscribe, { selector: appHeaderSelector, children: (state) => children(extendedHeader, state) }) : children(extendedHeader) });
+      }
+      return AppHeaderImpl;
+    }, [table]);
+    const AppFooter = useMemo(() => {
+      function AppFooterImpl(props) {
+        const { header, children, selector: appFooterSelector } = props;
+        const extendedHeader = Object.assign(header, {
+          FlexRender: FooterFlexRender,
+          ...headerComponents
+        });
+        return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: header, children: appFooterSelector ? /* @__PURE__ */ jsx(table.Subscribe, { selector: appFooterSelector, children: (state) => children(extendedHeader, state) }) : children(extendedHeader) });
+      }
+      return AppFooterImpl;
+    }, [table]);
+    const extendedTable = useMemo(() => {
+      return Object.assign(table, {
+        AppTable,
+        AppCell,
+        AppHeader,
+        AppFooter,
+        ...tableComponents
+      });
+    }, [table, AppTable, AppCell, AppHeader, AppFooter]);
+    return extendedTable;
+  }
+  return {
+    appFeatures: defaultTableOptions._features,
+    createAppColumnHelper,
+    useAppTable,
+    useTableContext,
+    useCellContext,
+    useHeaderContext
+  };
+}
+export {
+  createTableHook
+};
+//# sourceMappingURL=createTableHook.js.map