From 8c1f4183b757e0d82afa276413fff7a8095dd7d6 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 7 Mar 2026 22:53:05 +0100
Subject: [PATCH 1/4] feat: add solid createTableHook

---
 packages/solid-table/src/FlexRender.tsx       |   80 +-
 packages/solid-table/src/createTableHelper.ts |   81 --
 packages/solid-table/src/createTableHook.tsx  | 1083 +++++++++++++++++
 packages/solid-table/src/index.tsx            |    2 +-
 4 files changed, 1157 insertions(+), 89 deletions(-)
 delete mode 100644 packages/solid-table/src/createTableHelper.ts
 create mode 100644 packages/solid-table/src/createTableHook.tsx

diff --git a/packages/solid-table/src/FlexRender.tsx b/packages/solid-table/src/FlexRender.tsx
index 21523bb90b..d4d082755b 100644
--- a/packages/solid-table/src/FlexRender.tsx
+++ b/packages/solid-table/src/FlexRender.tsx
@@ -1,5 +1,12 @@
-import { createComponent } from 'solid-js'
+import { Match, Switch, createComponent } from 'solid-js'
 import type { JSX } from 'solid-js'
+import type {
+  Cell,
+  CellData,
+  Header,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
 
 export function flexRender<TProps>(
   Comp: ((_props: TProps) => JSX.Element) | JSX.Element | undefined,
@@ -14,10 +21,69 @@ export function flexRender<TProps>(
   return Comp
 }
 
-export function FlexRender<TProps>(
-  props: {
-    Comp: ((_props: TProps) => JSX.Element) | JSX.Element | undefined
-  } & TProps,
-): JSX.Element {
-  return flexRender(props.Comp, props)
+/**
+ * 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 function FlexRender<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(props: FlexRenderProps<TFeatures, TData, TValue>) {
+  return (
+    <Switch>
+      <Match when={'cell' in props && props.cell}>
+        {(cell) =>
+          flexRender(cell().column.columnDef.cell, cell().getContext())
+        }
+      </Match>
+      <Match when={'header' in props && props.header}>
+        {(header) =>
+          flexRender(header().column.columnDef.header, header().getContext())
+        }
+      </Match>
+      <Match when={'footer' in props && props.footer}>
+        {(footer) =>
+          flexRender(footer().column.columnDef.footer, footer().getContext())
+        }
+      </Match>
+    </Switch>
+  )
 }
diff --git a/packages/solid-table/src/createTableHelper.ts b/packages/solid-table/src/createTableHelper.ts
deleted file mode 100644
index 768899cf12..0000000000
--- a/packages/solid-table/src/createTableHelper.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { constructTableHelper } from '@tanstack/table-core'
-import { createTable } from './createTable'
-import type { SolidTable } from './createTable'
-import type {
-  RowData,
-  TableFeatures,
-  TableHelperOptions,
-  TableHelper_Core,
-  TableOptions,
-  TableState,
-} from '@tanstack/table-core'
-
-export type TableHelper<
-  TFeatures extends TableFeatures,
-  TData extends RowData = any,
-> = Omit<TableHelper_Core<TFeatures>, 'tableCreator'> & {
-  createTable: <TSelected = {}>(
-    tableOptions: Omit<
-      TableOptions<TFeatures, TData>,
-      '_features' | '_rowModels'
-    >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
-  ) => SolidTable<TFeatures, TData, TSelected>
-}
-
-export function createTableHelper<
-  TFeatures extends TableFeatures,
-  TData extends RowData = any,
->(
-  tableHelperOptions: TableHelperOptions<TFeatures>,
-): TableHelper<TFeatures, TData> {
-  const tableHelper = constructTableHelper(
-    createTable as any,
-    tableHelperOptions,
-  )
-  return {
-    ...tableHelper,
-    createTable: <TSelected = {}>(
-      tableOptions: Omit<
-        TableOptions<TFeatures, TData>,
-        '_features' | '_rowModels'
-      >,
-      selector?: (state: TableState<TFeatures>) => TSelected,
-    ) => {
-      return createTable<TFeatures, TData, TSelected>(
-        { ...tableHelper.options, ...tableOptions } as TableOptions<
-          TFeatures,
-          TData
-        >,
-        selector,
-      )
-    },
-  } as any
-}
-
-// test
-
-// type Person = {
-//   firstName: string
-//   lastName: string
-//   age: number
-// }
-
-// const tableHelper = createTableHelper({
-//   _features: { rowSelectionFeature: {} },
-//   TData: {} as Person,
-// })
-
-// const columns = [
-//   tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }),
-//   tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }),
-//   tableHelper.columnHelper.accessor('age', { header: 'Age' }),
-//   tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }),
-// ] as Array<ColumnDef<typeof tableHelper.features, Person, unknown>>
-
-// const data: Array<Person> = []
-
-// tableHelper.createTable({
-//   columns,
-//   data,
-// })
diff --git a/packages/solid-table/src/createTableHook.tsx b/packages/solid-table/src/createTableHook.tsx
new file mode 100644
index 0000000000..f9c36902b3
--- /dev/null
+++ b/packages/solid-table/src/createTableHook.tsx
@@ -0,0 +1,1083 @@
+import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
+import { createContext, createMemo, mergeProps, useContext } from 'solid-js'
+import { createTable } from './createTable'
+import { FlexRender } from './FlexRender'
+import type { SolidTable } from './createTable'
+import type { Accessor, Component, JSXElement } from 'solid-js'
+import type {
+  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'
+
+type ComponentType<T extends Record<string, any>> = Component<T>
+
+// =============================================================================
+// Enhanced Context Types with Pre-bound Components
+// =============================================================================
+
+/**
+ * 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: () => JSXElement }
+  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: () => JSXElement }
+  table: Table<TFeatures, TData>
+}
+
+// =============================================================================
+// Enhanced Column Definition Types
+// =============================================================================
+
+/**
+ * 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 Type
+// =============================================================================
+
+/**
+ * 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>
+}
+
+// =============================================================================
+// CreateTableHook Options and Props
+// =============================================================================
+
+/**
+ * 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: JSXElement
+  selector?: never
+}
+
+/**
+ * Props for AppTable component - with selector
+ */
+export interface AppTablePropsWithSelector<
+  TFeatures extends TableFeatures,
+  TSelected,
+> {
+  children: (state: TSelected) => JSXElement
+  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: () => JSXElement },
+  ) => JSXElement
+  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: () => JSXElement },
+    state: Accessor<TSelected>,
+  ) => JSXElement
+  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: () => JSXElement },
+  ) => JSXElement
+  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: () => JSXElement },
+    state: Accessor<TSelected>,
+  ) => JSXElement
+  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
+    >,
+  ): JSXElement
+  <TValue extends CellData = CellData, TSelected = unknown>(
+    props: AppCellPropsWithSelector<
+      TFeatures,
+      TData,
+      TValue,
+      TCellComponents,
+      TSelected
+    >,
+  ): JSXElement
+}
+
+/**
+ * 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
+    >,
+  ): JSXElement
+  <TValue extends CellData = CellData, TSelected = unknown>(
+    props: AppHeaderPropsWithSelector<
+      TFeatures,
+      TData,
+      TValue,
+      THeaderComponents,
+      TSelected
+    >,
+  ): JSXElement
+}
+
+/**
+ * Component type for AppTable - root wrapper with optional Subscribe
+ */
+export interface AppTableComponent<TFeatures extends TableFeatures> {
+  (props: AppTablePropsWithoutSelector): JSXElement
+  <TSelected>(
+    props: AppTablePropsWithSelector<TFeatures, TSelected>,
+  ): JSXElement
+}
+
+/**
+ * Extended table API returned by useAppTable with all App wrapper components
+ */
+export type AppSolidTable<
+  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>>,
+> = SolidTable<TFeatures, TData, TSelected> &
+  NoInfer<TTableComponents> & {
+    /**
+     * Root wrapper component that provides table context with optional Subscribe.
+     * @example
+     * ```tsx
+     * // Without selector - children is JSXElement
+     * <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 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
+>) {
+  // Create contexts internally with TFeatures baked in
+  const TableContext = createContext<SolidTable<TFeatures, any, any>>(
+    null as never,
+  )
+  const CellContext = createContext<Cell<TFeatures, any, any>>(null as never)
+  const HeaderContext = createContext<Header<TFeatures, any, any>>(
+    null as never,
+  )
+
+  /**
+   * Create a column helper pre-bound to the features and components configured in this table hook.
+   * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
+   * @example
+   * ```tsx
+   * const columnHelper = createAppColumnHelper<Person>()
+   *
+   * const columns = [
+   *   columnHelper.accessor('firstName', {
+   *     header: 'First Name',
+   *     cell: ({ cell }) => <cell.TextCell />, // cell has pre-bound components!
+   *   }),
+   *   columnHelper.accessor('age', {
+   *     header: 'Age',
+   *     cell: ({ cell }) => <cell.NumberCell />,
+   *   }),
+   * ]
+   * ```
+   */
+  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<
+    TFeatures,
+    TData,
+    TCellComponents,
+    THeaderComponents
+  > {
+    // The runtime implementation is the same - components are attached at render time
+    // This cast provides the enhanced types for column definitions
+    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<
+      TFeatures,
+      TData,
+      TCellComponents,
+      THeaderComponents
+    >
+  }
+
+  /**
+   * Access the table instance from within an `AppTable` wrapper.
+   * Use this in custom `tableComponents` passed to `createTableHook`.
+   * TFeatures is already known from the createTableHook call.
+   *
+   * @example
+   * ```tsx
+   * function PaginationControls() {
+   *   const table = useTableContext()
+   *   return (
+   *     <table.Subscribe selector={(s) => s.pagination}>
+   *       {(pagination) => (
+   *         <div>
+   *           <button onClick={() => table.previousPage()}>Prev</button>
+   *           <span>Page {pagination.pageIndex + 1}</span>
+   *           <button onClick={() => table.nextPage()}>Next</button>
+   *         </div>
+   *       )}
+   *     </table.Subscribe>
+   *   )
+   * }
+   * ```
+   */
+  function useTableContext<TData extends RowData = RowData>(): SolidTable<
+    TFeatures,
+    TData
+  > {
+    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
+  }
+
+  /**
+   * Access the cell instance from within an `AppCell` wrapper.
+   * Use this in custom `cellComponents` passed to `createTableHook`.
+   * TFeatures is already known from the createTableHook call.
+   *
+   * @example
+   * ```tsx
+   * function TextCell() {
+   *   const cell = useCellContext<string>()
+   *   return <span>{cell.getValue()}</span>
+   * }
+   *
+   * function NumberCell({ format }: { format?: Intl.NumberFormatOptions }) {
+   *   const cell = useCellContext<number>()
+   *   return <span>{cell.getValue().toLocaleString(undefined, format)}</span>
+   * }
+   * ```
+   */
+  function useCellContext<TValue extends CellData = CellData>(): Cell<
+    TFeatures,
+    any,
+    TValue
+  > {
+    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
+  }
+
+  /**
+   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.
+   * Use this in custom `headerComponents` passed to `createTableHook`.
+   * TFeatures is already known from the createTableHook call.
+   *
+   * @example
+   * ```tsx
+   * function SortIndicator() {
+   *   const header = useHeaderContext()
+   *   const sorted = header.column.getIsSorted()
+   *   return sorted === 'asc' ? '🔼' : sorted === 'desc' ? '🔽' : null
+   * }
+   *
+   * function ColumnFilter() {
+   *   const header = useHeaderContext()
+   *   if (!header.column.getCanFilter()) return null
+   *   return (
+   *     <input
+   *       value={(header.column.getFilterValue() ?? '') as string}
+   *       onChange={(e) => header.column.setFilterValue(e.target.value)}
+   *       placeholder="Filter..."
+   *     />
+   *   )
+   * }
+   * ```
+   */
+  function useHeaderContext<TValue extends CellData = CellData>(): Header<
+    TFeatures,
+    any,
+    TValue
+  > {
+    const header = useContext(HeaderContext)
+
+    if (!header) {
+      throw new Error(
+        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',
+      )
+    }
+
+    return header
+  }
+
+  /**
+   * Context-aware FlexRender component for cells.
+   * Uses the cell from context, so no need to pass cell prop.
+   */
+  function CellFlexRender() {
+    const cell = useCellContext()
+    return <FlexRender cell={cell} />
+  }
+
+  /**
+   * Context-aware FlexRender component for headers.
+   * Uses the header from context, so no need to pass header prop.
+   */
+  function HeaderFlexRender() {
+    const header = useHeaderContext()
+    return <FlexRender header={header} />
+  }
+
+  /**
+   * Context-aware FlexRender component for footers.
+   * Uses the header from context, so no need to pass footer prop.
+   */
+  function FooterFlexRender() {
+    const header = useHeaderContext()
+    return <FlexRender footer={header} />
+  }
+
+  /**
+   * Enhanced useTable hook that returns a table with App wrapper components
+   * and pre-bound tableComponents attached directly to the table object.
+   *
+   * Default options from createTableHook are automatically merged with
+   * the options passed here. Options passed here take precedence.
+   *
+   * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
+   */
+  function createAppTable<TData extends RowData, TSelected = {}>(
+    tableOptions: Omit<
+      TableOptions<TFeatures, TData>,
+      '_features' | '_rowModels'
+    >,
+    selector?: (state: TableState<TFeatures>) => TSelected,
+  ): AppSolidTable<
+    TFeatures,
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
+  > {
+    // Merge default options with provided options (provided takes precedence)
+    const mergedProps = mergeProps(defaultTableOptions, tableOptions)
+    const table = createTable<TFeatures, TData, TSelected>(
+      mergedProps as TableOptions<TFeatures, TData>,
+      selector,
+    )
+
+    // AppTable - Root wrapper that provides table context with optional Subscribe
+    const AppTable = createMemo(() => {
+      function AppTableImpl(props: AppTablePropsWithoutSelector): JSXElement
+      function AppTableImpl<TAppTableSelected>(
+        props: AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
+      ): JSXElement
+      function AppTableImpl<TAppTableSelected>(
+        props:
+          | AppTablePropsWithoutSelector
+          | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
+      ): JSXElement {
+        const { children, selector: appTableSelector } = props as any
+
+        return (
+          <TableContext.Provider value={table}>
+            {appTableSelector ? (
+              <table.Subscribe selector={appTableSelector}>
+                {(state: Accessor<TAppTableSelected>) => children(state)}
+              </table.Subscribe>
+            ) : (
+              children
+            )}
+          </TableContext.Provider>
+        )
+      }
+      return AppTableImpl as AppTableComponent<TFeatures>
+    }, [table])
+
+    // AppCell - Wraps cell with context, pre-bound cellComponents, and optional Subscribe
+    const AppCell = createMemo(() => {
+      function AppCellImpl<TValue extends CellData = CellData>(
+        props: AppCellPropsWithoutSelector<
+          TFeatures,
+          TData,
+          TValue,
+          TCellComponents
+        >,
+      ): JSXElement
+      function AppCellImpl<
+        TValue extends CellData = CellData,
+        TAppCellSelected = unknown,
+      >(
+        props: AppCellPropsWithSelector<
+          TFeatures,
+          TData,
+          TValue,
+          TCellComponents,
+          TAppCellSelected
+        >,
+      ): JSXElement
+      function AppCellImpl<
+        TValue extends CellData = CellData,
+        TAppCellSelected = unknown,
+      >(
+        props:
+          | AppCellPropsWithoutSelector<
+              TFeatures,
+              TData,
+              TValue,
+              TCellComponents
+            >
+          | AppCellPropsWithSelector<
+              TFeatures,
+              TData,
+              TValue,
+              TCellComponents,
+              TAppCellSelected
+            >,
+      ): JSXElement {
+        const { cell, children, selector: appCellSelector } = props as any
+        const extendedCell = Object.assign(cell, {
+          FlexRender: CellFlexRender,
+          ...cellComponents,
+        })
+
+        return (
+          <CellContext.Provider value={cell}>
+            {appCellSelector ? (
+              <table.Subscribe selector={appCellSelector}>
+                {(state: Accessor<TAppCellSelected>) =>
+                  children(extendedCell, state)
+                }
+              </table.Subscribe>
+            ) : (
+              children(extendedCell)
+            )}
+          </CellContext.Provider>
+        )
+      }
+      return AppCellImpl as AppCellComponent<TFeatures, TData, TCellComponents>
+    }, [table])
+
+    // AppHeader - Wraps header with context, pre-bound headerComponents, and optional Subscribe
+    const AppHeader = createMemo(() => {
+      function AppHeaderImpl<TValue extends CellData = CellData>(
+        props: AppHeaderPropsWithoutSelector<
+          TFeatures,
+          TData,
+          TValue,
+          THeaderComponents
+        >,
+      ): JSXElement
+      function AppHeaderImpl<
+        TValue extends CellData = CellData,
+        TAppHeaderSelected = unknown,
+      >(
+        props: AppHeaderPropsWithSelector<
+          TFeatures,
+          TData,
+          TValue,
+          THeaderComponents,
+          TAppHeaderSelected
+        >,
+      ): JSXElement
+      function AppHeaderImpl<
+        TValue extends CellData = CellData,
+        TAppHeaderSelected = unknown,
+      >(
+        props:
+          | AppHeaderPropsWithoutSelector<
+              TFeatures,
+              TData,
+              TValue,
+              THeaderComponents
+            >
+          | AppHeaderPropsWithSelector<
+              TFeatures,
+              TData,
+              TValue,
+              THeaderComponents,
+              TAppHeaderSelected
+            >,
+      ): JSXElement {
+        const { header, children, selector: appHeaderSelector } = props as any
+        const extendedHeader = Object.assign(header, {
+          FlexRender: HeaderFlexRender,
+          ...headerComponents,
+        })
+
+        return (
+          <HeaderContext.Provider value={header}>
+            {appHeaderSelector ? (
+              <table.Subscribe selector={appHeaderSelector}>
+                {(state: Accessor<TAppHeaderSelected>) =>
+                  children(extendedHeader, state)
+                }
+              </table.Subscribe>
+            ) : (
+              children(extendedHeader)
+            )}
+          </HeaderContext.Provider>
+        )
+      }
+      return AppHeaderImpl as AppHeaderComponent<
+        TFeatures,
+        TData,
+        THeaderComponents
+      >
+    }, [table])
+
+    // AppFooter - Same as AppHeader (footers use Header type)
+    const AppFooter = createMemo(() => {
+      function AppFooterImpl<TValue extends CellData = CellData>(
+        props: AppHeaderPropsWithoutSelector<
+          TFeatures,
+          TData,
+          TValue,
+          THeaderComponents
+        >,
+      ): JSXElement
+      function AppFooterImpl<
+        TValue extends CellData = CellData,
+        TAppFooterSelected = unknown,
+      >(
+        props: AppHeaderPropsWithSelector<
+          TFeatures,
+          TData,
+          TValue,
+          THeaderComponents,
+          TAppFooterSelected
+        >,
+      ): JSXElement
+      function AppFooterImpl<
+        TValue extends CellData = CellData,
+        TAppFooterSelected = unknown,
+      >(
+        props:
+          | AppHeaderPropsWithoutSelector<
+              TFeatures,
+              TData,
+              TValue,
+              THeaderComponents
+            >
+          | AppHeaderPropsWithSelector<
+              TFeatures,
+              TData,
+              TValue,
+              THeaderComponents,
+              TAppFooterSelected
+            >,
+      ): JSXElement {
+        const { header, children, selector: appFooterSelector } = props as any
+        const extendedHeader = Object.assign(header, {
+          FlexRender: FooterFlexRender,
+          ...headerComponents,
+        })
+
+        return (
+          <HeaderContext.Provider value={header}>
+            {appFooterSelector ? (
+              <table.Subscribe selector={appFooterSelector}>
+                {(state: Accessor<TAppFooterSelected>) =>
+                  children(extendedHeader, state)
+                }
+              </table.Subscribe>
+            ) : (
+              (
+                children as (
+                  header: Header<TFeatures, TData, TValue> &
+                    THeaderComponents & { FlexRender: () => JSXElement },
+                ) => JSXElement
+              )(extendedHeader)
+            )}
+          </HeaderContext.Provider>
+        )
+      }
+      return AppFooterImpl as AppHeaderComponent<
+        TFeatures,
+        TData,
+        THeaderComponents
+      >
+    }, [table])
+
+    // Combine everything into the extended table API
+    return Object.assign(table, {
+      AppTable,
+      AppCell,
+      AppHeader,
+      AppFooter,
+      ...tableComponents,
+    }) as AppSolidTable<
+      TFeatures,
+      TData,
+      TSelected,
+      TTableComponents,
+      TCellComponents,
+      THeaderComponents
+    >
+  }
+
+  return {
+    appFeatures: defaultTableOptions._features as TFeatures,
+    createAppColumnHelper,
+    useAppTable: createAppTable,
+    useTableContext,
+    useCellContext,
+    useHeaderContext,
+  }
+}
diff --git a/packages/solid-table/src/index.tsx b/packages/solid-table/src/index.tsx
index c3b394a4fb..93c73360df 100755
--- a/packages/solid-table/src/index.tsx
+++ b/packages/solid-table/src/index.tsx
@@ -2,4 +2,4 @@ export * from '@tanstack/table-core'
 
 export * from './createTable'
 export * from './FlexRender'
-export * from './createTableHelper'
+export * from './createTableHook'

From 5e15ca31c53ef44bd41a113d1f18e942a6d80d3c Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Mon, 9 Mar 2026 21:43:38 +0100
Subject: [PATCH 2/4] feat(solid): createTableHook helper

Add new examples:
- basic app table
- composble tables

Update config.json to render new solid table examples
---
 docs/config.json                              |   5 +-
 examples/solid/basic-app-table/.gitignore     |   2 +
 examples/solid/basic-app-table/README.md      |   6 +
 examples/solid/basic-app-table/index.html     |  16 +
 examples/solid/basic-app-table/package.json   |  22 +
 examples/solid/basic-app-table/src/App.tsx    | 174 +++++++
 examples/solid/basic-app-table/src/index.css  |  26 +
 examples/solid/basic-app-table/src/index.tsx  |   5 +
 examples/solid/basic-app-table/tsconfig.json  |  25 +
 examples/solid/basic-app-table/vite.config.ts |  10 +
 examples/solid/composable-tables/.gitignore   |   2 +
 examples/solid/composable-tables/README.md    |   6 +
 examples/solid/composable-tables/index.html   |  16 +
 examples/solid/composable-tables/package.json |  22 +
 examples/solid/composable-tables/src/App.tsx  | 438 ++++++++++++++++
 .../src/components/cell-components.tsx        | 107 ++++
 .../src/components/header-components.tsx      |  76 +++
 .../src/components/table-components.tsx       | 116 +++++
 .../composable-tables/src/hooks/table.ts      | 105 ++++
 .../solid/composable-tables/src/index.css     | 249 +++++++++
 .../solid/composable-tables/src/index.tsx     |   6 +
 .../solid/composable-tables/src/makeData.ts   |  77 +++
 .../solid/composable-tables/tsconfig.json     |  25 +
 .../solid/composable-tables/vite.config.ts    |  10 +
 packages/solid-table/src/createTableHook.tsx  | 479 +++++++++---------
 pnpm-lock.yaml                                |  38 ++
 26 files changed, 1821 insertions(+), 242 deletions(-)
 create mode 100644 examples/solid/basic-app-table/.gitignore
 create mode 100644 examples/solid/basic-app-table/README.md
 create mode 100644 examples/solid/basic-app-table/index.html
 create mode 100644 examples/solid/basic-app-table/package.json
 create mode 100644 examples/solid/basic-app-table/src/App.tsx
 create mode 100644 examples/solid/basic-app-table/src/index.css
 create mode 100644 examples/solid/basic-app-table/src/index.tsx
 create mode 100644 examples/solid/basic-app-table/tsconfig.json
 create mode 100644 examples/solid/basic-app-table/vite.config.ts
 create mode 100644 examples/solid/composable-tables/.gitignore
 create mode 100644 examples/solid/composable-tables/README.md
 create mode 100644 examples/solid/composable-tables/index.html
 create mode 100644 examples/solid/composable-tables/package.json
 create mode 100644 examples/solid/composable-tables/src/App.tsx
 create mode 100644 examples/solid/composable-tables/src/components/cell-components.tsx
 create mode 100644 examples/solid/composable-tables/src/components/header-components.tsx
 create mode 100644 examples/solid/composable-tables/src/components/table-components.tsx
 create mode 100644 examples/solid/composable-tables/src/hooks/table.ts
 create mode 100644 examples/solid/composable-tables/src/index.css
 create mode 100644 examples/solid/composable-tables/src/index.tsx
 create mode 100644 examples/solid/composable-tables/src/makeData.ts
 create mode 100644 examples/solid/composable-tables/tsconfig.json
 create mode 100644 examples/solid/composable-tables/vite.config.ts

diff --git a/docs/config.json b/docs/config.json
index 8f7f3818be..637337e213 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -823,6 +823,7 @@
           "label": "solid",
           "children": [
             { "to": "framework/solid/examples/basic", "label": "Basic" },
+            { "to": "framework/solid/examples/basic-app-table", "label": "Basic (useAppTable)" },
             { "to": "framework/solid/examples/basic-table-helper", "label": "Basic with Helpers" },
             { "to": "framework/solid/examples/column-groups", "label": "Header Groups" }
           ]
@@ -999,8 +1000,8 @@
         {
           "label": "solid",
           "children": [
-            { "to": "framework/solid/examples/bootstrap", "label": "Solid Bootstrap" }
-          ]
+            { "to": "framework/solid/examples/bootstrap", "label": "Solid Bootstrap" },
+            { "to": "framework/solid/examples/composable-tables", "label": "Composable Tables" }]
         },
         {
           "label": "vue",
diff --git a/examples/solid/basic-app-table/.gitignore b/examples/solid/basic-app-table/.gitignore
new file mode 100644
index 0000000000..76add878f8
--- /dev/null
+++ b/examples/solid/basic-app-table/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/examples/solid/basic-app-table/README.md b/examples/solid/basic-app-table/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/solid/basic-app-table/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/solid/basic-app-table/index.html b/examples/solid/basic-app-table/index.html
new file mode 100644
index 0000000000..7d9b4f7c51
--- /dev/null
+++ b/examples/solid/basic-app-table/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/basic-app-table/package.json b/examples/solid/basic-app-table/package.json
new file mode 100644
index 0000000000..513083a3f1
--- /dev/null
+++ b/examples/solid/basic-app-table/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-table-example-solid-basic-app-table",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "solid-js": "^1.9.11"
+  }
+}
diff --git a/examples/solid/basic-app-table/src/App.tsx b/examples/solid/basic-app-table/src/App.tsx
new file mode 100644
index 0000000000..8b1507e30a
--- /dev/null
+++ b/examples/solid/basic-app-table/src/App.tsx
@@ -0,0 +1,174 @@
+import { createTableHook } from '@tanstack/solid-table'
+import { For, createSignal } from 'solid-js'
+
+// This example uses the new `createTableHook` method to create a re-usable table hook factory instead of independently using the standalone `useTable` hook and `createColumnHelper` method. You can choose to use either way.
+
+// 1. Define what the shape of your data will be for each row
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
+const defaultData: Array<Person> = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+  {
+    firstName: 'kevin',
+    lastName: 'vandy',
+    age: 28,
+    visits: 100,
+    status: 'Single',
+    progress: 70,
+  },
+]
+
+// 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
+const { createAppTable, createAppColumnHelper } = createTableHook({
+  _features: {},
+  _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
+  debugTable: true,
+})
+
+// 4. Create a helper object to help define our columns
+const columnHelper = createAppColumnHelper<Person>()
+
+// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
+const columns = columnHelper.columns([
+  // accessorKey method (most common for simple use-cases)
+  columnHelper.accessor('firstName', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+  }),
+  // accessorFn used (alternative) along with a custom id
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    cell: (info) => <i>{info.getValue()}</i>,
+    header: () => <span>Last Name</span>,
+    footer: (info) => info.column.id,
+  }),
+  // accessorFn used to transform the data
+  columnHelper.accessor((row) => Number(row.age), {
+    id: 'age',
+    header: () => 'Age',
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => <span>Visits</span>,
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (info) => info.column.id,
+  }),
+])
+
+export function App() {
+  // 6. Store data with a stable reference
+  const [data, setData] = createSignal([...defaultData])
+
+  // Helper to rerender with sorted data (by age ascending)
+  function rerender() {
+    setData((prev) =>
+      prev.slice().sort((a: Person, b: Person) => a.age - b.age),
+    )
+  }
+
+  // 7. Create the table instance with the required columns and data.
+  // Features and row models are already defined in the createTableHook call above
+  const table = createAppTable({
+    columns,
+    get data() {
+      return data()
+    },
+    // add additional table options here or in the createTableHook call above
+  })
+
+  // 8. Render your table markup from the table instance APIs
+  return (
+    <div class="p-2">
+      <table>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th>
+                      <table.FlexRender header={header} />
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr>
+                <For each={row.getAllCells()}>
+                  {(cell) => (
+                    <td>
+                      <table.FlexRender cell={cell} />
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+        <tfoot>
+          <For each={table.getFooterGroups()}>
+            {(footerGroup) => (
+              <tr>
+                <For each={footerGroup.headers}>
+                  {(header) => (
+                    <th>
+                      <table.FlexRender footer={header} />
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tfoot>
+      </table>
+      <div class="h-4" />
+      <button onClick={rerender} class="border p-2">
+        Rerender (sort by age)
+      </button>
+    </div>
+  )
+}
diff --git a/examples/solid/basic-app-table/src/index.css b/examples/solid/basic-app-table/src/index.css
new file mode 100644
index 0000000000..43c09e0f6b
--- /dev/null
+++ b/examples/solid/basic-app-table/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
diff --git a/examples/solid/basic-app-table/src/index.tsx b/examples/solid/basic-app-table/src/index.tsx
new file mode 100644
index 0000000000..30c97d2fdb
--- /dev/null
+++ b/examples/solid/basic-app-table/src/index.tsx
@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web'
+import './index.css'
+import { App } from './App'
+
+render(() => <App />, document.getElementById('root') as HTMLElement)
diff --git a/examples/solid/basic-app-table/tsconfig.json b/examples/solid/basic-app-table/tsconfig.json
new file mode 100644
index 0000000000..7ab027b8d2
--- /dev/null
+++ b/examples/solid/basic-app-table/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/solid/basic-app-table/vite.config.ts b/examples/solid/basic-app-table/vite.config.ts
new file mode 100644
index 0000000000..d27427972d
--- /dev/null
+++ b/examples/solid/basic-app-table/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+})
diff --git a/examples/solid/composable-tables/.gitignore b/examples/solid/composable-tables/.gitignore
new file mode 100644
index 0000000000..f06235c460
--- /dev/null
+++ b/examples/solid/composable-tables/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/solid/composable-tables/README.md b/examples/solid/composable-tables/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/solid/composable-tables/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/solid/composable-tables/index.html b/examples/solid/composable-tables/index.html
new file mode 100644
index 0000000000..7d9b4f7c51
--- /dev/null
+++ b/examples/solid/composable-tables/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/composable-tables/package.json b/examples/solid/composable-tables/package.json
new file mode 100644
index 0000000000..a475bb82db
--- /dev/null
+++ b/examples/solid/composable-tables/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-table-example-solid-composable-tables",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "solid-js": "^1.9.11"
+  }
+}
diff --git a/examples/solid/composable-tables/src/App.tsx b/examples/solid/composable-tables/src/App.tsx
new file mode 100644
index 0000000000..c7c64bd112
--- /dev/null
+++ b/examples/solid/composable-tables/src/App.tsx
@@ -0,0 +1,438 @@
+import { For, createSignal } from 'solid-js'
+import { createAppColumnHelper, createAppTable } from './hooks/table'
+import { makeData, makeProductData } from './makeData'
+import type { Person, Product } from './makeData'
+// Import cell components directly - they use useCellContext internally
+
+// Create column helpers with TFeatures already bound - only need TData!
+const personColumnHelper = createAppColumnHelper<Person>()
+const productColumnHelper = createAppColumnHelper<Product>()
+
+// Users Table Component - Original implementation
+function UsersTable() {
+  // Data state
+  const [data, setData] = createSignal(makeData(1000))
+
+  // Refresh data callback
+  const refreshData = () => {
+    setData(() => makeData(1000))
+  }
+
+  // Define columns using the column helper
+  const columns =
+    // NOTE: You must use `createAppColumnHelper` instead of `createColumnHelper` when using pre-bound components like <cell.TextCell />
+    personColumnHelper.columns([
+      personColumnHelper.accessor('firstName', {
+        header: 'First Name',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.TextCell />,
+      }),
+      personColumnHelper.accessor('lastName', {
+        header: 'Last Name',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.TextCell />,
+      }),
+      personColumnHelper.accessor('age', {
+        header: 'Age',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.NumberCell />,
+      }),
+      personColumnHelper.accessor('visits', {
+        header: 'Visits',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.NumberCell />,
+      }),
+      personColumnHelper.accessor('status', {
+        header: 'Status',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.StatusCell />,
+      }),
+      personColumnHelper.accessor('progress', {
+        header: 'Progress',
+        footer: (props) => props.column.id,
+        cell: ({ cell }) => <cell.ProgressCell />,
+      }),
+      personColumnHelper.display({
+        id: 'actions',
+        header: 'Actions',
+        cell: ({ cell }) => <cell.RowActionsCell />,
+      }),
+    ])
+
+  // Create the table - _features and _rowModels are already configured!
+  const table = createAppTable({
+    columns,
+    get data() {
+      return data()
+    },
+    debugTable: true,
+    // more table options
+  })
+
+  return (
+    // Main selector on AppTable - selects all needed state in one place
+    <table.AppTable
+      selector={(state) => ({
+        // subscribe to specific states for re-rendering if you are optimizing for maximum performance
+        pagination: state.pagination,
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+      })}
+    >
+      {(state) => {
+        const sorting = () => state().sorting
+        const columnFilters = () => state().columnFilters
+        return (
+        <div class="table-container">
+          {/* Table toolbar using pre-bound component */}
+          <table.TableToolbar title="Users Table" onRefresh={refreshData} />
+
+          {/* Table element */}
+          <table>
+            <thead>
+              <For each={table.getHeaderGroups()}>
+                {(headerGroup) => (
+                  <tr>
+                    <For each={headerGroup.headers}>
+                      {(h) => (
+                        <table.AppHeader header={h}>
+                          {(header) => (
+                            <th
+                              colSpan={header.colSpan}
+                              class={
+                                header.column.getCanSort()
+                                  ? 'sortable-header'
+                                  : ''
+                              }
+                              onClick={header.column.getToggleSortingHandler()}
+                            >
+                              {header.isPlaceholder ? null : (
+                                <>
+                                  <header.FlexRender />
+                                  <header.SortIndicator />
+                                  <header.ColumnFilter />
+                                  {/* Show sort order number when multiple columns sorted */}
+                                  {sorting().length > 1 &&
+                                    sorting().findIndex(
+                                      (s) => s.id === header.column.id,
+                                    ) > -1 && (
+                                      <span class="sort-order">
+                                        {sorting().findIndex(
+                                          (s) => s.id === header.column.id,
+                                        ) + 1}
+                                      </span>
+                                    )}
+                                </>
+                              )}
+                            </th>
+                          )}
+                        </table.AppHeader>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </thead>
+            <tbody>
+              <For each={table.getRowModel().rows}>
+                {(row) => (
+                  <tr>
+                    <For each={row.getAllCells()}>
+                      {(c) => (
+                        <table.AppCell cell={c}>
+                          {(cell) => (
+                            <td>
+                              {/* Cell components are pre-bound via AppCell */}
+                              <cell.FlexRender />
+                            </td>
+                          )}
+                        </table.AppCell>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+            <tfoot>
+              <For each={table.getFooterGroups()}>
+                {(footerGroup) => (
+                  <tr>
+                    <For each={footerGroup.headers}>
+                      {(f) => (
+                        <table.AppFooter header={f}>
+                          {(footer) => {
+                            const columnId = footer.column.id
+                            const hasFilter = () =>
+                              columnFilters().some((cf) => cf.id === columnId)
+
+                            return (
+                              <td colSpan={footer.colSpan}>
+                                {footer.isPlaceholder ? null : (
+                                  <>
+                                    {/* Use FooterSum for numeric columns, FooterColumnId for others */}
+                                    {columnId === 'age' ||
+                                    columnId === 'visits' ||
+                                    columnId === 'progress' ? (
+                                      <>
+                                        <footer.FooterSum />
+                                        {hasFilter() && (
+                                          <span class="filtered-indicator">
+                                            {' '}
+                                            (filtered)
+                                          </span>
+                                        )}
+                                      </>
+                                    ) : columnId === 'actions' ? null : (
+                                      <>
+                                        <footer.FooterColumnId />
+                                        {hasFilter() && (
+                                          <span class="filtered-indicator">
+                                            {' '}
+                                            ✓
+                                          </span>
+                                        )}
+                                      </>
+                                    )}
+                                  </>
+                                )}
+                              </td>
+                            )
+                          }}
+                        </table.AppFooter>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tfoot>
+          </table>
+
+          {/* Pagination using pre-bound component */}
+          <table.PaginationControls />
+
+          {/* Row count using pre-bound component */}
+          <table.RowCount />
+        </div>
+        )
+      }}
+    </table.AppTable>
+  )
+}
+
+// Products Table Component - New implementation using same hook and components
+function ProductsTable() {
+  // Data state
+  const [data, setData] = createSignal(makeProductData(500))
+
+  // Refresh data callback
+  const refreshData = () => {
+    setData(makeProductData(500))
+  }
+
+  // Define columns using the column helper - different structure than Users table
+  const columns = productColumnHelper.columns([
+    productColumnHelper.accessor('name', {
+      header: 'Product Name',
+      footer: (props) => props.column.id,
+      cell: ({ cell }) => <cell.TextCell />,
+    }),
+    productColumnHelper.accessor('category', {
+      header: 'Category',
+      footer: (props) => props.column.id,
+      cell: ({ cell }) => <cell.CategoryCell />,
+    }),
+    productColumnHelper.accessor('price', {
+      header: 'Price',
+      footer: (props) => props.column.id,
+      cell: ({ cell }) => <cell.PriceCell />,
+    }),
+    productColumnHelper.accessor('stock', {
+      header: 'In Stock',
+      footer: (props) => props.column.id,
+      cell: ({ cell }) => <cell.NumberCell />,
+    }),
+    productColumnHelper.accessor('rating', {
+      header: 'Rating',
+      footer: (props) => props.column.id,
+      cell: ({ cell }) => <cell.ProgressCell />,
+    }),
+  ])
+
+  // Create the table using the same createAppTable hook
+  const table = createAppTable({
+    columns,
+    get data() {
+      return data()
+    },
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <table.AppTable
+      selector={(state) => ({
+        pagination: state.pagination,
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+      })}
+    >
+      {(state) => {
+        const sorting = () => state().sorting
+        const columnFilters = () => state().columnFilters
+        return (
+        <div class="table-container">
+          {/* Table toolbar using the same pre-bound component */}
+          <table.TableToolbar title="Products Table" onRefresh={refreshData} />
+
+          {/* Table element */}
+          <table>
+            <thead>
+              <For each={table.getHeaderGroups()}>
+                {(headerGroup) => (
+                  <tr>
+                    <For each={headerGroup.headers}>
+                      {(h) => (
+                        <table.AppHeader header={h}>
+                          {(header) => (
+                            <th
+                              colSpan={header.colSpan}
+                              class={
+                                header.column.getCanSort()
+                                  ? 'sortable-header'
+                                  : ''
+                              }
+                              onClick={header.column.getToggleSortingHandler()}
+                            >
+                              {header.isPlaceholder ? null : (
+                                <>
+                                  <header.FlexRender />
+                                  <header.SortIndicator />
+                                  <header.ColumnFilter />
+                                  {sorting().length > 1 &&
+                                    sorting().findIndex(
+                                      (s) => s.id === header.column.id,
+                                    ) > -1 && (
+                                      <span class="sort-order">
+                                        {sorting().findIndex(
+                                          (s) => s.id === header.column.id,
+                                        ) + 1}
+                                      </span>
+                                    )}
+                                </>
+                              )}
+                            </th>
+                          )}
+                        </table.AppHeader>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </thead>
+            <tbody>
+              <For each={table.getRowModel().rows}>
+                {(row) => (
+                  <tr>
+                    <For each={row.getAllCells()}>
+                      {(c) => (
+                        <table.AppCell cell={c}>
+                          {(cell) => (
+                            <td>
+                              {/* Cell components are pre-bound via AppCell */}
+                              <cell.FlexRender />
+                            </td>
+                          )}
+                        </table.AppCell>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+            <tfoot>
+              <For each={table.getFooterGroups()}>
+                {(footerGroup) => (
+                  <tr>
+                    <For each={footerGroup.headers}>
+                      {(f) => (
+                        <table.AppFooter header={f}>
+                          {(footer) => {
+                            const columnId = footer.column.id
+                            const hasFilter = () =>
+                              columnFilters().some((cf) => cf.id === columnId)
+
+                            return (
+                              <td colSpan={footer.colSpan}>
+                                {footer.isPlaceholder ? null : (
+                                  <>
+                                    {/* Use FooterSum for numeric columns, FooterColumnId for others */}
+                                    {columnId === 'price' ||
+                                    columnId === 'stock' ||
+                                    columnId === 'rating' ? (
+                                      <>
+                                        <footer.FooterSum />
+                                        {hasFilter() && (
+                                          <span class="filtered-indicator">
+                                            {' '}
+                                            (filtered)
+                                          </span>
+                                        )}
+                                      </>
+                                    ) : (
+                                      <>
+                                        <footer.FooterColumnId />
+                                        {hasFilter() && (
+                                          <span class="filtered-indicator">
+                                            {' '}
+                                            ✓
+                                          </span>
+                                        )}
+                                      </>
+                                    )}
+                                  </>
+                                )}
+                              </td>
+                            )
+                          }}
+                        </table.AppFooter>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tfoot>
+          </table>
+
+          {/* Pagination using the same pre-bound component */}
+          <table.PaginationControls />
+
+          {/* Row count using the same pre-bound component */}
+          <table.RowCount />
+        </div>
+        )
+      }}
+    </table.AppTable>
+  )
+}
+
+function App() {
+  return (
+    <div class="app">
+      <h1>Composable Tables Example</h1>
+      <p class="description">
+        Both tables below use the same <code>createAppTable</code> hook and
+        shareable components, but with different data types and column
+        configurations.
+      </p>
+
+      {/* Original Users Table */}
+      <UsersTable />
+
+      <div class="table-divider" />
+
+      {/* New Products Table */}
+      <ProductsTable />
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/solid/composable-tables/src/components/cell-components.tsx b/examples/solid/composable-tables/src/components/cell-components.tsx
new file mode 100644
index 0000000000..af78520679
--- /dev/null
+++ b/examples/solid/composable-tables/src/components/cell-components.tsx
@@ -0,0 +1,107 @@
+/**
+ * Cell-level components that use useCellContext
+ *
+ * These components can be used via the pre-bound cellComponents
+ * in AppCell children, e.g., <cell.TextCell />
+ */
+import { useCellContext } from '../hooks/table'
+
+/**
+ * Generic text cell renderer
+ */
+export function TextCell() {
+  const cell = useCellContext<string>()
+  return <span>{cell.getValue()}</span>
+}
+
+/**
+ * Number cell with locale formatting
+ */
+export function NumberCell() {
+  const cell = useCellContext<number>()
+  return <span>{cell.getValue().toLocaleString()}</span>
+}
+
+/**
+ * Status badge cell for status column
+ */
+export function StatusCell() {
+  const cell = useCellContext<'relationship' | 'complicated' | 'single'>()
+  const status = cell.getValue()
+  return <span class={`status-badge ${status}`}>{status}</span>
+}
+
+/**
+ * Progress bar cell
+ */
+export function ProgressCell() {
+  const cell = useCellContext<number>()
+  const progress = cell.getValue()
+  return (
+    <div class="progress-bar">
+      <div class="progress-bar-fill" style={{ width: `${progress}%` }} />
+    </div>
+  )
+}
+
+/**
+ * Row actions cell - actions for the current row
+ */
+export function RowActionsCell() {
+  const cell = useCellContext()
+  const row = cell.row
+
+  return (
+    <div class="row-actions">
+      <button
+        onClick={() =>
+          alert(`View: ${row.original.firstName} ${row.original.lastName}`)
+        }
+        title="View"
+      >
+        👁️
+      </button>
+      <button
+        onClick={() =>
+          alert(`Edit: ${row.original.firstName} ${row.original.lastName}`)
+        }
+        title="Edit"
+      >
+        ✏️
+      </button>
+      <button
+        onClick={() =>
+          alert(`Delete: ${row.original.firstName} ${row.original.lastName}`)
+        }
+        title="Delete"
+      >
+        🗑️
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Price cell with currency formatting
+ */
+export function PriceCell() {
+  const cell = useCellContext<number>()
+  return (
+    <span class="price">
+      $
+      {cell.getValue().toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}
+    </span>
+  )
+}
+
+/**
+ * Category badge cell
+ */
+export function CategoryCell() {
+  const cell = useCellContext<'electronics' | 'clothing' | 'food' | 'books'>()
+  const category = cell.getValue()
+  return <span class={`category-badge ${category}`}>{category}</span>
+}
diff --git a/examples/solid/composable-tables/src/components/header-components.tsx b/examples/solid/composable-tables/src/components/header-components.tsx
new file mode 100644
index 0000000000..63394cfb77
--- /dev/null
+++ b/examples/solid/composable-tables/src/components/header-components.tsx
@@ -0,0 +1,76 @@
+/**
+ * Header-level components that use useHeaderContext
+ *
+ * These components can be used via the pre-bound headerComponents
+ * in AppHeader children, e.g., <header.SortIndicator />
+ */
+import { Show } from 'solid-js'
+import { useHeaderContext } from '../hooks/table'
+
+/**
+ * Sort indicator showing current sort direction
+ */
+export function SortIndicator() {
+  const header = useHeaderContext()
+  const sorted = () => header.column.getIsSorted()
+
+  return (
+    <Show when={sorted()}>
+      {(sorted) => (
+        <span class="sort-indicator">{sorted() === 'asc' ? '🔼' : '🔽'}</span>
+      )}
+    </Show>
+  )
+}
+
+/**
+ * Column filter input
+ */
+export function ColumnFilter() {
+  const header = useHeaderContext()
+  const canFilter = () => header.column.getCanFilter()
+
+  const columnFilterValue = () =>
+    (header.column.getFilterValue() ?? '') as string
+
+  return (
+    <Show when={canFilter()}>
+      <div class="column-filter" onClick={(e) => e.stopPropagation()}>
+        <input
+          type="text"
+          value={columnFilterValue()}
+          onChange={(e) => header.column.setFilterValue(e.target.value)}
+          placeholder={`Filter ${header.column.id}...`}
+        />
+      </div>
+    </Show>
+  )
+}
+
+/**
+ * Footer showing the column ID
+ */
+export function FooterColumnId() {
+  const header = useHeaderContext()
+  return <span class="footer-column-id">{header.column.id}</span>
+}
+
+/**
+ * Footer showing a summary/aggregation for numeric columns
+ */
+export function FooterSum() {
+  const header = useHeaderContext()
+  const table = header.getContext().table
+  const rows = table.getFilteredRowModel().rows
+
+  // Calculate sum for numeric columns
+  const sum = () =>
+    rows.reduce((acc, row) => {
+      const value = row.getValue(header.column.id)
+      return acc + (typeof value === 'number' ? value : 0)
+    }, 0)
+
+  return (
+    <span class="footer-sum">{sum() > 0 ? sum().toLocaleString() : '—'}</span>
+  )
+}
diff --git a/examples/solid/composable-tables/src/components/table-components.tsx b/examples/solid/composable-tables/src/components/table-components.tsx
new file mode 100644
index 0000000000..d1fd76bd3b
--- /dev/null
+++ b/examples/solid/composable-tables/src/components/table-components.tsx
@@ -0,0 +1,116 @@
+/**
+ * Table-level components that use useTableContext
+ *
+ * These components can be used via the pre-bound tableComponents
+ * directly on the table object, e.g., <table.PaginationControls />
+ */
+import { For, createMemo } from 'solid-js'
+import { useTableContext } from '../hooks/table'
+
+/**
+ * Pagination controls for the table
+ */
+export function PaginationControls() {
+  const table = useTableContext()
+
+  const pagination = createMemo(() => table.store.state.pagination)
+
+  return (
+    <div class="pagination">
+      <button
+        onClick={() => table.firstPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        {'<<'}
+      </button>
+      <button
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        {'<'}
+      </button>
+      <button
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        {'>'}
+      </button>
+      <button
+        onClick={() => table.lastPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        {'>>'}
+      </button>
+      <span>
+        Page{' '}
+        <strong>
+          {pagination().pageIndex + 1} of{' '}
+          {table.getPageCount().toLocaleString()}
+        </strong>
+      </span>
+      <span>
+        | Go to page:
+        <input
+          type="number"
+          min="1"
+          max={table.getPageCount()}
+          value={pagination().pageIndex + 1}
+          onChange={(e) => {
+            const page = e.target.value ? Number(e.target.value) - 1 : 0
+            table.setPageIndex(page)
+          }}
+        />
+      </span>
+      <select
+        value={pagination().pageSize}
+        onChange={(e) => {
+          table.setPageSize(Number(e.target.value))
+        }}
+      >
+        <For each={[10, 20, 30, 40, 50]}>
+          {(pageSize) => <option value={pageSize}>Show {pageSize}</option>}
+        </For>
+      </select>
+    </div>
+  )
+}
+
+/**
+ * Row count display
+ */
+export function RowCount() {
+  const table = useTableContext()
+
+  return (
+    <div class="row-count">
+      Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
+      {table.getRowCount().toLocaleString()} rows
+    </div>
+  )
+}
+
+/**
+ * Table toolbar with title and actions
+ */
+export function TableToolbar({
+  title,
+  onRefresh,
+}: {
+  title: string
+  onRefresh?: () => void
+}) {
+  const table = useTableContext()
+
+  return (
+    <div class="table-toolbar">
+      <h2>{title}</h2>
+      <div>
+        <button onClick={() => table.resetColumnFilters()}>
+          Clear Filters
+        </button>
+        <button onClick={() => table.resetSorting()}>Clear Sorting</button>
+        {onRefresh && <button onClick={onRefresh}>Refresh Data</button>}
+      </div>
+    </div>
+  )
+}
diff --git a/examples/solid/composable-tables/src/hooks/table.ts b/examples/solid/composable-tables/src/hooks/table.ts
new file mode 100644
index 0000000000..308b20db27
--- /dev/null
+++ b/examples/solid/composable-tables/src/hooks/table.ts
@@ -0,0 +1,105 @@
+/**
+ * Custom table hook setup using createTableHook
+ *
+ * This file creates a custom useAppTable hook with pre-bound components.
+ * Features, row models, and default options are defined once here and shared across all tables.
+ * Context hooks and a pre-bound createAppColumnHelper are also exported.
+ */
+import {
+  columnFilteringFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTableHook,
+  filterFns,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/solid-table'
+
+// Import table-level components
+import {
+  PaginationControls,
+  RowCount,
+  TableToolbar,
+} from '../components/table-components'
+
+// Import cell-level components
+import {
+  CategoryCell,
+  NumberCell,
+  PriceCell,
+  ProgressCell,
+  RowActionsCell,
+  StatusCell,
+  TextCell,
+} from '../components/cell-components'
+
+// Import header/footer-level components (both use useHeaderContext)
+import {
+  ColumnFilter,
+  FooterColumnId,
+  FooterSum,
+  SortIndicator,
+} from '../components/header-components'
+
+/**
+ * Create the custom table hook with all pre-bound components.
+ * This exports:
+ * - createAppColumnHelper: Create column definitions with TFeatures already bound
+ * - useAppTable: Hook for creating tables with TFeatures baked in
+ * - useTableContext: Access table instance in tableComponents
+ * - useCellContext: Access cell instance in cellComponents
+ * - useHeaderContext: Access header instance in headerComponents
+ */
+export const {
+  createAppColumnHelper,
+  createAppTable,
+  useTableContext,
+  useCellContext,
+  useHeaderContext,
+} = createTableHook({
+  // Features are set once here and shared across all tables
+  _features: tableFeatures({
+    columnFilteringFeature,
+    rowPaginationFeature,
+    rowSortingFeature,
+  }),
+
+  // Row models are set once here
+  _rowModels: {
+    sortedRowModel: createSortedRowModel(sortFns),
+    filteredRowModel: createFilteredRowModel(filterFns),
+    paginatedRowModel: createPaginatedRowModel(),
+  },
+
+  // set any default table options here too
+  getRowId: (row) => row.id,
+
+  // Register table-level components (accessible via table.ComponentName)
+  tableComponents: {
+    PaginationControls,
+    RowCount,
+    TableToolbar,
+  },
+
+  // Register cell-level components (accessible via cell.ComponentName in AppCell)
+  cellComponents: {
+    TextCell,
+    NumberCell,
+    StatusCell,
+    ProgressCell,
+    RowActionsCell,
+    PriceCell,
+    CategoryCell,
+  },
+
+  // Register header/footer-level components (accessible via header.ComponentName in AppHeader/AppFooter)
+  headerComponents: {
+    SortIndicator,
+    ColumnFilter,
+    FooterColumnId,
+    FooterSum,
+  },
+})
diff --git a/examples/solid/composable-tables/src/index.css b/examples/solid/composable-tables/src/index.css
new file mode 100644
index 0000000000..d7a5ed6c49
--- /dev/null
+++ b/examples/solid/composable-tables/src/index.css
@@ -0,0 +1,249 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th,
+td {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+th {
+  background-color: #f5f5f5;
+  font-weight: 600;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
+
+.table-container {
+  padding: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+.pagination button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  background: white;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination input {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px;
+  width: 64px;
+}
+
+.pagination select {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.sort-indicator {
+  margin-left: 4px;
+}
+
+.column-filter {
+  margin-top: 4px;
+}
+
+.column-filter input {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px;
+  width: 100%;
+  font-size: 12px;
+}
+
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.sortable-header:hover {
+  background-color: #e8e8e8;
+}
+
+.row-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.row-actions button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 2px 8px;
+  cursor: pointer;
+  background: white;
+  font-size: 12px;
+}
+
+.row-actions button:hover {
+  background-color: #f0f0f0;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-badge.relationship {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-badge.complicated {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.status-badge.single {
+  background-color: #cce5ff;
+  color: #004085;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background-color: #007bff;
+  transition: width 0.2s;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.table-toolbar h2 {
+  margin: 0;
+}
+
+.table-toolbar button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+  background: white;
+}
+
+.table-toolbar button:hover {
+  background-color: #f0f0f0;
+}
+
+.row-count {
+  color: #666;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.app {
+  padding: 16px;
+}
+
+.app h1 {
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.description {
+  text-align: center;
+  color: #666;
+  margin-bottom: 32px;
+}
+
+.description code {
+  background-color: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.table-divider {
+  height: 48px;
+  border-bottom: 1px solid #e0e0e0;
+  margin: 32px auto;
+  max-width: 1200px;
+}
+
+.category-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.category-badge.electronics {
+  background-color: #e3f2fd;
+  color: #1565c0;
+}
+
+.category-badge.clothing {
+  background-color: #fce4ec;
+  color: #c2185b;
+}
+
+.category-badge.food {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.category-badge.books {
+  background-color: #fff8e1;
+  color: #f57c00;
+}
+
+.price {
+  font-weight: 600;
+  color: #2e7d32;
+}
diff --git a/examples/solid/composable-tables/src/index.tsx b/examples/solid/composable-tables/src/index.tsx
new file mode 100644
index 0000000000..ea9c952177
--- /dev/null
+++ b/examples/solid/composable-tables/src/index.tsx
@@ -0,0 +1,6 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import './index.css'
+import App from './App'
+
+render(() => <App />, document.getElementById('root') as HTMLElement)
diff --git a/examples/solid/composable-tables/src/makeData.ts b/examples/solid/composable-tables/src/makeData.ts
new file mode 100644
index 0000000000..17dec1c6de
--- /dev/null
+++ b/examples/solid/composable-tables/src/makeData.ts
@@ -0,0 +1,77 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Array<Person>
+}
+
+export type Product = {
+  id: string
+  name: string
+  category: 'electronics' | 'clothing' | 'food' | 'books'
+  price: number
+  stock: number
+  rating: number
+}
+
+const range = (len: number) => {
+  const arr: Array<number> = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0],
+  }
+}
+
+const newProduct = (): Product => {
+  return {
+    id: faker.string.uuid(),
+    name: faker.commerce.productName(),
+    category: faker.helpers.shuffle<Product['category']>([
+      'electronics',
+      'clothing',
+      'food',
+      'books',
+    ])[0],
+    price: parseFloat(faker.commerce.price({ min: 5, max: 500 })),
+    stock: faker.number.int({ min: 0, max: 200 }),
+    rating: faker.number.int({ min: 0, max: 100 }),
+  }
+}
+
+export function makeData(...lens: Array<number>) {
+  const makeDataLevel = (depth = 0): Array<Person> => {
+    const len = lens[depth]
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
+
+export function makeProductData(count: number): Array<Product> {
+  return range(count).map(() => newProduct())
+}
diff --git a/examples/solid/composable-tables/tsconfig.json b/examples/solid/composable-tables/tsconfig.json
new file mode 100644
index 0000000000..7ab027b8d2
--- /dev/null
+++ b/examples/solid/composable-tables/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/solid/composable-tables/vite.config.ts b/examples/solid/composable-tables/vite.config.ts
new file mode 100644
index 0000000000..d27427972d
--- /dev/null
+++ b/examples/solid/composable-tables/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+})
diff --git a/packages/solid-table/src/createTableHook.tsx b/packages/solid-table/src/createTableHook.tsx
index f9c36902b3..a5dae0699b 100644
--- a/packages/solid-table/src/createTableHook.tsx
+++ b/packages/solid-table/src/createTableHook.tsx
@@ -1,5 +1,5 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { createContext, createMemo, mergeProps, useContext } from 'solid-js'
+import { Show, createContext, mergeProps, useContext } from 'solid-js'
 import { createTable } from './createTable'
 import { FlexRender } from './FlexRender'
 import type { SolidTable } from './createTable'
@@ -250,7 +250,7 @@ export type CreateTableHookOptions<
 > & {
   /**
    * Table-level components that need access to the table instance.
-   * These are available directly on the table object returned by useAppTable.
+   * These are available directly on the table object returned by createAppTable.
    * Use `useTableContext()` inside these components.
    * @example { PaginationControls, GlobalFilter, RowCount }
    */
@@ -286,7 +286,7 @@ export interface AppTablePropsWithSelector<
   TFeatures extends TableFeatures,
   TSelected,
 > {
-  children: (state: TSelected) => JSXElement
+  children: (state: Accessor<TSelected>) => JSXElement
   selector: (state: TableState<TFeatures>) => TSelected
 }
 
@@ -427,7 +427,7 @@ export interface AppTableComponent<TFeatures extends TableFeatures> {
 }
 
 /**
- * Extended table API returned by useAppTable with all App wrapper components
+ * Extended table API returned by createAppTable with all App wrapper components
  */
 export type AppSolidTable<
   TFeatures extends TableFeatures,
@@ -499,6 +499,17 @@ export type AppSolidTable<
      * ```
      */
     AppFooter: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>
+    /**
+     * Convenience FlexRender component attached to the table instance.
+     * Renders cell, header, or footer content from column definitions.
+     * @example
+     * ```tsx
+     * <table.FlexRender header={header} />
+     * <table.FlexRender cell={cell} />
+     * <table.FlexRender footer={footer} />
+     * ```
+     */
+    FlexRender: typeof FlexRender
   }
 
 /**
@@ -508,14 +519,14 @@ export type AppSolidTable<
  * - 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 `createAppTable` 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,
+ *   createAppTable,
  *   createAppColumnHelper,
  *   useTableContext,
  *   useCellContext,
@@ -547,7 +558,7 @@ export type AppSolidTable<
  *
  * // features/users.tsx
  * function UsersTable({ data }: { data: Person[] }) {
- *   const table = useAppTable({
+ *   const table = createAppTable({
  *     columns,
  *     data, // TData inferred from Person[]
  *   })
@@ -556,31 +567,39 @@ export type AppSolidTable<
  *     <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>
+ *           <For each={table.getHeaderGroups()}>
+ *             {(headerGroup) => (
+ *               <tr>
+ *                 <For each={headerGroup.headers}>
+ *                   {(h) => (
+ *                     <table.AppHeader header={h}>
+ *                       {(header) => (
+ *                         <th>
+ *                           <header.FlexRender />
+ *                           <header.SortIndicator />
+ *                         </th>
+ *                       )}
+ *                     </table.AppHeader>
  *                   )}
- *                 </table.AppHeader>
- *               ))}
- *             </tr>
- *           ))}
+ *                 </For>
+ *               </tr>
+ *             )}
+ *           </For>
  *         </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>
- *           ))}
+ *           <For each={table.getRowModel().rows}>
+ *             {(row) => (
+ *               <tr>
+ *                 <For each={row.getAllCells()}>
+ *                   {(c) => (
+ *                     <table.AppCell cell={c}>
+ *                       {(cell) => <td><cell.TextCell /></td>}
+ *                     </table.AppCell>
+ *                   )}
+ *                 </For>
+ *               </tr>
+ *             )}
+ *           </For>
  *         </tbody>
  *       </table>
  *       <table.PaginationControls />
@@ -822,238 +841,217 @@ export function createTableHook<
       selector,
     )
 
-    // AppTable - Root wrapper that provides table context with optional Subscribe
-    const AppTable = createMemo(() => {
-      function AppTableImpl(props: AppTablePropsWithoutSelector): JSXElement
-      function AppTableImpl<TAppTableSelected>(
-        props: AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
-      ): JSXElement
-      function AppTableImpl<TAppTableSelected>(
-        props:
-          | AppTablePropsWithoutSelector
-          | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
-      ): JSXElement {
-        const { children, selector: appTableSelector } = props as any
-
-        return (
-          <TableContext.Provider value={table}>
-            {appTableSelector ? (
-              <table.Subscribe selector={appTableSelector}>
-                {(state: Accessor<TAppTableSelected>) => children(state)}
+    // AppTable - Root wrapper that provides table context with optional state selector
+    function AppTable(props: AppTablePropsWithoutSelector): JSXElement
+    function AppTable<TAppTableSelected>(
+      props: AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
+    ): JSXElement
+    function AppTable<TAppTableSelected>(
+      props:
+        | AppTablePropsWithoutSelector
+        | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
+    ): JSXElement {
+      return (
+        <TableContext.Provider value={table}>
+          <Show when={props.selector} fallback={props.children as JSXElement}>
+            {(selector) => (
+              <table.Subscribe selector={selector()}>
+                {(state: Accessor<TAppTableSelected>) =>
+                  (props.children as (state: Accessor<TAppTableSelected>) => JSXElement)(state)
+                }
               </table.Subscribe>
-            ) : (
-              children
             )}
-          </TableContext.Provider>
-        )
-      }
-      return AppTableImpl as AppTableComponent<TFeatures>
-    }, [table])
+          </Show>
+        </TableContext.Provider>
+      )
+    }
 
-    // AppCell - Wraps cell with context, pre-bound cellComponents, and optional Subscribe
-    const AppCell = createMemo(() => {
-      function AppCellImpl<TValue extends CellData = CellData>(
-        props: AppCellPropsWithoutSelector<
-          TFeatures,
-          TData,
-          TValue,
-          TCellComponents
-        >,
-      ): JSXElement
-      function AppCellImpl<
-        TValue extends CellData = CellData,
-        TAppCellSelected = unknown,
-      >(
-        props: AppCellPropsWithSelector<
-          TFeatures,
-          TData,
-          TValue,
-          TCellComponents,
-          TAppCellSelected
-        >,
-      ): JSXElement
-      function AppCellImpl<
-        TValue extends CellData = CellData,
-        TAppCellSelected = unknown,
-      >(
-        props:
-          | AppCellPropsWithoutSelector<
-              TFeatures,
-              TData,
-              TValue,
-              TCellComponents
-            >
-          | AppCellPropsWithSelector<
-              TFeatures,
-              TData,
-              TValue,
-              TCellComponents,
-              TAppCellSelected
-            >,
-      ): JSXElement {
-        const { cell, children, selector: appCellSelector } = props as any
-        const extendedCell = Object.assign(cell, {
-          FlexRender: CellFlexRender,
-          ...cellComponents,
-        })
+    // AppCell - Wraps cell with context, pre-bound cellComponents, and optional state selector
+    function AppCell<TValue extends CellData = CellData>(
+      props: AppCellPropsWithoutSelector<
+        TFeatures,
+        TData,
+        TValue,
+        TCellComponents
+      >,
+    ): JSXElement
+    function AppCell<
+      TValue extends CellData = CellData,
+      TAppCellSelected = unknown,
+    >(
+      props: AppCellPropsWithSelector<
+        TFeatures,
+        TData,
+        TValue,
+        TCellComponents,
+        TAppCellSelected
+      >,
+    ): JSXElement
+    function AppCell<
+      TValue extends CellData = CellData,
+      TAppCellSelected = unknown,
+    >(
+      props:
+        | AppCellPropsWithoutSelector<TFeatures, TData, TValue, TCellComponents>
+        | AppCellPropsWithSelector<
+            TFeatures,
+            TData,
+            TValue,
+            TCellComponents,
+            TAppCellSelected
+          >,
+    ): JSXElement {
+      const extendedCell = Object.assign(props.cell, {
+        FlexRender: CellFlexRender,
+        ...cellComponents,
+      }) as Cell<TFeatures, TData, TValue> &
+        TCellComponents & { FlexRender: () => JSXElement }
 
-        return (
-          <CellContext.Provider value={cell}>
-            {appCellSelector ? (
-              <table.Subscribe selector={appCellSelector}>
+      return (
+        <CellContext.Provider value={props.cell}>
+          <Show
+            when={props.selector}
+            fallback={(props.children as (cell: any) => JSXElement)(extendedCell as any)}
+          >
+            {(selector) => (
+              <table.Subscribe selector={selector()}>
                 {(state: Accessor<TAppCellSelected>) =>
-                  children(extendedCell, state)
+                  props.children(extendedCell as any, state)
                 }
               </table.Subscribe>
-            ) : (
-              children(extendedCell)
             )}
-          </CellContext.Provider>
-        )
-      }
-      return AppCellImpl as AppCellComponent<TFeatures, TData, TCellComponents>
-    }, [table])
+          </Show>
+        </CellContext.Provider>
+      )
+    }
 
-    // AppHeader - Wraps header with context, pre-bound headerComponents, and optional Subscribe
-    const AppHeader = createMemo(() => {
-      function AppHeaderImpl<TValue extends CellData = CellData>(
-        props: AppHeaderPropsWithoutSelector<
-          TFeatures,
-          TData,
-          TValue,
-          THeaderComponents
-        >,
-      ): JSXElement
-      function AppHeaderImpl<
-        TValue extends CellData = CellData,
-        TAppHeaderSelected = unknown,
-      >(
-        props: AppHeaderPropsWithSelector<
-          TFeatures,
-          TData,
-          TValue,
-          THeaderComponents,
-          TAppHeaderSelected
-        >,
-      ): JSXElement
-      function AppHeaderImpl<
-        TValue extends CellData = CellData,
-        TAppHeaderSelected = unknown,
-      >(
-        props:
-          | AppHeaderPropsWithoutSelector<
-              TFeatures,
-              TData,
-              TValue,
-              THeaderComponents
-            >
-          | AppHeaderPropsWithSelector<
-              TFeatures,
-              TData,
-              TValue,
-              THeaderComponents,
-              TAppHeaderSelected
-            >,
-      ): JSXElement {
-        const { header, children, selector: appHeaderSelector } = props as any
-        const extendedHeader = Object.assign(header, {
-          FlexRender: HeaderFlexRender,
-          ...headerComponents,
-        })
+    // AppHeader - Wraps header with context, pre-bound headerComponents, and optional state selector
+    function AppHeader<TValue extends CellData = CellData>(
+      props: AppHeaderPropsWithoutSelector<
+        TFeatures,
+        TData,
+        TValue,
+        THeaderComponents
+      >,
+    ): JSXElement
+    function AppHeader<
+      TValue extends CellData = CellData,
+      TAppHeaderSelected = unknown,
+    >(
+      props: AppHeaderPropsWithSelector<
+        TFeatures,
+        TData,
+        TValue,
+        THeaderComponents,
+        TAppHeaderSelected
+      >,
+    ): JSXElement
+    function AppHeader<
+      TValue extends CellData = CellData,
+      TAppHeaderSelected = unknown,
+    >(
+      props:
+        | AppHeaderPropsWithoutSelector<
+            TFeatures,
+            TData,
+            TValue,
+            THeaderComponents
+          >
+        | AppHeaderPropsWithSelector<
+            TFeatures,
+            TData,
+            TValue,
+            THeaderComponents,
+            TAppHeaderSelected
+          >,
+    ): JSXElement {
+      const extendedHeader = Object.assign(props.header, {
+        FlexRender: HeaderFlexRender,
+        ...headerComponents,
+      }) as Header<TFeatures, TData, TValue> &
+        THeaderComponents & { FlexRender: () => JSXElement }
 
-        return (
-          <HeaderContext.Provider value={header}>
-            {appHeaderSelector ? (
-              <table.Subscribe selector={appHeaderSelector}>
+      return (
+        <HeaderContext.Provider value={props.header}>
+          <Show
+            when={props.selector}
+            fallback={(props.children as (header: any) => JSXElement)(extendedHeader as any)}
+          >
+            {(selector) => (
+              <table.Subscribe selector={selector()}>
                 {(state: Accessor<TAppHeaderSelected>) =>
-                  children(extendedHeader, state)
+                  props.children(extendedHeader as any, state)
                 }
               </table.Subscribe>
-            ) : (
-              children(extendedHeader)
             )}
-          </HeaderContext.Provider>
-        )
-      }
-      return AppHeaderImpl as AppHeaderComponent<
+          </Show>
+        </HeaderContext.Provider>
+      )
+    }
+
+    // AppFooter - Same as AppHeader but uses FooterFlexRender (footers use Header type)
+    function AppFooter<TValue extends CellData = CellData>(
+      props: AppHeaderPropsWithoutSelector<
         TFeatures,
         TData,
+        TValue,
         THeaderComponents
-      >
-    }, [table])
-
-    // AppFooter - Same as AppHeader (footers use Header type)
-    const AppFooter = createMemo(() => {
-      function AppFooterImpl<TValue extends CellData = CellData>(
-        props: AppHeaderPropsWithoutSelector<
-          TFeatures,
-          TData,
-          TValue,
-          THeaderComponents
-        >,
-      ): JSXElement
-      function AppFooterImpl<
-        TValue extends CellData = CellData,
-        TAppFooterSelected = unknown,
-      >(
-        props: AppHeaderPropsWithSelector<
-          TFeatures,
-          TData,
-          TValue,
-          THeaderComponents,
-          TAppFooterSelected
-        >,
-      ): JSXElement
-      function AppFooterImpl<
-        TValue extends CellData = CellData,
-        TAppFooterSelected = unknown,
-      >(
-        props:
-          | AppHeaderPropsWithoutSelector<
-              TFeatures,
-              TData,
-              TValue,
-              THeaderComponents
-            >
-          | AppHeaderPropsWithSelector<
-              TFeatures,
-              TData,
-              TValue,
-              THeaderComponents,
-              TAppFooterSelected
-            >,
-      ): JSXElement {
-        const { header, children, selector: appFooterSelector } = props as any
-        const extendedHeader = Object.assign(header, {
-          FlexRender: FooterFlexRender,
-          ...headerComponents,
-        })
+      >,
+    ): JSXElement
+    function AppFooter<
+      TValue extends CellData = CellData,
+      TAppFooterSelected = unknown,
+    >(
+      props: AppHeaderPropsWithSelector<
+        TFeatures,
+        TData,
+        TValue,
+        THeaderComponents,
+        TAppFooterSelected
+      >,
+    ): JSXElement
+    function AppFooter<
+      TValue extends CellData = CellData,
+      TAppFooterSelected = unknown,
+    >(
+      props:
+        | AppHeaderPropsWithoutSelector<
+            TFeatures,
+            TData,
+            TValue,
+            THeaderComponents
+          >
+        | AppHeaderPropsWithSelector<
+            TFeatures,
+            TData,
+            TValue,
+            THeaderComponents,
+            TAppFooterSelected
+          >,
+    ): JSXElement {
+      const extendedHeader = Object.assign(props.header, {
+        FlexRender: FooterFlexRender,
+        ...headerComponents,
+      }) as Header<TFeatures, TData, TValue> &
+        THeaderComponents & { FlexRender: () => JSXElement }
 
-        return (
-          <HeaderContext.Provider value={header}>
-            {appFooterSelector ? (
-              <table.Subscribe selector={appFooterSelector}>
+      return (
+        <HeaderContext.Provider value={props.header}>
+          <Show
+            when={props.selector}
+            fallback={(props.children as (header: any) => JSXElement)(extendedHeader as any)}
+          >
+            {(selector) => (
+              <table.Subscribe selector={selector()}>
                 {(state: Accessor<TAppFooterSelected>) =>
-                  children(extendedHeader, state)
+                  props.children(extendedHeader as any, state)
                 }
               </table.Subscribe>
-            ) : (
-              (
-                children as (
-                  header: Header<TFeatures, TData, TValue> &
-                    THeaderComponents & { FlexRender: () => JSXElement },
-                ) => JSXElement
-              )(extendedHeader)
             )}
-          </HeaderContext.Provider>
-        )
-      }
-      return AppFooterImpl as AppHeaderComponent<
-        TFeatures,
-        TData,
-        THeaderComponents
-      >
-    }, [table])
+          </Show>
+        </HeaderContext.Provider>
+      )
+    }
 
     // Combine everything into the extended table API
     return Object.assign(table, {
@@ -1061,6 +1059,7 @@ export function createTableHook<
       AppCell,
       AppHeader,
       AppFooter,
+      FlexRender,
       ...tableComponents,
     }) as AppSolidTable<
       TFeatures,
@@ -1075,7 +1074,7 @@ export function createTableHook<
   return {
     appFeatures: defaultTableOptions._features as TFeatures,
     createAppColumnHelper,
-    useAppTable: createAppTable,
+    createAppTable: createAppTable,
     useTableContext,
     useCellContext,
     useHeaderContext,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21fc78aedb..a75f1f4f68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2647,6 +2647,25 @@ importers:
         specifier: ^2.11.10
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
 
+  examples/solid/basic-app-table:
+    dependencies:
+      '@tanstack/solid-table':
+        specifier: ^9.0.0-alpha.10
+        version: link:../../../packages/solid-table
+      solid-js:
+        specifier: ^1.9.11
+        version: 1.9.11
+    devDependencies:
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
+
   examples/solid/basic-table-helper:
     dependencies:
       '@tanstack/solid-table':
@@ -2726,6 +2745,25 @@ importers:
         specifier: ^2.11.10
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
 
+  examples/solid/composable-tables:
+    dependencies:
+      '@tanstack/solid-table':
+        specifier: ^9.0.0-alpha.10
+        version: link:../../../packages/solid-table
+      solid-js:
+        specifier: ^1.9.11
+        version: 1.9.11
+    devDependencies:
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
+
   examples/solid/filters:
     dependencies:
       '@solid-primitives/scheduled':

From 9f5f16db1e3713499b22e06b11636a8ffbb84c85 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 20:44:41 +0000
Subject: [PATCH 3/4] ci: apply automated fixes

---
 examples/solid/composable-tables/src/App.tsx | 493 ++++++++++---------
 packages/solid-table/src/createTableHook.tsx |  18 +-
 2 files changed, 262 insertions(+), 249 deletions(-)

diff --git a/examples/solid/composable-tables/src/App.tsx b/examples/solid/composable-tables/src/App.tsx
index c7c64bd112..8b220922fc 100644
--- a/examples/solid/composable-tables/src/App.tsx
+++ b/examples/solid/composable-tables/src/App.tsx
@@ -83,136 +83,136 @@ function UsersTable() {
         const sorting = () => state().sorting
         const columnFilters = () => state().columnFilters
         return (
-        <div class="table-container">
-          {/* Table toolbar using pre-bound component */}
-          <table.TableToolbar title="Users Table" onRefresh={refreshData} />
+          <div class="table-container">
+            {/* Table toolbar using pre-bound component */}
+            <table.TableToolbar title="Users Table" onRefresh={refreshData} />
 
-          {/* Table element */}
-          <table>
-            <thead>
-              <For each={table.getHeaderGroups()}>
-                {(headerGroup) => (
-                  <tr>
-                    <For each={headerGroup.headers}>
-                      {(h) => (
-                        <table.AppHeader header={h}>
-                          {(header) => (
-                            <th
-                              colSpan={header.colSpan}
-                              class={
-                                header.column.getCanSort()
-                                  ? 'sortable-header'
-                                  : ''
-                              }
-                              onClick={header.column.getToggleSortingHandler()}
-                            >
-                              {header.isPlaceholder ? null : (
-                                <>
-                                  <header.FlexRender />
-                                  <header.SortIndicator />
-                                  <header.ColumnFilter />
-                                  {/* Show sort order number when multiple columns sorted */}
-                                  {sorting().length > 1 &&
-                                    sorting().findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) > -1 && (
-                                      <span class="sort-order">
-                                        {sorting().findIndex(
-                                          (s) => s.id === header.column.id,
-                                        ) + 1}
-                                      </span>
-                                    )}
-                                </>
-                              )}
-                            </th>
-                          )}
-                        </table.AppHeader>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </thead>
-            <tbody>
-              <For each={table.getRowModel().rows}>
-                {(row) => (
-                  <tr>
-                    <For each={row.getAllCells()}>
-                      {(c) => (
-                        <table.AppCell cell={c}>
-                          {(cell) => (
-                            <td>
-                              {/* Cell components are pre-bound via AppCell */}
-                              <cell.FlexRender />
-                            </td>
-                          )}
-                        </table.AppCell>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </tbody>
-            <tfoot>
-              <For each={table.getFooterGroups()}>
-                {(footerGroup) => (
-                  <tr>
-                    <For each={footerGroup.headers}>
-                      {(f) => (
-                        <table.AppFooter header={f}>
-                          {(footer) => {
-                            const columnId = footer.column.id
-                            const hasFilter = () =>
-                              columnFilters().some((cf) => cf.id === columnId)
-
-                            return (
-                              <td colSpan={footer.colSpan}>
-                                {footer.isPlaceholder ? null : (
+            {/* Table element */}
+            <table>
+              <thead>
+                <For each={table.getHeaderGroups()}>
+                  {(headerGroup) => (
+                    <tr>
+                      <For each={headerGroup.headers}>
+                        {(h) => (
+                          <table.AppHeader header={h}>
+                            {(header) => (
+                              <th
+                                colSpan={header.colSpan}
+                                class={
+                                  header.column.getCanSort()
+                                    ? 'sortable-header'
+                                    : ''
+                                }
+                                onClick={header.column.getToggleSortingHandler()}
+                              >
+                                {header.isPlaceholder ? null : (
                                   <>
-                                    {/* Use FooterSum for numeric columns, FooterColumnId for others */}
-                                    {columnId === 'age' ||
-                                    columnId === 'visits' ||
-                                    columnId === 'progress' ? (
-                                      <>
-                                        <footer.FooterSum />
-                                        {hasFilter() && (
-                                          <span class="filtered-indicator">
-                                            {' '}
-                                            (filtered)
-                                          </span>
-                                        )}
-                                      </>
-                                    ) : columnId === 'actions' ? null : (
-                                      <>
-                                        <footer.FooterColumnId />
-                                        {hasFilter() && (
-                                          <span class="filtered-indicator">
-                                            {' '}
-                                            ✓
-                                          </span>
-                                        )}
-                                      </>
-                                    )}
+                                    <header.FlexRender />
+                                    <header.SortIndicator />
+                                    <header.ColumnFilter />
+                                    {/* Show sort order number when multiple columns sorted */}
+                                    {sorting().length > 1 &&
+                                      sorting().findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) > -1 && (
+                                        <span class="sort-order">
+                                          {sorting().findIndex(
+                                            (s) => s.id === header.column.id,
+                                          ) + 1}
+                                        </span>
+                                      )}
                                   </>
                                 )}
+                              </th>
+                            )}
+                          </table.AppHeader>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </thead>
+              <tbody>
+                <For each={table.getRowModel().rows}>
+                  {(row) => (
+                    <tr>
+                      <For each={row.getAllCells()}>
+                        {(c) => (
+                          <table.AppCell cell={c}>
+                            {(cell) => (
+                              <td>
+                                {/* Cell components are pre-bound via AppCell */}
+                                <cell.FlexRender />
                               </td>
-                            )
-                          }}
-                        </table.AppFooter>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </tfoot>
-          </table>
+                            )}
+                          </table.AppCell>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+              <tfoot>
+                <For each={table.getFooterGroups()}>
+                  {(footerGroup) => (
+                    <tr>
+                      <For each={footerGroup.headers}>
+                        {(f) => (
+                          <table.AppFooter header={f}>
+                            {(footer) => {
+                              const columnId = footer.column.id
+                              const hasFilter = () =>
+                                columnFilters().some((cf) => cf.id === columnId)
+
+                              return (
+                                <td colSpan={footer.colSpan}>
+                                  {footer.isPlaceholder ? null : (
+                                    <>
+                                      {/* Use FooterSum for numeric columns, FooterColumnId for others */}
+                                      {columnId === 'age' ||
+                                      columnId === 'visits' ||
+                                      columnId === 'progress' ? (
+                                        <>
+                                          <footer.FooterSum />
+                                          {hasFilter() && (
+                                            <span class="filtered-indicator">
+                                              {' '}
+                                              (filtered)
+                                            </span>
+                                          )}
+                                        </>
+                                      ) : columnId === 'actions' ? null : (
+                                        <>
+                                          <footer.FooterColumnId />
+                                          {hasFilter() && (
+                                            <span class="filtered-indicator">
+                                              {' '}
+                                              ✓
+                                            </span>
+                                          )}
+                                        </>
+                                      )}
+                                    </>
+                                  )}
+                                </td>
+                              )
+                            }}
+                          </table.AppFooter>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </tfoot>
+            </table>
 
-          {/* Pagination using pre-bound component */}
-          <table.PaginationControls />
+            {/* Pagination using pre-bound component */}
+            <table.PaginationControls />
 
-          {/* Row count using pre-bound component */}
-          <table.RowCount />
-        </div>
+            {/* Row count using pre-bound component */}
+            <table.RowCount />
+          </div>
         )
       }}
     </table.AppTable>
@@ -279,135 +279,138 @@ function ProductsTable() {
         const sorting = () => state().sorting
         const columnFilters = () => state().columnFilters
         return (
-        <div class="table-container">
-          {/* Table toolbar using the same pre-bound component */}
-          <table.TableToolbar title="Products Table" onRefresh={refreshData} />
+          <div class="table-container">
+            {/* Table toolbar using the same pre-bound component */}
+            <table.TableToolbar
+              title="Products Table"
+              onRefresh={refreshData}
+            />
 
-          {/* Table element */}
-          <table>
-            <thead>
-              <For each={table.getHeaderGroups()}>
-                {(headerGroup) => (
-                  <tr>
-                    <For each={headerGroup.headers}>
-                      {(h) => (
-                        <table.AppHeader header={h}>
-                          {(header) => (
-                            <th
-                              colSpan={header.colSpan}
-                              class={
-                                header.column.getCanSort()
-                                  ? 'sortable-header'
-                                  : ''
-                              }
-                              onClick={header.column.getToggleSortingHandler()}
-                            >
-                              {header.isPlaceholder ? null : (
-                                <>
-                                  <header.FlexRender />
-                                  <header.SortIndicator />
-                                  <header.ColumnFilter />
-                                  {sorting().length > 1 &&
-                                    sorting().findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) > -1 && (
-                                      <span class="sort-order">
-                                        {sorting().findIndex(
-                                          (s) => s.id === header.column.id,
-                                        ) + 1}
-                                      </span>
-                                    )}
-                                </>
-                              )}
-                            </th>
-                          )}
-                        </table.AppHeader>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </thead>
-            <tbody>
-              <For each={table.getRowModel().rows}>
-                {(row) => (
-                  <tr>
-                    <For each={row.getAllCells()}>
-                      {(c) => (
-                        <table.AppCell cell={c}>
-                          {(cell) => (
-                            <td>
-                              {/* Cell components are pre-bound via AppCell */}
-                              <cell.FlexRender />
-                            </td>
-                          )}
-                        </table.AppCell>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </tbody>
-            <tfoot>
-              <For each={table.getFooterGroups()}>
-                {(footerGroup) => (
-                  <tr>
-                    <For each={footerGroup.headers}>
-                      {(f) => (
-                        <table.AppFooter header={f}>
-                          {(footer) => {
-                            const columnId = footer.column.id
-                            const hasFilter = () =>
-                              columnFilters().some((cf) => cf.id === columnId)
-
-                            return (
-                              <td colSpan={footer.colSpan}>
-                                {footer.isPlaceholder ? null : (
+            {/* Table element */}
+            <table>
+              <thead>
+                <For each={table.getHeaderGroups()}>
+                  {(headerGroup) => (
+                    <tr>
+                      <For each={headerGroup.headers}>
+                        {(h) => (
+                          <table.AppHeader header={h}>
+                            {(header) => (
+                              <th
+                                colSpan={header.colSpan}
+                                class={
+                                  header.column.getCanSort()
+                                    ? 'sortable-header'
+                                    : ''
+                                }
+                                onClick={header.column.getToggleSortingHandler()}
+                              >
+                                {header.isPlaceholder ? null : (
                                   <>
-                                    {/* Use FooterSum for numeric columns, FooterColumnId for others */}
-                                    {columnId === 'price' ||
-                                    columnId === 'stock' ||
-                                    columnId === 'rating' ? (
-                                      <>
-                                        <footer.FooterSum />
-                                        {hasFilter() && (
-                                          <span class="filtered-indicator">
-                                            {' '}
-                                            (filtered)
-                                          </span>
-                                        )}
-                                      </>
-                                    ) : (
-                                      <>
-                                        <footer.FooterColumnId />
-                                        {hasFilter() && (
-                                          <span class="filtered-indicator">
-                                            {' '}
-                                            ✓
-                                          </span>
-                                        )}
-                                      </>
-                                    )}
+                                    <header.FlexRender />
+                                    <header.SortIndicator />
+                                    <header.ColumnFilter />
+                                    {sorting().length > 1 &&
+                                      sorting().findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) > -1 && (
+                                        <span class="sort-order">
+                                          {sorting().findIndex(
+                                            (s) => s.id === header.column.id,
+                                          ) + 1}
+                                        </span>
+                                      )}
                                   </>
                                 )}
+                              </th>
+                            )}
+                          </table.AppHeader>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </thead>
+              <tbody>
+                <For each={table.getRowModel().rows}>
+                  {(row) => (
+                    <tr>
+                      <For each={row.getAllCells()}>
+                        {(c) => (
+                          <table.AppCell cell={c}>
+                            {(cell) => (
+                              <td>
+                                {/* Cell components are pre-bound via AppCell */}
+                                <cell.FlexRender />
                               </td>
-                            )
-                          }}
-                        </table.AppFooter>
-                      )}
-                    </For>
-                  </tr>
-                )}
-              </For>
-            </tfoot>
-          </table>
+                            )}
+                          </table.AppCell>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+              <tfoot>
+                <For each={table.getFooterGroups()}>
+                  {(footerGroup) => (
+                    <tr>
+                      <For each={footerGroup.headers}>
+                        {(f) => (
+                          <table.AppFooter header={f}>
+                            {(footer) => {
+                              const columnId = footer.column.id
+                              const hasFilter = () =>
+                                columnFilters().some((cf) => cf.id === columnId)
+
+                              return (
+                                <td colSpan={footer.colSpan}>
+                                  {footer.isPlaceholder ? null : (
+                                    <>
+                                      {/* Use FooterSum for numeric columns, FooterColumnId for others */}
+                                      {columnId === 'price' ||
+                                      columnId === 'stock' ||
+                                      columnId === 'rating' ? (
+                                        <>
+                                          <footer.FooterSum />
+                                          {hasFilter() && (
+                                            <span class="filtered-indicator">
+                                              {' '}
+                                              (filtered)
+                                            </span>
+                                          )}
+                                        </>
+                                      ) : (
+                                        <>
+                                          <footer.FooterColumnId />
+                                          {hasFilter() && (
+                                            <span class="filtered-indicator">
+                                              {' '}
+                                              ✓
+                                            </span>
+                                          )}
+                                        </>
+                                      )}
+                                    </>
+                                  )}
+                                </td>
+                              )
+                            }}
+                          </table.AppFooter>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </tfoot>
+            </table>
 
-          {/* Pagination using the same pre-bound component */}
-          <table.PaginationControls />
+            {/* Pagination using the same pre-bound component */}
+            <table.PaginationControls />
 
-          {/* Row count using the same pre-bound component */}
-          <table.RowCount />
-        </div>
+            {/* Row count using the same pre-bound component */}
+            <table.RowCount />
+          </div>
         )
       }}
     </table.AppTable>
diff --git a/packages/solid-table/src/createTableHook.tsx b/packages/solid-table/src/createTableHook.tsx
index a5dae0699b..6bfe3e9597 100644
--- a/packages/solid-table/src/createTableHook.tsx
+++ b/packages/solid-table/src/createTableHook.tsx
@@ -857,7 +857,11 @@ export function createTableHook<
             {(selector) => (
               <table.Subscribe selector={selector()}>
                 {(state: Accessor<TAppTableSelected>) =>
-                  (props.children as (state: Accessor<TAppTableSelected>) => JSXElement)(state)
+                  (
+                    props.children as (
+                      state: Accessor<TAppTableSelected>,
+                    ) => JSXElement
+                  )(state)
                 }
               </table.Subscribe>
             )}
@@ -911,7 +915,9 @@ export function createTableHook<
         <CellContext.Provider value={props.cell}>
           <Show
             when={props.selector}
-            fallback={(props.children as (cell: any) => JSXElement)(extendedCell as any)}
+            fallback={(props.children as (cell: any) => JSXElement)(
+              extendedCell as any,
+            )}
           >
             {(selector) => (
               <table.Subscribe selector={selector()}>
@@ -975,7 +981,9 @@ export function createTableHook<
         <HeaderContext.Provider value={props.header}>
           <Show
             when={props.selector}
-            fallback={(props.children as (header: any) => JSXElement)(extendedHeader as any)}
+            fallback={(props.children as (header: any) => JSXElement)(
+              extendedHeader as any,
+            )}
           >
             {(selector) => (
               <table.Subscribe selector={selector()}>
@@ -1039,7 +1047,9 @@ export function createTableHook<
         <HeaderContext.Provider value={props.header}>
           <Show
             when={props.selector}
-            fallback={(props.children as (header: any) => JSXElement)(extendedHeader as any)}
+            fallback={(props.children as (header: any) => JSXElement)(
+              extendedHeader as any,
+            )}
           >
             {(selector) => (
               <table.Subscribe selector={selector()}>

From 3ae6f62fb42764634d9da32c1f0bdf26877312f6 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Mon, 9 Mar 2026 22:06:03 +0100
Subject: [PATCH 4/4] chore(solid): add new table examples

Add new examples:
- basic-external-state
- basic-external-stpore
- basic-use-table
- with-tanstack-query

Update config.json to render new solid table examples
---
 docs/config.json                              |  10 +-
 .../.gitignore                                |   0
 .../README.md                                 |   0
 .../index.html                                |   0
 .../package.json                              |   3 +-
 .../solid/basic-external-state/src/App.tsx    | 207 +++++++++++++++++
 .../src/index.css                             |   0
 .../src/index.tsx                             |   0
 .../basic-external-state/src/makeData.ts      |  48 ++++
 .../tsconfig.json                             |   0
 .../vite.config.ts                            |   0
 .../.gitignore                                |   0
 .../{basic => basic-external-store}/README.md |   0
 .../index.html                                |   0
 .../solid/basic-external-store/package.json   |  23 ++
 .../solid/basic-external-store/src/App.tsx    | 214 ++++++++++++++++++
 .../src/index.css                             |   0
 .../src/index.tsx                             |   0
 .../basic-external-store/src/makeData.ts      |  48 ++++
 .../tsconfig.json                             |   0
 .../vite.config.ts                            |   0
 examples/solid/basic-table-helper/src/App.tsx | 177 ---------------
 examples/solid/basic-use-table/.gitignore     |   2 +
 examples/solid/basic-use-table/README.md      |   6 +
 examples/solid/basic-use-table/index.html     |  16 ++
 .../{basic => basic-use-table}/package.json   |   2 +-
 .../{basic => basic-use-table}/src/App.tsx    |  46 ++--
 examples/solid/basic-use-table/src/index.css  |  26 +++
 examples/solid/basic-use-table/src/index.tsx  |   6 +
 examples/solid/basic-use-table/tsconfig.json  |  25 ++
 examples/solid/basic-use-table/vite.config.ts |  10 +
 examples/solid/with-tanstack-query/.gitignore |   2 +
 examples/solid/with-tanstack-query/README.md  |   6 +
 examples/solid/with-tanstack-query/index.html |  16 ++
 .../solid/with-tanstack-query/package.json    |  25 ++
 .../solid/with-tanstack-query/src/App.tsx     | 193 ++++++++++++++++
 .../with-tanstack-query/src/fetchData.ts      |  66 ++++++
 .../solid/with-tanstack-query/src/index.css   |  26 +++
 .../solid/with-tanstack-query/src/index.tsx   |  15 ++
 .../solid/with-tanstack-query/tsconfig.json   |  25 ++
 .../solid/with-tanstack-query/vite.config.ts  |   9 +
 pnpm-lock.yaml                                |  84 ++++++-
 42 files changed, 1117 insertions(+), 219 deletions(-)
 rename examples/solid/{basic-table-helper => basic-external-state}/.gitignore (100%)
 rename examples/solid/{basic-table-helper => basic-external-state}/README.md (100%)
 rename examples/solid/{basic-table-helper => basic-external-state}/index.html (100%)
 rename examples/solid/{basic-table-helper => basic-external-state}/package.json (81%)
 create mode 100644 examples/solid/basic-external-state/src/App.tsx
 rename examples/solid/{basic-table-helper => basic-external-state}/src/index.css (100%)
 rename examples/solid/{basic-table-helper => basic-external-state}/src/index.tsx (100%)
 create mode 100644 examples/solid/basic-external-state/src/makeData.ts
 rename examples/solid/{basic-table-helper => basic-external-state}/tsconfig.json (100%)
 rename examples/solid/{basic-table-helper => basic-external-state}/vite.config.ts (100%)
 rename examples/solid/{basic => basic-external-store}/.gitignore (100%)
 rename examples/solid/{basic => basic-external-store}/README.md (100%)
 rename examples/solid/{basic => basic-external-store}/index.html (100%)
 create mode 100644 examples/solid/basic-external-store/package.json
 create mode 100644 examples/solid/basic-external-store/src/App.tsx
 rename examples/solid/{basic => basic-external-store}/src/index.css (100%)
 rename examples/solid/{basic => basic-external-store}/src/index.tsx (100%)
 create mode 100644 examples/solid/basic-external-store/src/makeData.ts
 rename examples/solid/{basic => basic-external-store}/tsconfig.json (100%)
 rename examples/solid/{basic => basic-external-store}/vite.config.ts (100%)
 delete mode 100644 examples/solid/basic-table-helper/src/App.tsx
 create mode 100644 examples/solid/basic-use-table/.gitignore
 create mode 100644 examples/solid/basic-use-table/README.md
 create mode 100644 examples/solid/basic-use-table/index.html
 rename examples/solid/{basic => basic-use-table}/package.json (87%)
 rename examples/solid/{basic => basic-use-table}/src/App.tsx (65%)
 create mode 100644 examples/solid/basic-use-table/src/index.css
 create mode 100644 examples/solid/basic-use-table/src/index.tsx
 create mode 100644 examples/solid/basic-use-table/tsconfig.json
 create mode 100644 examples/solid/basic-use-table/vite.config.ts
 create mode 100644 examples/solid/with-tanstack-query/.gitignore
 create mode 100644 examples/solid/with-tanstack-query/README.md
 create mode 100644 examples/solid/with-tanstack-query/index.html
 create mode 100644 examples/solid/with-tanstack-query/package.json
 create mode 100644 examples/solid/with-tanstack-query/src/App.tsx
 create mode 100644 examples/solid/with-tanstack-query/src/fetchData.ts
 create mode 100644 examples/solid/with-tanstack-query/src/index.css
 create mode 100644 examples/solid/with-tanstack-query/src/index.tsx
 create mode 100644 examples/solid/with-tanstack-query/tsconfig.json
 create mode 100644 examples/solid/with-tanstack-query/vite.config.ts

diff --git a/docs/config.json b/docs/config.json
index 637337e213..3f534f5089 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -822,9 +822,10 @@
         {
           "label": "solid",
           "children": [
-            { "to": "framework/solid/examples/basic", "label": "Basic" },
-            { "to": "framework/solid/examples/basic-app-table", "label": "Basic (useAppTable)" },
-            { "to": "framework/solid/examples/basic-table-helper", "label": "Basic with Helpers" },
+            { "to": "framework/solid/examples/basic-use-table", "label": "Basic (createTable)" },
+            { "to": "framework/solid/examples/basic-app-table", "label": "Basic (createAppTable)" },
+            { "to": "framework/solid/examples/basic-external-state", "label": "Basic (External State)" },
+            { "to": "framework/solid/examples/basic-external-store", "label": "Basic (External Store)" },
             { "to": "framework/solid/examples/column-groups", "label": "Header Groups" }
           ]
         },
@@ -1001,7 +1002,8 @@
           "label": "solid",
           "children": [
             { "to": "framework/solid/examples/bootstrap", "label": "Solid Bootstrap" },
-            { "to": "framework/solid/examples/composable-tables", "label": "Composable Tables" }]
+            { "to": "framework/solid/examples/composable-tables", "label": "Composable Tables" },
+            { "to": "framework/solid/examples/with-tanstack-query", "label": "With TanStack Query" }]
         },
         {
           "label": "vue",
diff --git a/examples/solid/basic-table-helper/.gitignore b/examples/solid/basic-external-state/.gitignore
similarity index 100%
rename from examples/solid/basic-table-helper/.gitignore
rename to examples/solid/basic-external-state/.gitignore
diff --git a/examples/solid/basic-table-helper/README.md b/examples/solid/basic-external-state/README.md
similarity index 100%
rename from examples/solid/basic-table-helper/README.md
rename to examples/solid/basic-external-state/README.md
diff --git a/examples/solid/basic-table-helper/index.html b/examples/solid/basic-external-state/index.html
similarity index 100%
rename from examples/solid/basic-table-helper/index.html
rename to examples/solid/basic-external-state/index.html
diff --git a/examples/solid/basic-table-helper/package.json b/examples/solid/basic-external-state/package.json
similarity index 81%
rename from examples/solid/basic-table-helper/package.json
rename to examples/solid/basic-external-state/package.json
index 75e21a3eda..b03083408c 100644
--- a/examples/solid/basic-table-helper/package.json
+++ b/examples/solid/basic-external-state/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tanstack-table-example-solid-basic-table-helper",
+  "name": "tanstack-table-example-solid-basic-external-state",
   "version": "0.0.0",
   "description": "",
   "scripts": {
@@ -11,6 +11,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@faker-js/faker": "^10.2.0",
     "typescript": "5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-solid": "^2.11.10"
diff --git a/examples/solid/basic-external-state/src/App.tsx b/examples/solid/basic-external-state/src/App.tsx
new file mode 100644
index 0000000000..5e43930fe9
--- /dev/null
+++ b/examples/solid/basic-external-state/src/App.tsx
@@ -0,0 +1,207 @@
+import {
+  createColumnHelper,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  flexRender,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+  createTable,
+} from '@tanstack/solid-table'
+import { For, createSignal } from 'solid-js'
+import { makeData } from './makeData'
+import type { PaginationState, SortingState } from '@tanstack/solid-table'
+import type { Person } from './makeData'
+
+const _features = tableFeatures({
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+  }),
+  columnHelper.accessor('visits', {
+    header: 'Visits',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+  }),
+])
+
+function App() {
+  const [data] = createSignal(makeData(1000))
+  const [sorting, setSorting] = createSignal<SortingState>([])
+  const [pagination, setPagination] = createSignal<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+
+  const table = createTable({
+    _features,
+    _rowModels: {
+      sortedRowModel: createSortedRowModel(sortFns),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
+    columns,
+    get data() {
+      return data()
+    },
+    state: {
+      get sorting() {
+        return sorting()
+      },
+      get pagination() {
+        return pagination()
+      },
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+  })
+
+  return (
+    <div class="p-2">
+      <table>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th colSpan={header.colSpan}>
+                      {header.isPlaceholder ? null : (
+                        <div
+                          class={
+                            header.column.getCanSort()
+                              ? 'cursor-pointer select-none'
+                              : ''
+                          }
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {{
+                            asc: ' 🔼',
+                            desc: ' 🔽',
+                          }[header.column.getIsSorted() as string] ?? null}
+                        </div>
+                      )}
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr>
+                <For each={row.getAllCells()}>
+                  {(cell) => (
+                    <td>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <div class="h-2" />
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {pagination().pageIndex + 1} of {table.getPageCount()}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            min="1"
+            max={table.getPageCount()}
+            value={pagination().pageIndex + 1}
+            onInput={(e) => {
+              const page = e.currentTarget.value
+                ? Number(e.currentTarget.value) - 1
+                : 0
+              table.setPageIndex(page)
+            }}
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          value={pagination().pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.currentTarget.value))
+          }}
+        >
+          {[10, 20, 30, 40, 50].map((pageSize) => (
+            <option value={pageSize}>Show {pageSize}</option>
+          ))}
+        </select>
+      </div>
+      <div class="h-4" />
+      <pre>
+        {JSON.stringify(
+          { sorting: sorting(), pagination: pagination() },
+          null,
+          2,
+        )}
+      </pre>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/solid/basic-table-helper/src/index.css b/examples/solid/basic-external-state/src/index.css
similarity index 100%
rename from examples/solid/basic-table-helper/src/index.css
rename to examples/solid/basic-external-state/src/index.css
diff --git a/examples/solid/basic-table-helper/src/index.tsx b/examples/solid/basic-external-state/src/index.tsx
similarity index 100%
rename from examples/solid/basic-table-helper/src/index.tsx
rename to examples/solid/basic-external-state/src/index.tsx
diff --git a/examples/solid/basic-external-state/src/makeData.ts b/examples/solid/basic-external-state/src/makeData.ts
new file mode 100644
index 0000000000..6311127267
--- /dev/null
+++ b/examples/solid/basic-external-state/src/makeData.ts
@@ -0,0 +1,48 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Array<Person>
+}
+
+const range = (len: number) => {
+  const arr: Array<number> = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0],
+  }
+}
+
+export function makeData(...lens: Array<number>) {
+  const makeDataLevel = (depth = 0): Array<Person> => {
+    const len = lens[depth]
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/solid/basic-table-helper/tsconfig.json b/examples/solid/basic-external-state/tsconfig.json
similarity index 100%
rename from examples/solid/basic-table-helper/tsconfig.json
rename to examples/solid/basic-external-state/tsconfig.json
diff --git a/examples/solid/basic-table-helper/vite.config.ts b/examples/solid/basic-external-state/vite.config.ts
similarity index 100%
rename from examples/solid/basic-table-helper/vite.config.ts
rename to examples/solid/basic-external-state/vite.config.ts
diff --git a/examples/solid/basic/.gitignore b/examples/solid/basic-external-store/.gitignore
similarity index 100%
rename from examples/solid/basic/.gitignore
rename to examples/solid/basic-external-store/.gitignore
diff --git a/examples/solid/basic/README.md b/examples/solid/basic-external-store/README.md
similarity index 100%
rename from examples/solid/basic/README.md
rename to examples/solid/basic-external-store/README.md
diff --git a/examples/solid/basic/index.html b/examples/solid/basic-external-store/index.html
similarity index 100%
rename from examples/solid/basic/index.html
rename to examples/solid/basic-external-store/index.html
diff --git a/examples/solid/basic-external-store/package.json b/examples/solid/basic-external-store/package.json
new file mode 100644
index 0000000000..8560c39cd4
--- /dev/null
+++ b/examples/solid/basic-external-store/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "tanstack-table-example-solid-basic-external-store",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@faker-js/faker": "^10.2.0",
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "solid-js": "^1.9.11"
+  }
+}
diff --git a/examples/solid/basic-external-store/src/App.tsx b/examples/solid/basic-external-store/src/App.tsx
new file mode 100644
index 0000000000..de969cbfc5
--- /dev/null
+++ b/examples/solid/basic-external-store/src/App.tsx
@@ -0,0 +1,214 @@
+import {
+  createColumnHelper,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTable,
+  flexRender,
+  getInitialTableState,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import { For, createSignal } from 'solid-js'
+import { makeData } from './makeData'
+import type { Person } from './makeData'
+import type { PaginationState, SortingState } from '@tanstack/solid-table'
+
+const _features = tableFeatures({
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+  }),
+  columnHelper.accessor('visits', {
+    header: 'Visits',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+  }),
+])
+
+function App() {
+  const [data] = createSignal(makeData(1000))
+  const [tableState, setTableState] = createSignal(
+    getInitialTableState(_features, {
+      sorting: [] as SortingState,
+      pagination: { pageIndex: 0, pageSize: 10 } as PaginationState,
+    }),
+  )
+
+  const table = createTable({
+    _features,
+    _rowModels: {
+      sortedRowModel: createSortedRowModel(sortFns),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
+    columns,
+    get data() {
+      return data()
+    },
+    state: {
+      get sorting() {
+        return tableState().sorting
+      },
+      get pagination() {
+        return tableState().pagination
+      },
+    },
+    onSortingChange: (updater) =>
+      setTableState((prev) => ({
+        ...prev,
+        sorting:
+          typeof updater === 'function' ? updater(prev.sorting) : updater,
+      })),
+    onPaginationChange: (updater) =>
+      setTableState((prev) => ({
+        ...prev,
+        pagination:
+          typeof updater === 'function' ? updater(prev.pagination) : updater,
+      })),
+    debugTable: true,
+  })
+
+  return (
+    <div class="p-2">
+      <table>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th colSpan={header.colSpan}>
+                      {header.isPlaceholder ? null : (
+                        <div
+                          class={
+                            header.column.getCanSort()
+                              ? 'cursor-pointer select-none'
+                              : ''
+                          }
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {{
+                            asc: ' 🔼',
+                            desc: ' 🔽',
+                          }[header.column.getIsSorted() as string] ?? null}
+                        </div>
+                      )}
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr>
+                <For each={row.getAllCells()}>
+                  {(cell) => (
+                    <td>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <div class="h-2" />
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {tableState().pagination.pageIndex + 1} of {table.getPageCount()}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            min="1"
+            max={table.getPageCount()}
+            value={tableState().pagination.pageIndex + 1}
+            onInput={(e) => {
+              const page = e.currentTarget.value
+                ? Number(e.currentTarget.value) - 1
+                : 0
+              table.setPageIndex(page)
+            }}
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          value={tableState().pagination.pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.currentTarget.value))
+          }}
+        >
+          {[10, 20, 30, 40, 50].map((pageSize) => (
+            <option value={pageSize}>Show {pageSize}</option>
+          ))}
+        </select>
+      </div>
+      <div class="h-4" />
+      <pre>{JSON.stringify(tableState(), null, 2)}</pre>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/solid/basic/src/index.css b/examples/solid/basic-external-store/src/index.css
similarity index 100%
rename from examples/solid/basic/src/index.css
rename to examples/solid/basic-external-store/src/index.css
diff --git a/examples/solid/basic/src/index.tsx b/examples/solid/basic-external-store/src/index.tsx
similarity index 100%
rename from examples/solid/basic/src/index.tsx
rename to examples/solid/basic-external-store/src/index.tsx
diff --git a/examples/solid/basic-external-store/src/makeData.ts b/examples/solid/basic-external-store/src/makeData.ts
new file mode 100644
index 0000000000..6311127267
--- /dev/null
+++ b/examples/solid/basic-external-store/src/makeData.ts
@@ -0,0 +1,48 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Array<Person>
+}
+
+const range = (len: number) => {
+  const arr: Array<number> = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0],
+  }
+}
+
+export function makeData(...lens: Array<number>) {
+  const makeDataLevel = (depth = 0): Array<Person> => {
+    const len = lens[depth]
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/solid/basic/tsconfig.json b/examples/solid/basic-external-store/tsconfig.json
similarity index 100%
rename from examples/solid/basic/tsconfig.json
rename to examples/solid/basic-external-store/tsconfig.json
diff --git a/examples/solid/basic/vite.config.ts b/examples/solid/basic-external-store/vite.config.ts
similarity index 100%
rename from examples/solid/basic/vite.config.ts
rename to examples/solid/basic-external-store/vite.config.ts
diff --git a/examples/solid/basic-table-helper/src/App.tsx b/examples/solid/basic-table-helper/src/App.tsx
deleted file mode 100644
index 59cdfc9a45..0000000000
--- a/examples/solid/basic-table-helper/src/App.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { createTableHelper, flexRender } from '@tanstack/solid-table'
-import { For, createSignal } from 'solid-js'
-
-// This example uses the new `createTableHelper` method to create a re-usable table helper object instead of independently using the standalone `createTable` hook and `createColumnHelper` method. You can choose to use either way.
-
-// 1. Define what the shape of your data will be for each row
-type Person = {
-  firstName: string
-  lastName: string
-  age: number
-  visits: number
-  status: string
-  progress: number
-}
-
-// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
-const defaultData: Array<Person> = [
-  {
-    firstName: 'tanner',
-    lastName: 'linsley',
-    age: 24,
-    visits: 100,
-    status: 'In Relationship',
-    progress: 50,
-  },
-  {
-    firstName: 'tandy',
-    lastName: 'miller',
-    age: 40,
-    visits: 40,
-    status: 'Single',
-    progress: 80,
-  },
-  {
-    firstName: 'joe',
-    lastName: 'dirte',
-    age: 45,
-    visits: 20,
-    status: 'Complicated',
-    progress: 10,
-  },
-]
-
-// 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
-const tableHelper = createTableHelper({
-  _features: {},
-  _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
-
-  TData: {} as Person,
-  debugTable: true,
-})
-
-// 4. Create a helper object to help define our columns
-// const { columnHelper } = tableHelper // if TData was set in the table helper options - otherwise use the createColumnHelper method below
-const columnHelper = tableHelper.createColumnHelper<Person>()
-
-// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
-const columns = columnHelper.columns([
-  // accessorKey method (most common for simple use-cases)
-  columnHelper.accessor('firstName', {
-    cell: (info) => info.getValue(),
-    footer: (info) => info.column.id,
-  }),
-  // accessorFn used (alternative) along with a custom id
-  columnHelper.accessor((row) => row.lastName, {
-    id: 'lastName',
-    cell: (info) => <i>{info.getValue()}</i>,
-    header: () => <span>Last Name</span>,
-    footer: (info) => info.column.id,
-  }),
-  // accessorFn used to transform the data
-  columnHelper.accessor((row) => Number(row.age), {
-    id: 'age',
-    header: () => 'Age',
-    cell: (info) => info.renderValue(),
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('visits', {
-    header: () => <span>Visits</span>,
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('status', {
-    header: 'Status',
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('progress', {
-    header: 'Profile Progress',
-    footer: (info) => info.column.id,
-  }),
-])
-
-function App() {
-  // 6. Store data with a stable reference
-  const [data, setData] = createSignal(defaultData)
-  const rerender = () => setData(defaultData)
-
-  // 7. Create the table instance with the required columns and data.
-  // Features and row models are already defined in the table helper object above
-  const table = tableHelper.createTable({
-    columns,
-    get data() {
-      return data()
-    },
-    // add additional table options here or in the table helper above
-  })
-
-  return (
-    <div class="p-2">
-      <table>
-        <thead>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <tr>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <th>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                    </th>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </thead>
-        <tbody>
-          <For each={table.getRowModel().rows}>
-            {(row) => (
-              <tr>
-                <For each={row.getAllCells()}>
-                  {(cell) => (
-                    <td>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tbody>
-        <tfoot>
-          <For each={table.getFooterGroups()}>
-            {(footerGroup) => (
-              <tr>
-                <For each={footerGroup.headers}>
-                  {(header) => (
-                    <th>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.footer,
-                            header.getContext(),
-                          )}
-                    </th>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tfoot>
-      </table>
-      <div class="h-4" />
-      <button onClick={() => rerender()} class="border p-2">
-        Rerender
-      </button>
-    </div>
-  )
-}
-
-export default App
diff --git a/examples/solid/basic-use-table/.gitignore b/examples/solid/basic-use-table/.gitignore
new file mode 100644
index 0000000000..76add878f8
--- /dev/null
+++ b/examples/solid/basic-use-table/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/examples/solid/basic-use-table/README.md b/examples/solid/basic-use-table/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/solid/basic-use-table/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/solid/basic-use-table/index.html b/examples/solid/basic-use-table/index.html
new file mode 100644
index 0000000000..7d9b4f7c51
--- /dev/null
+++ b/examples/solid/basic-use-table/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/basic/package.json b/examples/solid/basic-use-table/package.json
similarity index 87%
rename from examples/solid/basic/package.json
rename to examples/solid/basic-use-table/package.json
index b630fd4f2e..b996079ae9 100644
--- a/examples/solid/basic/package.json
+++ b/examples/solid/basic-use-table/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tanstack-table-example-solid-basic",
+  "name": "tanstack-table-example-solid-basic-use-table",
   "version": "0.0.0",
   "description": "",
   "scripts": {
diff --git a/examples/solid/basic/src/App.tsx b/examples/solid/basic-use-table/src/App.tsx
similarity index 65%
rename from examples/solid/basic/src/App.tsx
rename to examples/solid/basic-use-table/src/App.tsx
index bb0f8df7c8..ad9441e4c3 100644
--- a/examples/solid/basic/src/App.tsx
+++ b/examples/solid/basic-use-table/src/App.tsx
@@ -2,9 +2,6 @@ import { createTable, flexRender, tableFeatures } from '@tanstack/solid-table'
 import { For, createSignal } from 'solid-js'
 import type { ColumnDef } from '@tanstack/solid-table'
 
-// This example uses the classic standalone `useTable` hook to create a table without the new `createTableHelper` util.
-
-// 1. Define what the shape of your data will be for each row
 type Person = {
   firstName: string
   lastName: string
@@ -14,7 +11,6 @@ type Person = {
   progress: number
 }
 
-// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
 const defaultData: Array<Person> = [
   {
     firstName: 'tanner',
@@ -40,58 +36,58 @@ const defaultData: Array<Person> = [
     status: 'Complicated',
     progress: 10,
   },
+  {
+    firstName: 'kevin',
+    lastName: 'vandy',
+    age: 12,
+    visits: 100,
+    status: 'Single',
+    progress: 70,
+  },
 ]
 
-// 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
-const _features = tableFeatures({}) // util method to create sharable TFeatures object/type
+const _features = tableFeatures({})
 
-// 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns. Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns.
-const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
+const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     accessorKey: 'firstName',
+    header: 'First Name',
     cell: (info) => info.getValue(),
-    footer: (info) => info.column.id,
   },
   {
     accessorFn: (row) => row.lastName,
     id: 'lastName',
-    cell: (info) => <i>{info.getValue<string>()}</i>,
     header: () => <span>Last Name</span>,
-    footer: (info) => info.column.id,
+    cell: (info) => <i>{info.getValue<string>()}</i>,
   },
   {
-    accessorKey: 'age',
+    accessorFn: (row) => Number(row.age),
+    id: 'age',
     header: () => 'Age',
-    footer: (info) => info.column.id,
+    cell: (info) => info.renderValue(),
   },
   {
     accessorKey: 'visits',
     header: () => <span>Visits</span>,
-    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'status',
     header: 'Status',
-    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'progress',
     header: 'Profile Progress',
-    footer: (info) => info.column.id,
   },
 ]
 
 function App() {
-  // 5. Store data with a stable reference
-  const [data, setData] = createSignal(defaultData)
-  const rerender = () => setData(defaultData)
+  const [data, setData] = createSignal([...defaultData])
+  const rerender = () => setData([...defaultData])
 
-  // 6. Create the table instance with required _features, columns, and data
   const table = createTable({
-    _features, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking)
-    _rowModels: {}, // `Core` row model is now included by default, but you can still override it here
-    // add additional table options here
-    columns: defaultColumns,
+    _features,
+    _rowModels: {},
+    columns,
     get data() {
       return data()
     },
@@ -160,7 +156,7 @@ function App() {
         </tfoot>
       </table>
       <div class="h-4" />
-      <button onClick={() => rerender()} class="border p-2">
+      <button onClick={rerender} class="border p-2">
         Rerender
       </button>
     </div>
diff --git a/examples/solid/basic-use-table/src/index.css b/examples/solid/basic-use-table/src/index.css
new file mode 100644
index 0000000000..43c09e0f6b
--- /dev/null
+++ b/examples/solid/basic-use-table/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
diff --git a/examples/solid/basic-use-table/src/index.tsx b/examples/solid/basic-use-table/src/index.tsx
new file mode 100644
index 0000000000..ea9c952177
--- /dev/null
+++ b/examples/solid/basic-use-table/src/index.tsx
@@ -0,0 +1,6 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import './index.css'
+import App from './App'
+
+render(() => <App />, document.getElementById('root') as HTMLElement)
diff --git a/examples/solid/basic-use-table/tsconfig.json b/examples/solid/basic-use-table/tsconfig.json
new file mode 100644
index 0000000000..7ab027b8d2
--- /dev/null
+++ b/examples/solid/basic-use-table/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/solid/basic-use-table/vite.config.ts b/examples/solid/basic-use-table/vite.config.ts
new file mode 100644
index 0000000000..d27427972d
--- /dev/null
+++ b/examples/solid/basic-use-table/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+})
diff --git a/examples/solid/with-tanstack-query/.gitignore b/examples/solid/with-tanstack-query/.gitignore
new file mode 100644
index 0000000000..76add878f8
--- /dev/null
+++ b/examples/solid/with-tanstack-query/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/examples/solid/with-tanstack-query/README.md b/examples/solid/with-tanstack-query/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/solid/with-tanstack-query/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/solid/with-tanstack-query/index.html b/examples/solid/with-tanstack-query/index.html
new file mode 100644
index 0000000000..7d9b4f7c51
--- /dev/null
+++ b/examples/solid/with-tanstack-query/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/with-tanstack-query/package.json b/examples/solid/with-tanstack-query/package.json
new file mode 100644
index 0000000000..cbe6091d06
--- /dev/null
+++ b/examples/solid/with-tanstack-query/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-table-example-solid-with-tanstack-query",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@faker-js/faker": "^10.2.0",
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "@tanstack/solid-query": "^5.90.20",
+    "@tanstack/solid-store": "^0.9.2",
+    "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "solid-js": "^1.9.11"
+  }
+}
diff --git a/examples/solid/with-tanstack-query/src/App.tsx b/examples/solid/with-tanstack-query/src/App.tsx
new file mode 100644
index 0000000000..9afad1a617
--- /dev/null
+++ b/examples/solid/with-tanstack-query/src/App.tsx
@@ -0,0 +1,193 @@
+import { keepPreviousData, useQuery } from '@tanstack/solid-query'
+import { createStore, useStore } from '@tanstack/solid-store'
+import {
+  createColumnHelper,
+  createTable,
+  flexRender,
+  getInitialTableState,
+  rowPaginationFeature,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import { For } from 'solid-js'
+import { fetchData } from './fetchData'
+import type { Person } from './fetchData'
+
+const _features = tableFeatures({
+  rowPaginationFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+  }),
+  columnHelper.accessor('visits', {
+    header: 'Visits',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+  }),
+])
+
+const myTableStore = createStore(
+  getInitialTableState(_features, {
+    pagination: { pageIndex: 0, pageSize: 10 },
+  }),
+)
+
+function App() {
+  const state = useStore(myTableStore)
+
+  const dataQuery = useQuery(() => ({
+    queryKey: ['data', state().pagination],
+    queryFn: () => fetchData(state().pagination),
+    placeholderData: keepPreviousData,
+  }))
+
+  const defaultData: Array<Person> = []
+
+  const table = createTable({
+    _features,
+    _rowModels: {},
+    columns,
+    get data() {
+      return dataQuery.data?.rows ?? defaultData
+    },
+    get rowCount() {
+      return dataQuery.data?.rowCount
+    },
+    store: myTableStore,
+    manualPagination: true,
+    debugTable: true,
+  })
+
+  return (
+    <div class="p-2">
+      <div class="h-2" />
+      <table>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th colSpan={header.colSpan}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr>
+                <For each={row.getAllCells()}>
+                  {(cell) => (
+                    <td>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <div class="h-2" />
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          onClick={() => table.firstPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+        <button
+          class="border rounded p-1"
+          onClick={() => table.lastPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {state().pagination.pageIndex + 1} of{' '}
+            {table.getPageCount().toLocaleString()}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            min="1"
+            max={table.getPageCount()}
+            value={state().pagination.pageIndex + 1}
+            onInput={(e) => {
+              const page = e.currentTarget.value
+                ? Number(e.currentTarget.value) - 1
+                : 0
+              table.setPageIndex(page)
+            }}
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          value={state().pagination.pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.currentTarget.value))
+          }}
+        >
+          {[10, 20, 30, 40, 50].map((pageSize) => (
+            <option value={pageSize}>Show {pageSize}</option>
+          ))}
+        </select>
+        {dataQuery.isFetching ? 'Loading...' : null}
+      </div>
+      <div>
+        Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
+        {dataQuery.data?.rowCount.toLocaleString()} Rows
+      </div>
+      <pre>{JSON.stringify(state(), null, 2)}</pre>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/solid/with-tanstack-query/src/fetchData.ts b/examples/solid/with-tanstack-query/src/fetchData.ts
new file mode 100644
index 0000000000..0ad745b375
--- /dev/null
+++ b/examples/solid/with-tanstack-query/src/fetchData.ts
@@ -0,0 +1,66 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Array<Person>
+}
+
+const range = (len: number) => {
+  const arr: Array<number> = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0],
+  }
+}
+
+function makeData(...lens: Array<number>) {
+  const makeDataLevel = (depth = 0): Array<Person> => {
+    const len = lens[depth]
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
+
+const data = makeData(10000)
+
+export async function fetchData(options: {
+  pageIndex: number
+  pageSize: number
+}) {
+  await new Promise((resolve) => setTimeout(resolve, 500))
+
+  return {
+    rows: data.slice(
+      options.pageIndex * options.pageSize,
+      (options.pageIndex + 1) * options.pageSize,
+    ),
+    pageCount: Math.ceil(data.length / options.pageSize),
+    rowCount: data.length,
+  }
+}
diff --git a/examples/solid/with-tanstack-query/src/index.css b/examples/solid/with-tanstack-query/src/index.css
new file mode 100644
index 0000000000..43c09e0f6b
--- /dev/null
+++ b/examples/solid/with-tanstack-query/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
diff --git a/examples/solid/with-tanstack-query/src/index.tsx b/examples/solid/with-tanstack-query/src/index.tsx
new file mode 100644
index 0000000000..43087f3ce9
--- /dev/null
+++ b/examples/solid/with-tanstack-query/src/index.tsx
@@ -0,0 +1,15 @@
+import { render } from 'solid-js/web'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import './index.css'
+import App from './App'
+
+const queryClient = new QueryClient()
+
+render(
+  () => (
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  ),
+  document.getElementById('root') as HTMLElement,
+)
diff --git a/examples/solid/with-tanstack-query/tsconfig.json b/examples/solid/with-tanstack-query/tsconfig.json
new file mode 100644
index 0000000000..7ab027b8d2
--- /dev/null
+++ b/examples/solid/with-tanstack-query/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/solid/with-tanstack-query/vite.config.ts b/examples/solid/with-tanstack-query/vite.config.ts
new file mode 100644
index 0000000000..b80a99b402
--- /dev/null
+++ b/examples/solid/with-tanstack-query/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a75f1f4f68..c15c4d049c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2628,7 +2628,7 @@ importers:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2)
 
-  examples/solid/basic:
+  examples/solid/basic-app-table:
     dependencies:
       '@tanstack/solid-table':
         specifier: ^9.0.0-alpha.10
@@ -2647,7 +2647,7 @@ importers:
         specifier: ^2.11.10
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
 
-  examples/solid/basic-app-table:
+  examples/solid/basic-external-state:
     dependencies:
       '@tanstack/solid-table':
         specifier: ^9.0.0-alpha.10
@@ -2656,6 +2656,9 @@ importers:
         specifier: ^1.9.11
         version: 1.9.11
     devDependencies:
+      '@faker-js/faker':
+        specifier: ^10.2.0
+        version: 10.2.0
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -2666,7 +2669,29 @@ importers:
         specifier: ^2.11.10
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
 
-  examples/solid/basic-table-helper:
+  examples/solid/basic-external-store:
+    dependencies:
+      '@tanstack/solid-table':
+        specifier: ^9.0.0-alpha.10
+        version: link:../../../packages/solid-table
+      solid-js:
+        specifier: ^1.9.11
+        version: 1.9.11
+    devDependencies:
+      '@faker-js/faker':
+        specifier: ^10.2.0
+        version: 10.2.0
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
+
+  examples/solid/basic-use-table:
     dependencies:
       '@tanstack/solid-table':
         specifier: ^9.0.0-alpha.10
@@ -2864,6 +2889,34 @@ importers:
         specifier: ^2.11.10
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
 
+  examples/solid/with-tanstack-query:
+    dependencies:
+      '@tanstack/solid-query':
+        specifier: ^5.90.20
+        version: 5.90.23(solid-js@1.9.11)
+      '@tanstack/solid-store':
+        specifier: ^0.9.2
+        version: 0.9.2(solid-js@1.9.11)
+      '@tanstack/solid-table':
+        specifier: ^9.0.0-alpha.10
+        version: link:../../../packages/solid-table
+      solid-js:
+        specifier: ^1.9.11
+        version: 1.9.11
+    devDependencies:
+      '@faker-js/faker':
+        specifier: ^10.2.0
+        version: 10.2.0
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.8.2))
+
   examples/svelte/basic:
     devDependencies:
       '@rollup/plugin-replace':
@@ -7294,6 +7347,11 @@ packages:
     peerDependencies:
       solid-js: '>=1.9.7'
 
+  '@tanstack/solid-query@5.90.23':
+    resolution: {integrity: sha512-pbZc4+Kgm7ktzIuu01R3KOWfazQKgNp4AZvW0RSvv+sNMpYoileUDAkXEcjDJe6RJmb3fVvTR4LlcSL5pxDElQ==}
+    peerDependencies:
+      solid-js: ^1.6.0
+
   '@tanstack/solid-store@0.9.2':
     resolution: {integrity: sha512-W6D6WnIL0Fch2zcLd7qCFf3eLD6AqwZiPoQnoRFKhe8DFXdxM4GRvfLpsAIQQHsun97EcttbwbfVq14SZfT7jg==}
     peerDependencies:
@@ -7308,13 +7366,12 @@ packages:
   '@tanstack/store@0.8.1':
     resolution: {integrity: sha512-PtOisLjUZPz5VyPRSCGjNOlwTvabdTBQ2K80DpVL1chGVr35WRxfeavAPdNq6pm/t7F8GhoR2qtmkkqtCEtHYw==}
 
+  '@tanstack/store@0.9.1':
+    resolution: {integrity: sha512-+qcNkOy0N1qSGsP7omVCW0SDrXtaDcycPqBDE726yryiA5eTDFpjBReaYjghVJwNf1pcPMyzIwTGlYjCSQR0Fg==}
+
   '@tanstack/store@0.9.2':
     resolution: {integrity: sha512-K013lUJEFJK2ofFQ/hZKJUmCnpcV00ebLyOyFOWQvyQHUOZp/iYO84BM6aOGiV81JzwbX0APTVmW8YI7yiG5oA==}
 
-  '@tanstack/store@https://pkg.pr.new/@tanstack/store@289':
-    resolution: {tarball: https://pkg.pr.new/@tanstack/store@289}
-    version: 0.9.1
-
   '@tanstack/svelte-store@0.10.1':
     resolution: {integrity: sha512-heeyV9bZQHbEJyJ7oWegQXmcyA8NSPP58JsZgRpvf8+lwEMfX+MW1IvPJbGZqmH+poULAz7DDxjC4JEe7l57LA==}
     peerDependencies:
@@ -15673,7 +15730,7 @@ snapshots:
 
   '@tanstack/preact-store@0.11.1(preact@10.28.2)':
     dependencies:
-      '@tanstack/store': https://pkg.pr.new/@tanstack/store@289
+      '@tanstack/store': 0.9.1
       preact: 10.28.2
 
   '@tanstack/publish-config@0.2.2':
@@ -15823,6 +15880,11 @@ snapshots:
       - csstype
       - utf-8-validate
 
+  '@tanstack/solid-query@5.90.23(solid-js@1.9.11)':
+    dependencies:
+      '@tanstack/query-core': 5.90.20
+      solid-js: 1.9.11
+
   '@tanstack/solid-store@0.9.2(solid-js@1.9.11)':
     dependencies:
       '@tanstack/store': 0.9.2
@@ -15834,13 +15896,13 @@ snapshots:
 
   '@tanstack/store@0.8.1': {}
 
-  '@tanstack/store@0.9.2': {}
+  '@tanstack/store@0.9.1': {}
 
-  '@tanstack/store@https://pkg.pr.new/@tanstack/store@289': {}
+  '@tanstack/store@0.9.2': {}
 
   '@tanstack/svelte-store@0.10.1(svelte@5.48.5)':
     dependencies:
-      '@tanstack/store': https://pkg.pr.new/@tanstack/store@289
+      '@tanstack/store': 0.9.1
       svelte: 5.48.5
 
   '@tanstack/typedoc-config@0.3.3(typescript@5.9.3)':