@tanstack/react-table 9.0.0-alpha.0 → 9.0.0-alpha.11

package/dist/esm/createTableHook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTableHook.js","sources":["../../src/createTableHook.tsx"],"sourcesContent":["'use client'\n/* eslint-disable @eslint-react/no-context-provider */\nimport React, { createContext, use, useMemo } from 'react'\nimport { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useTable } from './useTable'\nimport { FlexRender } from './FlexRender'\nimport type {\n  AccessorFn,\n  AccessorFnColumnDef,\n  AccessorKeyColumnDef,\n  Cell,\n  CellContext,\n  CellData,\n  Column,\n  ColumnDef,\n  DeepKeys,\n  DeepValue,\n  DisplayColumnDef,\n  GroupColumnDef,\n  Header,\n  IdentifiedColumnDef,\n  NoInfer,\n  Row,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentType, ReactNode } from 'react'\nimport type { ReactTable } from './useTable'\n\n// =============================================================================\n// Enhanced Context Types with Pre-bound Components\n// =============================================================================\n\n/**\n * Enhanced CellContext with pre-bound cell components.\n * The `cell` property includes the registered cellComponents.\n */\nexport type AppCellContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n  cell: Cell<TFeatures, TData, TValue> &\n    TCellComponents & { FlexRender: () => ReactNode }\n  column: Column<TFeatures, TData, TValue>\n  getValue: CellContext<TFeatures, TData, TValue>['getValue']\n  renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n  row: Row<TFeatures, TData>\n  table: Table<TFeatures, TData>\n}\n\n/**\n * Enhanced HeaderContext with pre-bound header components.\n * The `header` property includes the registered headerComponents.\n */\nexport type AppHeaderContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n  column: Column<TFeatures, TData, TValue>\n  header: Header<TFeatures, TData, TValue> &\n    THeaderComponents & { FlexRender: () => ReactNode }\n  table: Table<TFeatures, TData>\n}\n\n// =============================================================================\n// Enhanced Column Definition Types\n// =============================================================================\n\n/**\n * Template type for column definitions that can be a string or a function.\n */\ntype AppColumnDefTemplate<TProps extends object> =\n  | string\n  | ((props: TProps) => any)\n\n/**\n * Enhanced column definition base with pre-bound components in cell/header/footer contexts.\n */\ntype AppColumnDefBase<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  IdentifiedColumnDef<TFeatures, TData, TValue>,\n  'cell' | 'header' | 'footer'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, TValue, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n  >\n}\n\n/**\n * Enhanced display column definition with pre-bound components.\n */\ntype AppDisplayColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  DisplayColumnDef<TFeatures, TData, unknown>,\n  'cell' | 'header' | 'footer'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, unknown, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n}\n\n/**\n * Enhanced group column definition with pre-bound components.\n */\ntype AppGroupColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  GroupColumnDef<TFeatures, TData, unknown>,\n  'cell' | 'header' | 'footer' | 'columns'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, unknown, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\n// =============================================================================\n// Enhanced Column Helper Type\n// =============================================================================\n\n/**\n * Enhanced column helper with pre-bound components in cell/header/footer contexts.\n * This enables TypeScript to know about the registered components when defining columns.\n */\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n  /**\n   * Creates a data column definition with an accessor key or function.\n   * The cell, header, and footer contexts include pre-bound components.\n   */\n  accessor: <\n    TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n    TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n      ? TReturn\n      : TAccessor extends DeepKeys<TData>\n        ? DeepValue<TData, TAccessor>\n        : never,\n  >(\n    accessor: TAccessor,\n    column: TAccessor extends AccessorFn<TData>\n      ? AppColumnDefBase<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents,\n          THeaderComponents\n        > & { id: string }\n      : AppColumnDefBase<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents,\n          THeaderComponents\n        >,\n  ) => TAccessor extends AccessorFn<TData>\n    ? AccessorFnColumnDef<TFeatures, TData, TValue>\n    : AccessorKeyColumnDef<TFeatures, TData, TValue>\n\n  /**\n   * Wraps an array of column definitions to preserve each column's individual TValue type.\n   */\n  columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n    columns: [...TColumns],\n  ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n\n  /**\n   * Creates a display column definition for non-data columns.\n   * The cell, header, and footer contexts include pre-bound components.\n   */\n  display: (\n    column: AppDisplayColumnDef<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >,\n  ) => DisplayColumnDef<TFeatures, TData, unknown>\n\n  /**\n   * Creates a group column definition with nested child columns.\n   * The cell, header, and footer contexts include pre-bound components.\n   */\n  group: (\n    column: AppGroupColumnDef<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >,\n  ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\n// =============================================================================\n// CreateTableHook Options and Props\n// =============================================================================\n\n/**\n * Options for creating a table hook with pre-bound components and default table options.\n * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.\n */\nexport type CreateTableHookOptions<\n  TFeatures extends TableFeatures,\n  TTableComponents extends Record<string, ComponentType<any>>,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  TableOptions<TFeatures, any>,\n  'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n  /**\n   * Table-level components that need access to the table instance.\n   * These are available directly on the table object returned by useAppTable.\n   * Use `useTableContext()` inside these components.\n   * @example { PaginationControls, GlobalFilter, RowCount }\n   */\n  tableComponents?: TTableComponents\n  /**\n   * Cell-level components that need access to the cell instance.\n   * These are available on the cell object passed to AppCell's children.\n   * Use `useCellContext()` inside these components.\n   * @example { TextCell, NumberCell, DateCell, CurrencyCell }\n   */\n  cellComponents?: TCellComponents\n  /**\n   * Header-level components that need access to the header instance.\n   * These are available on the header object passed to AppHeader/AppFooter's children.\n   * Use `useHeaderContext()` inside these components.\n   * @example { SortIndicator, ColumnFilter, ResizeHandle }\n   */\n  headerComponents?: THeaderComponents\n}\n\n/**\n * Props for AppTable component - without selector\n */\nexport interface AppTablePropsWithoutSelector {\n  children: ReactNode\n  selector?: never\n}\n\n/**\n * Props for AppTable component - with selector\n */\nexport interface AppTablePropsWithSelector<\n  TFeatures extends TableFeatures,\n  TSelected,\n> {\n  children: (state: TSelected) => ReactNode\n  selector: (state: TableState<TFeatures>) => TSelected\n}\n\n/**\n * Props for AppCell component - without selector\n */\nexport interface AppCellPropsWithoutSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n> {\n  cell: Cell<TFeatures, TData, TValue>\n  children: (\n    cell: Cell<TFeatures, TData, TValue> &\n      TCellComponents & { FlexRender: () => ReactNode },\n  ) => ReactNode\n  selector?: never\n}\n\n/**\n * Props for AppCell component - with selector\n */\nexport interface AppCellPropsWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  TSelected,\n> {\n  cell: Cell<TFeatures, TData, TValue>\n  children: (\n    cell: Cell<TFeatures, TData, TValue> &\n      TCellComponents & { FlexRender: () => ReactNode },\n    state: TSelected,\n  ) => ReactNode\n  selector: (state: TableState<TFeatures>) => TSelected\n}\n\n/**\n * Props for AppHeader/AppFooter component - without selector\n */\nexport interface AppHeaderPropsWithoutSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> {\n  header: Header<TFeatures, TData, TValue>\n  children: (\n    header: Header<TFeatures, TData, TValue> &\n      THeaderComponents & { FlexRender: () => ReactNode },\n  ) => ReactNode\n  selector?: never\n}\n\n/**\n * Props for AppHeader/AppFooter component - with selector\n */\nexport interface AppHeaderPropsWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n  TSelected,\n> {\n  header: Header<TFeatures, TData, TValue>\n  children: (\n    header: Header<TFeatures, TData, TValue> &\n      THeaderComponents & { FlexRender: () => ReactNode },\n    state: TSelected,\n  ) => ReactNode\n  selector: (state: TableState<TFeatures>) => TSelected\n}\n\n/**\n * Component type for AppCell - wraps a cell and provides cell context with optional Subscribe\n */\nexport interface AppCellComponent<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n> {\n  <TValue extends CellData = CellData>(\n    props: AppCellPropsWithoutSelector<\n      TFeatures,\n      TData,\n      TValue,\n      TCellComponents\n    >,\n  ): ReactNode\n  <TValue extends CellData = CellData, TSelected = unknown>(\n    props: AppCellPropsWithSelector<\n      TFeatures,\n      TData,\n      TValue,\n      TCellComponents,\n      TSelected\n    >,\n  ): ReactNode\n}\n\n/**\n * Component type for AppHeader/AppFooter - wraps a header and provides header context with optional Subscribe\n */\nexport interface AppHeaderComponent<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> {\n  <TValue extends CellData = CellData>(\n    props: AppHeaderPropsWithoutSelector<\n      TFeatures,\n      TData,\n      TValue,\n      THeaderComponents\n    >,\n  ): ReactNode\n  <TValue extends CellData = CellData, TSelected = unknown>(\n    props: AppHeaderPropsWithSelector<\n      TFeatures,\n      TData,\n      TValue,\n      THeaderComponents,\n      TSelected\n    >,\n  ): ReactNode\n}\n\n/**\n * Component type for AppTable - root wrapper with optional Subscribe\n */\nexport interface AppTableComponent<TFeatures extends TableFeatures> {\n  (props: AppTablePropsWithoutSelector): ReactNode\n  <TSelected>(props: AppTablePropsWithSelector<TFeatures, TSelected>): ReactNode\n}\n\n/**\n * Extended table API returned by useAppTable with all App wrapper components\n */\nexport type AppReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TTableComponents extends Record<string, ComponentType<any>>,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = ReactTable<TFeatures, TData, TSelected> &\n  NoInfer<TTableComponents> & {\n    /**\n     * Root wrapper component that provides table context with optional Subscribe.\n     * @example\n     * ```tsx\n     * // Without selector - children is ReactNode\n     * <table.AppTable>\n     *   <table>...</table>\n     * </table.AppTable>\n     *\n     * // With selector - children receives selected state\n     * <table.AppTable selector={(s) => s.pagination}>\n     *   {(pagination) => <div>Page {pagination.pageIndex}</div>}\n     * </table.AppTable>\n     * ```\n     */\n    AppTable: AppTableComponent<TFeatures>\n    /**\n     * Wraps a cell and provides cell context with pre-bound cellComponents.\n     * Optionally accepts a selector for Subscribe functionality.\n     * @example\n     * ```tsx\n     * // Without selector\n     * <table.AppCell cell={cell}>\n     *   {(c) => <td><c.TextCell /></td>}\n     * </table.AppCell>\n     *\n     * // With selector - children receives cell and selected state\n     * <table.AppCell cell={cell} selector={(s) => s.columnFilters}>\n     *   {(c, filters) => <td>{filters.length}</td>}\n     * </table.AppCell>\n     * ```\n     */\n    AppCell: AppCellComponent<TFeatures, TData, NoInfer<TCellComponents>>\n    /**\n     * Wraps a header and provides header context with pre-bound headerComponents.\n     * Optionally accepts a selector for Subscribe functionality.\n     * @example\n     * ```tsx\n     * // Without selector\n     * <table.AppHeader header={header}>\n     *   {(h) => <th><h.SortIndicator /></th>}\n     * </table.AppHeader>\n     *\n     * // With selector\n     * <table.AppHeader header={header} selector={(s) => s.sorting}>\n     *   {(h, sorting) => <th>{sorting.length} sorted</th>}\n     * </table.AppHeader>\n     * ```\n     */\n    AppHeader: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>\n    /**\n     * Wraps a footer and provides header context with pre-bound headerComponents.\n     * Optionally accepts a selector for Subscribe functionality.\n     * @example\n     * ```tsx\n     * <table.AppFooter header={footer}>\n     *   {(f) => <td><table.FlexRender footer={footer} /></td>}\n     * </table.AppFooter>\n     * ```\n     */\n    AppFooter: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>\n  }\n\n/**\n * Creates a custom table hook with pre-bound components for composition.\n *\n * This is the table equivalent of TanStack Form's `createFormHook`. It allows you to:\n * - Define features, row models, and default options once, shared across all tables\n * - Register reusable table, cell, and header components\n * - Access table/cell/header instances via context in those components\n * - Get a `useAppTable` hook that returns an extended table with App wrapper components\n * - Get a `createAppColumnHelper` function pre-bound to your features\n *\n * @example\n * ```tsx\n * // hooks/table.ts\n * export const {\n *   useAppTable,\n *   createAppColumnHelper,\n *   useTableContext,\n *   useCellContext,\n *   useHeaderContext,\n * } = createTableHook({\n *   _features: tableFeatures({\n *     rowPaginationFeature,\n *     rowSortingFeature,\n *     columnFilteringFeature,\n *   }),\n *   _rowModels: {\n *     paginatedRowModel: createPaginatedRowModel(),\n *     sortedRowModel: createSortedRowModel(sortFns),\n *     filteredRowModel: createFilteredRowModel(filterFns),\n *   },\n *   tableComponents: { PaginationControls, RowCount },\n *   cellComponents: { TextCell, NumberCell },\n *   headerComponents: { SortIndicator, ColumnFilter },\n * })\n *\n * // Create column helper with TFeatures already bound\n * const columnHelper = createAppColumnHelper<Person>()\n *\n * // components/table-components.tsx\n * function PaginationControls() {\n *   const table = useTableContext() // TFeatures already known!\n *   return <table.Subscribe selector={(s) => s.pagination}>...</table.Subscribe>\n * }\n *\n * // features/users.tsx\n * function UsersTable({ data }: { data: Person[] }) {\n *   const table = useAppTable({\n *     columns,\n *     data, // TData inferred from Person[]\n *   })\n *\n *   return (\n *     <table.AppTable>\n *       <table>\n *         <thead>\n *           {table.getHeaderGroups().map(headerGroup => (\n *             <tr key={headerGroup.id}>\n *               {headerGroup.headers.map(h => (\n *                 <table.AppHeader header={h} key={h.id}>\n *                   {(header) => (\n *                     <th>\n *                       <table.FlexRender header={h} />\n *                       <header.SortIndicator />\n *                     </th>\n *                   )}\n *                 </table.AppHeader>\n *               ))}\n *             </tr>\n *           ))}\n *         </thead>\n *         <tbody>\n *           {table.getRowModel().rows.map(row => (\n *             <tr key={row.id}>\n *               {row.getAllCells().map(c => (\n *                 <table.AppCell cell={c} key={c.id}>\n *                   {(cell) => <td><cell.TextCell /></td>}\n *                 </table.AppCell>\n *               ))}\n *             </tr>\n *           ))}\n *         </tbody>\n *       </table>\n *       <table.PaginationControls />\n *     </table.AppTable>\n *   )\n * }\n * ```\n */\nexport function createTableHook<\n  TFeatures extends TableFeatures,\n  const TTableComponents extends Record<string, ComponentType<any>>,\n  const TCellComponents extends Record<string, ComponentType<any>>,\n  const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n  tableComponents,\n  cellComponents,\n  headerComponents,\n  ...defaultTableOptions\n}: CreateTableHookOptions<\n  TFeatures,\n  TTableComponents,\n  TCellComponents,\n  THeaderComponents\n>) {\n  // Create contexts internally with TFeatures baked in\n  const TableContext = createContext<ReactTable<TFeatures, any, any>>(\n    null as never,\n  )\n  const CellContext = createContext<Cell<TFeatures, any, any>>(null as never)\n  const HeaderContext = createContext<Header<TFeatures, any, any>>(\n    null as never,\n  )\n\n  /**\n   * Create a column helper pre-bound to the features and components configured in this table hook.\n   * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).\n   * @example\n   * ```tsx\n   * const columnHelper = createAppColumnHelper<Person>()\n   *\n   * const columns = [\n   *   columnHelper.accessor('firstName', {\n   *     header: 'First Name',\n   *     cell: ({ cell }) => <cell.TextCell />, // cell has pre-bound components!\n   *   }),\n   *   columnHelper.accessor('age', {\n   *     header: 'Age',\n   *     cell: ({ cell }) => <cell.NumberCell />,\n   *   }),\n   * ]\n   * ```\n   */\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData,\n    TCellComponents,\n    THeaderComponents\n  > {\n    // The runtime implementation is the same - components are attached at render time\n    // This cast provides the enhanced types for column definitions\n    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n\n  /**\n   * Access the table instance from within an `AppTable` wrapper.\n   * Use this in custom `tableComponents` passed to `createTableHook`.\n   * TFeatures is already known from the createTableHook call.\n   *\n   * @example\n   * ```tsx\n   * function PaginationControls() {\n   *   const table = useTableContext()\n   *   return (\n   *     <table.Subscribe selector={(s) => s.pagination}>\n   *       {(pagination) => (\n   *         <div>\n   *           <button onClick={() => table.previousPage()}>Prev</button>\n   *           <span>Page {pagination.pageIndex + 1}</span>\n   *           <button onClick={() => table.nextPage()}>Next</button>\n   *         </div>\n   *       )}\n   *     </table.Subscribe>\n   *   )\n   * }\n   * ```\n   */\n  function useTableContext<TData extends RowData = RowData>(): ReactTable<\n    TFeatures,\n    TData\n  > {\n    const table = use(TableContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!table) {\n      throw new Error(\n        '`useTableContext` must be used within an `AppTable` component. ' +\n          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n      )\n    }\n\n    return table as ReactTable<TFeatures, TData>\n  }\n\n  /**\n   * Access the cell instance from within an `AppCell` wrapper.\n   * Use this in custom `cellComponents` passed to `createTableHook`.\n   * TFeatures is already known from the createTableHook call.\n   *\n   * @example\n   * ```tsx\n   * function TextCell() {\n   *   const cell = useCellContext<string>()\n   *   return <span>{cell.getValue()}</span>\n   * }\n   *\n   * function NumberCell({ format }: { format?: Intl.NumberFormatOptions }) {\n   *   const cell = useCellContext<number>()\n   *   return <span>{cell.getValue().toLocaleString(undefined, format)}</span>\n   * }\n   * ```\n   */\n  function useCellContext<TValue extends CellData = CellData>() {\n    const cell = use(CellContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!cell) {\n      throw new Error(\n        '`useCellContext` must be used within an `AppCell` component. ' +\n          'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.',\n      )\n    }\n\n    return cell as Cell<TFeatures, any, TValue>\n  }\n\n  /**\n   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.\n   * Use this in custom `headerComponents` passed to `createTableHook`.\n   * TFeatures is already known from the createTableHook call.\n   *\n   * @example\n   * ```tsx\n   * function SortIndicator() {\n   *   const header = useHeaderContext()\n   *   const sorted = header.column.getIsSorted()\n   *   return sorted === 'asc' ? '🔼' : sorted === 'desc' ? '🔽' : null\n   * }\n   *\n   * function ColumnFilter() {\n   *   const header = useHeaderContext()\n   *   if (!header.column.getCanFilter()) return null\n   *   return (\n   *     <input\n   *       value={(header.column.getFilterValue() ?? '') as string}\n   *       onChange={(e) => header.column.setFilterValue(e.target.value)}\n   *       placeholder=\"Filter...\"\n   *     />\n   *   )\n   * }\n   * ```\n   */\n  function useHeaderContext<TValue extends CellData = CellData>() {\n    const header = use(HeaderContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!header) {\n      throw new Error(\n        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n      )\n    }\n\n    return header as Header<TFeatures, any, TValue>\n  }\n\n  /**\n   * Context-aware FlexRender component for cells.\n   * Uses the cell from context, so no need to pass cell prop.\n   */\n  function CellFlexRender() {\n    const cell = useCellContext()\n    return <FlexRender cell={cell} />\n  }\n\n  /**\n   * Context-aware FlexRender component for headers.\n   * Uses the header from context, so no need to pass header prop.\n   */\n  function HeaderFlexRender() {\n    const header = useHeaderContext()\n    return <FlexRender header={header} />\n  }\n\n  /**\n   * Context-aware FlexRender component for footers.\n   * Uses the header from context, so no need to pass footer prop.\n   */\n  function FooterFlexRender() {\n    const header = useHeaderContext()\n    return <FlexRender footer={header} />\n  }\n\n  /**\n   * Enhanced useTable hook that returns a table with App wrapper components\n   * and pre-bound tableComponents attached directly to the table object.\n   *\n   * Default options from createTableHook are automatically merged with\n   * the options passed here. Options passed here take precedence.\n   *\n   * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.\n   */\n  function useAppTable<TData extends RowData, TSelected = {}>(\n    tableOptions: Omit<\n      TableOptions<TFeatures, TData>,\n      '_features' | '_rowModels'\n    >,\n    selector?: (state: TableState<TFeatures>) => TSelected,\n  ): AppReactTable<\n    TFeatures,\n    TData,\n    TSelected,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  > {\n    // Merge default options with provided options (provided takes precedence)\n    const table = useTable<TFeatures, TData, TSelected>(\n      { ...defaultTableOptions, ...tableOptions } as TableOptions<\n        TFeatures,\n        TData\n      >,\n      selector,\n    )\n\n    // AppTable - Root wrapper that provides table context with optional Subscribe\n    const AppTable = useMemo(() => {\n      function AppTableImpl(props: AppTablePropsWithoutSelector): ReactNode\n      function AppTableImpl<TAppTableSelected>(\n        props: AppTablePropsWithSelector<TFeatures, TAppTableSelected>,\n      ): ReactNode\n      function AppTableImpl<TAppTableSelected>(\n        props:\n          | AppTablePropsWithoutSelector\n          | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,\n      ): ReactNode {\n        const { children, selector: appTableSelector } = props as any\n\n        return (\n          <TableContext.Provider value={table}>\n            {appTableSelector ? (\n              <table.Subscribe selector={appTableSelector}>\n                {(state: TAppTableSelected) =>\n                  (children as (state: TAppTableSelected) => ReactNode)(state)\n                }\n              </table.Subscribe>\n            ) : (\n              children\n            )}\n          </TableContext.Provider>\n        )\n      }\n      return AppTableImpl as AppTableComponent<TFeatures>\n    }, [table])\n\n    // AppCell - Wraps cell with context, pre-bound cellComponents, and optional Subscribe\n    const AppCell = useMemo(() => {\n      function AppCellImpl<TValue extends CellData = CellData>(\n        props: AppCellPropsWithoutSelector<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents\n        >,\n      ): ReactNode\n      function AppCellImpl<\n        TValue extends CellData = CellData,\n        TAppCellSelected = unknown,\n      >(\n        props: AppCellPropsWithSelector<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents,\n          TAppCellSelected\n        >,\n      ): ReactNode\n      function AppCellImpl<\n        TValue extends CellData = CellData,\n        TAppCellSelected = unknown,\n      >(\n        props:\n          | AppCellPropsWithoutSelector<\n              TFeatures,\n              TData,\n              TValue,\n              TCellComponents\n            >\n          | AppCellPropsWithSelector<\n              TFeatures,\n              TData,\n              TValue,\n              TCellComponents,\n              TAppCellSelected\n            >,\n      ): ReactNode {\n        const { cell, children, selector: appCellSelector } = props as any\n        const extendedCell = Object.assign(cell, {\n          FlexRender: CellFlexRender,\n          ...cellComponents,\n        })\n\n        return (\n          <CellContext.Provider value={cell}>\n            {appCellSelector ? (\n              <table.Subscribe selector={appCellSelector}>\n                {(state: TAppCellSelected) =>\n                  (\n                    children as (\n                      cell: Cell<TFeatures, TData, TValue> &\n                        TCellComponents & { FlexRender: () => ReactNode },\n                      state: TAppCellSelected,\n                    ) => ReactNode\n                  )(extendedCell, state)\n                }\n              </table.Subscribe>\n            ) : (\n              (\n                children as (\n                  cell: Cell<TFeatures, TData, TValue> &\n                    TCellComponents & { FlexRender: () => ReactNode },\n                ) => ReactNode\n              )(extendedCell)\n            )}\n          </CellContext.Provider>\n        )\n      }\n      return AppCellImpl as AppCellComponent<TFeatures, TData, TCellComponents>\n    }, [table])\n\n    // AppHeader - Wraps header with context, pre-bound headerComponents, and optional Subscribe\n    const AppHeader = useMemo(() => {\n      function AppHeaderImpl<TValue extends CellData = CellData>(\n        props: AppHeaderPropsWithoutSelector<\n          TFeatures,\n          TData,\n          TValue,\n          THeaderComponents\n        >,\n      ): ReactNode\n      function AppHeaderImpl<\n        TValue extends CellData = CellData,\n        TAppHeaderSelected = unknown,\n      >(\n        props: AppHeaderPropsWithSelector<\n          TFeatures,\n          TData,\n          TValue,\n          THeaderComponents,\n          TAppHeaderSelected\n        >,\n      ): ReactNode\n      function AppHeaderImpl<\n        TValue extends CellData = CellData,\n        TAppHeaderSelected = unknown,\n      >(\n        props:\n          | AppHeaderPropsWithoutSelector<\n              TFeatures,\n              TData,\n              TValue,\n              THeaderComponents\n            >\n          | AppHeaderPropsWithSelector<\n              TFeatures,\n              TData,\n              TValue,\n              THeaderComponents,\n              TAppHeaderSelected\n            >,\n      ): ReactNode {\n        const { header, children, selector: appHeaderSelector } = props as any\n        const extendedHeader = Object.assign(header, {\n          FlexRender: HeaderFlexRender,\n          ...headerComponents,\n        })\n\n        return (\n          <HeaderContext.Provider value={header}>\n            {appHeaderSelector ? (\n              <table.Subscribe selector={appHeaderSelector}>\n                {(state: TAppHeaderSelected) =>\n                  (\n                    children as (\n                      header: Header<TFeatures, TData, TValue> &\n                        THeaderComponents & { FlexRender: () => ReactNode },\n                      state: TAppHeaderSelected,\n                    ) => ReactNode\n                  )(extendedHeader, state)\n                }\n              </table.Subscribe>\n            ) : (\n              (\n                children as (\n                  header: Header<TFeatures, TData, TValue> &\n                    THeaderComponents & { FlexRender: () => ReactNode },\n                ) => ReactNode\n              )(extendedHeader)\n            )}\n          </HeaderContext.Provider>\n        )\n      }\n      return AppHeaderImpl as AppHeaderComponent<\n        TFeatures,\n        TData,\n        THeaderComponents\n      >\n    }, [table])\n\n    // AppFooter - Same as AppHeader (footers use Header type)\n    const AppFooter = useMemo(() => {\n      function AppFooterImpl<TValue extends CellData = CellData>(\n        props: AppHeaderPropsWithoutSelector<\n          TFeatures,\n          TData,\n          TValue,\n          THeaderComponents\n        >,\n      ): ReactNode\n      function AppFooterImpl<\n        TValue extends CellData = CellData,\n        TAppFooterSelected = unknown,\n      >(\n        props: AppHeaderPropsWithSelector<\n          TFeatures,\n          TData,\n          TValue,\n          THeaderComponents,\n          TAppFooterSelected\n        >,\n      ): ReactNode\n      function AppFooterImpl<\n        TValue extends CellData = CellData,\n        TAppFooterSelected = unknown,\n      >(\n        props:\n          | AppHeaderPropsWithoutSelector<\n              TFeatures,\n              TData,\n              TValue,\n              THeaderComponents\n            >\n          | AppHeaderPropsWithSelector<\n              TFeatures,\n              TData,\n              TValue,\n              THeaderComponents,\n              TAppFooterSelected\n            >,\n      ): ReactNode {\n        const { header, children, selector: appFooterSelector } = props as any\n        const extendedHeader = Object.assign(header, {\n          FlexRender: FooterFlexRender,\n          ...headerComponents,\n        })\n\n        return (\n          <HeaderContext.Provider value={header}>\n            {appFooterSelector ? (\n              <table.Subscribe selector={appFooterSelector}>\n                {(state: TAppFooterSelected) =>\n                  (\n                    children as (\n                      header: Header<TFeatures, TData, TValue> &\n                        THeaderComponents & { FlexRender: () => ReactNode },\n                      state: TAppFooterSelected,\n                    ) => ReactNode\n                  )(extendedHeader, state)\n                }\n              </table.Subscribe>\n            ) : (\n              (\n                children as (\n                  header: Header<TFeatures, TData, TValue> &\n                    THeaderComponents & { FlexRender: () => ReactNode },\n                ) => ReactNode\n              )(extendedHeader)\n            )}\n          </HeaderContext.Provider>\n        )\n      }\n      return AppFooterImpl as AppHeaderComponent<\n        TFeatures,\n        TData,\n        THeaderComponents\n      >\n    }, [table])\n\n    // Combine everything into the extended table API\n    const extendedTable = useMemo(() => {\n      return Object.assign(table, {\n        AppTable,\n        AppCell,\n        AppHeader,\n        AppFooter,\n        ...tableComponents,\n      }) as AppReactTable<\n        TFeatures,\n        TData,\n        TSelected,\n        TTableComponents,\n        TCellComponents,\n        THeaderComponents\n      >\n    }, [table, AppTable, AppCell, AppHeader, AppFooter])\n\n    return extendedTable\n  }\n\n  return {\n    appFeatures: defaultTableOptions._features as TFeatures,\n    createAppColumnHelper,\n    useAppTable,\n    useTableContext,\n    useCellContext,\n    useHeaderContext,\n  }\n}\n"],"names":[],"mappings":";;;;;;AA6kBO;AAKL;AACA;AACA;AACA;AAEF;AAOE;AAAqB;AACnB;AAEF;AACA;AAAsB;AACpB;AAsBF;AAQE;AAAO;AA+BT;AAIE;AAGA;AACE;AAAU;AACR;AAAA;AAKJ;AAAO;AAqBT;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAKJ;AAAO;AA6BT;AACE;AAGA;AACE;AAAU;AACR;AAAA;AAIJ;AAAO;AAOT;AACE;AACA;AAA+B;AAOjC;AACE;AACA;AAAmC;AAOrC;AACE;AACA;AAAmC;AAYrC;AAeE;AAAc;AACiB;AAI7B;AAIF;AAKE;AAKE;AAEA;AAWE;AAGJ;AAAO;AAIT;AAqBE;AAmBE;AACA;AAAyC;AAC3B;AACT;AAGL;AAsBE;AAGJ;AAAO;AAIT;AAqBE;AAmBE;AACA;AAA6C;AAC/B;AACT;AAGL;AAsBE;AAGJ;AAAO;AAQT;AAqBE;AAmBE;AACA;AAA6C;AAC/B;AACT;AAGL;AAsBE;AAGJ;AAAO;AAQT;AACE;AAA4B;AAC1B;AACA;AACA;AACA;AACG;AACJ;AAUH;AAAO;AAGT;AAAO;AAC4B;AACjC;AACA;AACA;AACA;AACA;AAEJ;;;;"}

package/dist/esm/index.d.ts

@@ -1,9 +1,6 @@
-import { TableOptions, RowData } from '@tanstack/table-core';
-import * as React from 'react';
 export * from '@tanstack/table-core';
-export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>;
-/**
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
- */
-export declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): React.ReactNode | JSX.Element;
-export declare function useReactTable<TData extends RowData>(options: TableOptions<TData>): import('@tanstack/table-core').Table<TData>;
+export * from './FlexRender.js';
+export * from './Subscribe.js';
+export * from './createTableHook.js';
+export * from './useLegacyTable.js';
+export * from './useTable.js';

package/dist/esm/index.js

@@ -1,55 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { createTable } from "@tanstack/table-core";
 export * from "@tanstack/table-core";
-function flexRender(Comp, props) {
-  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ jsx(Comp, { ...props }) : Comp;
-}
-function isReactComponent(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.isReactComponent;
-  })();
-}
-function isExoticComponent(component) {
-  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
-}
-function useReactTable(options) {
-  const resolvedOptions = {
-    state: {},
-    // Dummy state
-    onStateChange: () => {
-    },
-    // noop
-    renderFallbackValue: null,
-    ...options
-  };
-  const [tableRef] = React.useState(() => ({
-    current: createTable(resolvedOptions)
-  }));
-  const [state, setState] = React.useState(() => tableRef.current.initialState);
-  tableRef.current.setOptions((prev) => ({
-    ...prev,
-    ...options,
-    state: {
-      ...state,
-      ...options.state
-    },
-    // Similarly, we'll maintain both our internal state and any user-provided
-    // state.
-    onStateChange: (updater) => {
-      var _a;
-      setState(updater);
-      (_a = options.onStateChange) == null ? void 0 : _a.call(options, updater);
-    }
-  }));
-  return tableRef.current;
-}
+import { FlexRender, flexRender } from "./FlexRender.js";
+import { Subscribe } from "./Subscribe.js";
+import { createTableHook } from "./createTableHook.js";
+import { getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useLegacyTable } from "./useLegacyTable.js";
+import { useTable } from "./useTable.js";
 export {
+  FlexRender,
+  Subscribe,
+  createTableHook,
   flexRender,
-  useReactTable
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useLegacyTable,
+  useTable
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n  TableOptions,\n  TableOptionsResolved,\n  RowData,\n  createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps\n): React.ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\nfunction isReactComponent<TProps>(\n  component: unknown\n): component is React.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.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\nexport function useReactTable<TData extends RowData>(\n  options: TableOptions<TData>\n) {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table and store it in state\n  const [tableRef] = React.useState(() => ({\n    current: createTable<TData>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the table's initial state\n  const [state, setState] = React.useState(() => tableRef.current.initialState)\n\n  // Compose the default state above with any user state. This will allow the user\n  // to only control a subset of the state if desired.\n  tableRef.current.setOptions(prev => ({\n    ...prev,\n    ...options,\n    state: {\n      ...state,\n      ...options.state,\n    },\n    // Similarly, we'll maintain both our internal state and any user-provided\n    // state.\n    onStateChange: updater => {\n      setState(updater)\n      options.onStateChange?.(updater)\n    },\n  }))\n\n  return tableRef.current\n}\n"],"names":[],"mappings":";;;;AAiBgB,SAAA,WACd,MACA,OAC+B;AACxB,SAAA,CAAC,OAAO,OAAO,iBAAyB,IAAI,IAChD,oBAAA,MAAA,EAAM,GAAG,MAAO,CAAA,IAEjB;AAEJ;AAEA,SAAS,iBACP,WAC0C;AAC1C,SACE,iBAAiB,SAAS,KAC1B,OAAO,cAAc,cACrB,kBAAkB,SAAS;AAE/B;AAEA,SAAS,iBAAiB,WAAgB;AAEtC,SAAA,OAAO,cAAc,eACpB,MAAM;AACC,UAAA,QAAQ,OAAO,eAAe,SAAS;AACtC,WAAA,MAAM,aAAa,MAAM,UAAU;AAAA,EAAA;AAGhD;AAEA,SAAS,kBAAkB,WAAgB;AACzC,SACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,mBAAmB,EAAE,SAAS,UAAU,SAAS,WAAW;AAE/E;AAEO,SAAS,cACd,SACA;AAEA,QAAM,kBAA+C;AAAA,IACnD,OAAO,CAAC;AAAA;AAAA,IACR,eAAe,MAAM;AAAA,IAAC;AAAA;AAAA,IACtB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EAAA;AAIL,QAAM,CAAC,QAAQ,IAAI,MAAM,SAAS,OAAO;AAAA,IACvC,SAAS,YAAmB,eAAe;AAAA,EAC3C,EAAA;AAGI,QAAA,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,MAAM,SAAS,QAAQ,YAAY;AAInE,WAAA,QAAQ,WAAW,CAAS,UAAA;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,QAAQ;AAAA,IACb;AAAA;AAAA;AAAA,IAGA,eAAe,CAAW,YAAA;;AACxB,eAAS,OAAO;AAChB,oBAAQ,kBAAR,iCAAwB;AAAA,IAC1B;AAAA,EACA,EAAA;AAEF,SAAO,SAAS;AAClB;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/useLegacyTable.d.ts

@@ -0,0 +1,188 @@
+import { RowData, RowModel, StockFeatures, Table, TableOptions, TableState } from '@tanstack/table-core';
+import { ReactTable } from './useTable.js';
+/**
+ * @deprecated Use `createFilteredRowModel(filterFns)` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the filtered row model.
+ */
+export declare function getFilteredRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * @deprecated Use `createSortedRowModel(sortFns)` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the sorted row model.
+ */
+export declare function getSortedRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * @deprecated Use `createPaginatedRowModel()` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the paginated row model.
+ */
+export declare function getPaginationRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * @deprecated Use `createExpandedRowModel()` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the expanded row model.
+ */
+export declare function getExpandedRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * @deprecated Use `createGroupedRowModel(aggregationFns)` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the grouped row model.
+ */
+export declare function getGroupedRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * @deprecated Use `createFacetedRowModel()` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the faceted row model.
+ */
+export declare function getFacetedRowModel<TData extends RowData>(): FacetedRowModelFactory<TData>;
+/**
+ * @deprecated Use `createFacetedMinMaxValues()` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the faceted min/max values.
+ */
+export declare function getFacetedMinMaxValues<TData extends RowData>(): FacetedMinMaxValuesFactory<TData>;
+/**
+ * @deprecated Use `createFacetedUniqueValues()` with the new `useTable` hook instead.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It acts as a marker to enable the faceted unique values.
+ */
+export declare function getFacetedUniqueValues<TData extends RowData>(): FacetedUniqueValuesFactory<TData>;
+/**
+ * @deprecated The core row model is always created automatically in v9.
+ *
+ * This is a stub function for v8 API compatibility with `useLegacyTable`.
+ * It does nothing - the core row model is always available.
+ */
+export declare function getCoreRowModel<TData extends RowData>(): RowModelFactory<TData>;
+/**
+ * Row model factory function type from v8 API
+ */
+type RowModelFactory<TData extends RowData> = (table: Table<StockFeatures, TData>) => () => RowModel<StockFeatures, TData>;
+/**
+ * Faceted row model factory function type from v8 API
+ */
+type FacetedRowModelFactory<TData extends RowData> = (table: Table<StockFeatures, TData>, columnId: string) => () => RowModel<StockFeatures, TData>;
+/**
+ * Faceted min/max values factory function type from v8 API
+ */
+type FacetedMinMaxValuesFactory<TData extends RowData> = (table: Table<StockFeatures, TData>, columnId: string) => () => undefined | [number, number];
+/**
+ * Faceted unique values factory function type from v8 API
+ */
+type FacetedUniqueValuesFactory<TData extends RowData> = (table: Table<StockFeatures, TData>, columnId: string) => () => Map<any, number>;
+/**
+ * Legacy v8-style row model options
+ */
+export interface LegacyRowModelOptions<TData extends RowData> {
+    /**
+     * Returns the core row model for the table.
+     * @deprecated This option is no longer needed in v9. The core row model is always created automatically.
+     */
+    getCoreRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the filtered row model for the table.
+     * @deprecated Use `_rowModels.filteredRowModel` with `createFilteredRowModel(filterFns)` instead.
+     */
+    getFilteredRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the sorted row model for the table.
+     * @deprecated Use `_rowModels.sortedRowModel` with `createSortedRowModel(sortFns)` instead.
+     */
+    getSortedRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the paginated row model for the table.
+     * @deprecated Use `_rowModels.paginatedRowModel` with `createPaginatedRowModel()` instead.
+     */
+    getPaginationRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the expanded row model for the table.
+     * @deprecated Use `_rowModels.expandedRowModel` with `createExpandedRowModel()` instead.
+     */
+    getExpandedRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the grouped row model for the table.
+     * @deprecated Use `_rowModels.groupedRowModel` with `createGroupedRowModel(aggregationFns)` instead.
+     */
+    getGroupedRowModel?: RowModelFactory<TData>;
+    /**
+     * Returns the faceted row model for a column.
+     * @deprecated Use `_rowModels.facetedRowModel` with `createFacetedRowModel()` instead.
+     */
+    getFacetedRowModel?: FacetedRowModelFactory<TData>;
+    /**
+     * Returns the faceted min/max values for a column.
+     * @deprecated Use `_rowModels.facetedMinMaxValues` with `createFacetedMinMaxValues()` instead.
+     */
+    getFacetedMinMaxValues?: FacetedMinMaxValuesFactory<TData>;
+    /**
+     * Returns the faceted unique values for a column.
+     * @deprecated Use `_rowModels.facetedUniqueValues` with `createFacetedUniqueValues()` instead.
+     */
+    getFacetedUniqueValues?: FacetedUniqueValuesFactory<TData>;
+}
+/**
+ * Legacy v8-style table options that work with useLegacyTable.
+ *
+ * This type omits `_features` and `_rowModels` and instead accepts the v8-style
+ * `get*RowModel` function options.
+ *
+ * @deprecated This is a compatibility layer for migrating from v8. Use `useTable` with explicit `_features` and `_rowModels` instead.
+ */
+export type LegacyTableOptions<TData extends RowData> = Omit<TableOptions<StockFeatures, TData>, '_features' | '_rowModels'> & LegacyRowModelOptions<TData>;
+/**
+ * Legacy table instance type that includes the v8-style `getState()` method.
+ *
+ * @deprecated Use `useTable` with explicit state selection instead.
+ */
+export type LegacyReactTable<TData extends RowData> = ReactTable<StockFeatures, TData, TableState<StockFeatures>> & {
+    /**
+     * Returns the current table state.
+     * @deprecated In v9, access state directly via `table.state` or use `table.store.state` for the full state.
+     */
+    getState: () => TableState<StockFeatures>;
+};
+/**
+ * @deprecated This hook is provided as a compatibility layer for migrating from TanStack Table v8.
+ *
+ * Use the new `useTable` hook instead with explicit `_features` and `_rowModels`:
+ *
+ * ```tsx
+ * // New v9 API
+ * const _features = tableFeatures({
+ *   columnFilteringFeature,
+ *   rowSortingFeature,
+ *   rowPaginationFeature,
+ * })
+ *
+ * const table = useTable({
+ *   _features,
+ *   _rowModels: {
+ *     filteredRowModel: createFilteredRowModel(filterFns),
+ *     sortedRowModel: createSortedRowModel(sortFns),
+ *     paginatedRowModel: createPaginatedRowModel(),
+ *   },
+ *   columns,
+ *   data,
+ * })
+ * ```
+ *
+ * Key differences from v8:
+ * - Features are tree-shakeable - only import what you use
+ * - Row models are explicitly passed via `_rowModels`
+ * - Use `table.Subscribe` for fine-grained re-renders
+ * - State is accessed via `table.state` after selecting with the 2nd argument
+ *
+ * @param options - Legacy v8-style table options
+ * @returns A table instance with the full state subscribed and a `getState()` method
+ */
+export declare function useLegacyTable<TData extends RowData>(options: LegacyTableOptions<TData>): LegacyReactTable<TData>;
+export {};

package/dist/esm/useLegacyTable.js

@@ -0,0 +1,106 @@
+"use client";
+import { createFilteredRowModel, filterFns, createSortedRowModel, sortFns, createPaginatedRowModel, createExpandedRowModel, createGroupedRowModel, aggregationFns, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, stockFeatures } from "@tanstack/table-core";
+import { useMemo } from "react";
+import { useStore } from "@tanstack/react-store";
+import { useTable } from "./useTable.js";
+function getFilteredRowModel() {
+  return (() => () => {
+  });
+}
+function getSortedRowModel() {
+  return (() => () => {
+  });
+}
+function getPaginationRowModel() {
+  return (() => () => {
+  });
+}
+function getExpandedRowModel() {
+  return (() => () => {
+  });
+}
+function getGroupedRowModel() {
+  return (() => () => {
+  });
+}
+function getFacetedRowModel() {
+  return (() => () => {
+  });
+}
+function getFacetedMinMaxValues() {
+  return (() => () => void 0);
+}
+function getFacetedUniqueValues() {
+  return (() => () => /* @__PURE__ */ new Map());
+}
+function getCoreRowModel() {
+  return (() => () => {
+  });
+}
+function useLegacyTable(options) {
+  const {
+    // Extract legacy row model options
+    getCoreRowModel: _getCoreRowModel,
+    getFilteredRowModel: getFilteredRowModel2,
+    getSortedRowModel: getSortedRowModel2,
+    getPaginationRowModel: getPaginationRowModel2,
+    getExpandedRowModel: getExpandedRowModel2,
+    getGroupedRowModel: getGroupedRowModel2,
+    getFacetedRowModel: getFacetedRowModel2,
+    getFacetedMinMaxValues: getFacetedMinMaxValues2,
+    getFacetedUniqueValues: getFacetedUniqueValues2,
+    // Rest of the options
+    ...restOptions
+  } = options;
+  const _rowModels = {};
+  if (getFilteredRowModel2) {
+    _rowModels.filteredRowModel = createFilteredRowModel(filterFns);
+  }
+  if (getSortedRowModel2) {
+    _rowModels.sortedRowModel = createSortedRowModel(sortFns);
+  }
+  if (getPaginationRowModel2) {
+    _rowModels.paginatedRowModel = createPaginatedRowModel();
+  }
+  if (getExpandedRowModel2) {
+    _rowModels.expandedRowModel = createExpandedRowModel();
+  }
+  if (getGroupedRowModel2) {
+    _rowModels.groupedRowModel = createGroupedRowModel(aggregationFns);
+  }
+  if (getFacetedRowModel2) {
+    _rowModels.facetedRowModel = createFacetedRowModel();
+  }
+  if (getFacetedMinMaxValues2) {
+    _rowModels.facetedMinMaxValues = createFacetedMinMaxValues();
+  }
+  if (getFacetedUniqueValues2) {
+    _rowModels.facetedUniqueValues = createFacetedUniqueValues();
+  }
+  const table = useTable({
+    ...restOptions,
+    _features: stockFeatures,
+    _rowModels
+  });
+  const state = useStore(table.store, (state2) => state2);
+  return useMemo(
+    () => ({
+      ...table,
+      getState: () => state
+    }),
+    [table, state]
+  );
+}
+export {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useLegacyTable
+};
+//# sourceMappingURL=useLegacyTable.js.map

package/dist/esm/useLegacyTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLegacyTable.js","sources":["../../src/useLegacyTable.ts"],"sourcesContent":["'use client'\n\nimport {\n  aggregationFns,\n  createExpandedRowModel,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createGroupedRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  filterFns,\n  sortFns,\n  stockFeatures,\n} from '@tanstack/table-core'\nimport { useMemo } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { useTable } from './useTable'\nimport type {\n  CreateRowModels_All,\n  RowData,\n  RowModel,\n  StockFeatures,\n  Table,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ReactTable } from './useTable'\n\n// =============================================================================\n// V8-style row model factory functions\n// These are stub functions that act as markers for useLegacyTable to know\n// which row models to enable. They don't actually do anything - the real\n// implementation is handled by useLegacyTable internally.\n// =============================================================================\n\n/**\n * @deprecated Use `createFilteredRowModel(filterFns)` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the filtered row model.\n */\nexport function getFilteredRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createSortedRowModel(sortFns)` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the sorted row model.\n */\nexport function getSortedRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createPaginatedRowModel()` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the paginated row model.\n */\nexport function getPaginationRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createExpandedRowModel()` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the expanded row model.\n */\nexport function getExpandedRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createGroupedRowModel(aggregationFns)` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the grouped row model.\n */\nexport function getGroupedRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createFacetedRowModel()` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the faceted row model.\n */\nexport function getFacetedRowModel<\n  TData extends RowData,\n>(): FacetedRowModelFactory<TData> {\n  return (() => () => {}) as unknown as FacetedRowModelFactory<TData>\n}\n\n/**\n * @deprecated Use `createFacetedMinMaxValues()` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the faceted min/max values.\n */\nexport function getFacetedMinMaxValues<\n  TData extends RowData,\n>(): FacetedMinMaxValuesFactory<TData> {\n  return (() => () => undefined) as unknown as FacetedMinMaxValuesFactory<TData>\n}\n\n/**\n * @deprecated Use `createFacetedUniqueValues()` with the new `useTable` hook instead.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It acts as a marker to enable the faceted unique values.\n */\nexport function getFacetedUniqueValues<\n  TData extends RowData,\n>(): FacetedUniqueValuesFactory<TData> {\n  return (() => () => new Map()) as unknown as FacetedUniqueValuesFactory<TData>\n}\n\n/**\n * @deprecated The core row model is always created automatically in v9.\n *\n * This is a stub function for v8 API compatibility with `useLegacyTable`.\n * It does nothing - the core row model is always available.\n */\nexport function getCoreRowModel<\n  TData extends RowData,\n>(): RowModelFactory<TData> {\n  return (() => () => {}) as unknown as RowModelFactory<TData>\n}\n\n// =============================================================================\n// Type definitions\n// =============================================================================\n\n/**\n * Row model factory function type from v8 API\n */\ntype RowModelFactory<TData extends RowData> = (\n  table: Table<StockFeatures, TData>,\n) => () => RowModel<StockFeatures, TData>\n\n/**\n * Faceted row model factory function type from v8 API\n */\ntype FacetedRowModelFactory<TData extends RowData> = (\n  table: Table<StockFeatures, TData>,\n  columnId: string,\n) => () => RowModel<StockFeatures, TData>\n\n/**\n * Faceted min/max values factory function type from v8 API\n */\ntype FacetedMinMaxValuesFactory<TData extends RowData> = (\n  table: Table<StockFeatures, TData>,\n  columnId: string,\n) => () => undefined | [number, number]\n\n/**\n * Faceted unique values factory function type from v8 API\n */\ntype FacetedUniqueValuesFactory<TData extends RowData> = (\n  table: Table<StockFeatures, TData>,\n  columnId: string,\n) => () => Map<any, number>\n\n/**\n * Legacy v8-style row model options\n */\nexport interface LegacyRowModelOptions<TData extends RowData> {\n  /**\n   * Returns the core row model for the table.\n   * @deprecated This option is no longer needed in v9. The core row model is always created automatically.\n   */\n  getCoreRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the filtered row model for the table.\n   * @deprecated Use `_rowModels.filteredRowModel` with `createFilteredRowModel(filterFns)` instead.\n   */\n  getFilteredRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the sorted row model for the table.\n   * @deprecated Use `_rowModels.sortedRowModel` with `createSortedRowModel(sortFns)` instead.\n   */\n  getSortedRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the paginated row model for the table.\n   * @deprecated Use `_rowModels.paginatedRowModel` with `createPaginatedRowModel()` instead.\n   */\n  getPaginationRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the expanded row model for the table.\n   * @deprecated Use `_rowModels.expandedRowModel` with `createExpandedRowModel()` instead.\n   */\n  getExpandedRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the grouped row model for the table.\n   * @deprecated Use `_rowModels.groupedRowModel` with `createGroupedRowModel(aggregationFns)` instead.\n   */\n  getGroupedRowModel?: RowModelFactory<TData>\n  /**\n   * Returns the faceted row model for a column.\n   * @deprecated Use `_rowModels.facetedRowModel` with `createFacetedRowModel()` instead.\n   */\n  getFacetedRowModel?: FacetedRowModelFactory<TData>\n  /**\n   * Returns the faceted min/max values for a column.\n   * @deprecated Use `_rowModels.facetedMinMaxValues` with `createFacetedMinMaxValues()` instead.\n   */\n  getFacetedMinMaxValues?: FacetedMinMaxValuesFactory<TData>\n  /**\n   * Returns the faceted unique values for a column.\n   * @deprecated Use `_rowModels.facetedUniqueValues` with `createFacetedUniqueValues()` instead.\n   */\n  getFacetedUniqueValues?: FacetedUniqueValuesFactory<TData>\n}\n\n/**\n * Legacy v8-style table options that work with useLegacyTable.\n *\n * This type omits `_features` and `_rowModels` and instead accepts the v8-style\n * `get*RowModel` function options.\n *\n * @deprecated This is a compatibility layer for migrating from v8. Use `useTable` with explicit `_features` and `_rowModels` instead.\n */\nexport type LegacyTableOptions<TData extends RowData> = Omit<\n  TableOptions<StockFeatures, TData>,\n  '_features' | '_rowModels'\n> &\n  LegacyRowModelOptions<TData>\n\n/**\n * Legacy table instance type that includes the v8-style `getState()` method.\n *\n * @deprecated Use `useTable` with explicit state selection instead.\n */\nexport type LegacyReactTable<TData extends RowData> = ReactTable<\n  StockFeatures,\n  TData,\n  TableState<StockFeatures>\n> & {\n  /**\n   * Returns the current table state.\n   * @deprecated In v9, access state directly via `table.state` or use `table.store.state` for the full state.\n   */\n  getState: () => TableState<StockFeatures>\n}\n\n/**\n * @deprecated This hook is provided as a compatibility layer for migrating from TanStack Table v8.\n *\n * Use the new `useTable` hook instead with explicit `_features` and `_rowModels`:\n *\n * ```tsx\n * // New v9 API\n * const _features = tableFeatures({\n *   columnFilteringFeature,\n *   rowSortingFeature,\n *   rowPaginationFeature,\n * })\n *\n * const table = useTable({\n *   _features,\n *   _rowModels: {\n *     filteredRowModel: createFilteredRowModel(filterFns),\n *     sortedRowModel: createSortedRowModel(sortFns),\n *     paginatedRowModel: createPaginatedRowModel(),\n *   },\n *   columns,\n *   data,\n * })\n * ```\n *\n * Key differences from v8:\n * - Features are tree-shakeable - only import what you use\n * - Row models are explicitly passed via `_rowModels`\n * - Use `table.Subscribe` for fine-grained re-renders\n * - State is accessed via `table.state` after selecting with the 2nd argument\n *\n * @param options - Legacy v8-style table options\n * @returns A table instance with the full state subscribed and a `getState()` method\n */\nexport function useLegacyTable<TData extends RowData>(\n  options: LegacyTableOptions<TData>,\n): LegacyReactTable<TData> {\n  const {\n    // Extract legacy row model options\n    getCoreRowModel: _getCoreRowModel,\n    getFilteredRowModel,\n    getSortedRowModel,\n    getPaginationRowModel,\n    getExpandedRowModel,\n    getGroupedRowModel,\n    getFacetedRowModel,\n    getFacetedMinMaxValues,\n    getFacetedUniqueValues,\n    // Rest of the options\n    ...restOptions\n  } = options\n\n  // Build the _rowModels object based on which legacy options were provided\n  const _rowModels: CreateRowModels_All<StockFeatures, TData> = {}\n\n  // Map v8 row model factories to v9 _rowModels\n  // Note: getCoreRowModel is handled automatically in v9, so we ignore it\n\n  if (getFilteredRowModel) {\n    _rowModels.filteredRowModel = createFilteredRowModel(filterFns)\n  }\n\n  if (getSortedRowModel) {\n    _rowModels.sortedRowModel = createSortedRowModel(sortFns)\n  }\n\n  if (getPaginationRowModel) {\n    _rowModels.paginatedRowModel = createPaginatedRowModel()\n  }\n\n  if (getExpandedRowModel) {\n    _rowModels.expandedRowModel = createExpandedRowModel()\n  }\n\n  if (getGroupedRowModel) {\n    _rowModels.groupedRowModel = createGroupedRowModel(aggregationFns)\n  }\n\n  if (getFacetedRowModel) {\n    _rowModels.facetedRowModel = createFacetedRowModel()\n  }\n\n  if (getFacetedMinMaxValues) {\n    _rowModels.facetedMinMaxValues = createFacetedMinMaxValues()\n  }\n\n  if (getFacetedUniqueValues) {\n    _rowModels.facetedUniqueValues = createFacetedUniqueValues()\n  }\n\n  // Call useTable with the v9 API, subscribing to all state changes\n  const table = useTable<StockFeatures, TData, TableState<StockFeatures>>({\n    ...restOptions,\n    _features: stockFeatures,\n    _rowModels,\n  } as TableOptions<StockFeatures, TData>)\n\n  const state = useStore(table.store, (state) => state)\n\n  return useMemo(\n    () =>\n      ({\n        ...table,\n        getState: () => state,\n      }) as LegacyReactTable<TData>,\n    [table, state],\n  )\n}\n"],"names":["getFilteredRowModel","getSortedRowModel","getPaginationRowModel","getExpandedRowModel","getGroupedRowModel","getFacetedRowModel","getFacetedMinMaxValues","getFacetedUniqueValues"],"mappings":";;;;;AA2CO;AAGL;AAAoB;AACtB;AAQO;AAGL;AAAoB;AACtB;AAQO;AAGL;AAAoB;AACtB;AAQO;AAGL;AAAoB;AACtB;AAQO;AAGL;AAAoB;AACtB;AAQO;AAGL;AAAoB;AACtB;AAQO;AAGL;AACF;AAQO;AAGL;AACF;AAQO;AAGL;AAAoB;AACtB;AAyJO;AAGL;AAAM;AAAA;AAEa;AACjBA;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAAA;AAEG;AAIL;AAKA;AACE;AAA8D;AAGhE;AACE;AAAwD;AAG1D;AACE;AAA+B;AAGjC;AACE;AAA8B;AAGhC;AACE;AAAiE;AAGnE;AACE;AAA6B;AAG/B;AACE;AAAiC;AAGnC;AACE;AAAiC;AAInC;AAAwE;AACnE;AACQ;AACX;AAGF;AAEA;AAAO;AAEF;AACI;AACa;AAAA;AAEP;AAEjB;;;;;;;;;;;;;"}

package/dist/esm/useTable.d.ts

@@ -0,0 +1,52 @@
+import { CellData, NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
+import { FunctionComponent, ReactNode } from 'react';
+import { FlexRenderProps } from './FlexRender.js';
+export type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
+    /**
+     * A React 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) => ReactNode) | ReactNode;
+    }) => ReturnType<FunctionComponent>;
+    /**
+     * A React 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>) => ReactNode;
+    /**
+     * 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 declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): ReactTable<TFeatures, TData, TSelected>;

package/dist/esm/useTable.js

@@ -0,0 +1,51 @@
+"use client";
+import { useState, useLayoutEffect, useEffect, useMemo } from "react";
+import { constructTable } from "@tanstack/table-core";
+import { useStore } from "@tanstack/react-store";
+import { FlexRender } from "./FlexRender.js";
+import { Subscribe } from "./Subscribe.js";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useTable(tableOptions, selector = () => ({})) {
+  const [table] = useState(() => {
+    const tableInstance = constructTable(tableOptions);
+    tableInstance.Subscribe = function SubscribeBound(props) {
+      return Subscribe({ ...props, table: tableInstance });
+    };
+    tableInstance.FlexRender = FlexRender;
+    return tableInstance;
+  });
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions
+  }));
+  useIsomorphicLayoutEffect(() => {
+    const cleanup = table.store.mount();
+    return cleanup;
+  }, [table]);
+  useIsomorphicLayoutEffect(() => {
+    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 react state to the table store
+  ]);
+  const state = useStore(table.store, selector);
+  return useMemo(
+    () => ({
+      ...table,
+      state
+    }),
+    [state, table]
+  );
+}
+export {
+  useTable
+};
+//# sourceMappingURL=useTable.js.map

package/dist/esm/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { useStore } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A React HOC (Higher Order 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   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n   *     <tr key={row.id}>\n            // render the row\n   *     </tr>\n   *   ))}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children: ((state: TSelected) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.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   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * 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`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as ReactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = function SubscribeBound<TSelected>(\n      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n    ) {\n      return Subscribe({ ...props, table: tableInstance })\n    }\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync table options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  // Mount the derived store to register it on the dependency graph\n  useIsomorphicLayoutEffect(() => {\n    const cleanup = table.store.mount()\n    return cleanup\n  }, [table])\n\n  useIsomorphicLayoutEffect(() => {\n    // prevent race condition between table.setOptions and table.baseStore.setState\n    queueMicrotask(() => {\n      table.baseStore.setState((prev) => ({\n        ...prev,\n      }))\n    })\n  }, [\n    table.options.columns, // re-render when columns change\n    table.options.data, // re-render when data changes\n    table.options.state, // sync react state to the table store\n  ])\n\n  const state = useStore(table.store, selector)\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  )\n}\n"],"names":[],"mappings":";;;;;;AAmBA;AA0DO;AASL;AACE;AAMA;AAGE;AAAmD;AAGrD;AAEA;AAAO;AAIT;AAA4B;AACvB;AACA;AAIL;AACE;AACA;AAAO;AAGT;AAEE;AACE;AAAoC;AAC/B;AACH;AACH;AACA;AACa;AAAA;AACA;AAAA;AACA;AAAA;AAGhB;AAEA;AAAO;AACE;AACF;AACH;AAAA;AAEW;AAEjB;;;;"}