diff --git a/examples/angular/composable-tables/src/app/components/cell-components.ts b/examples/angular/composable-tables/src/app/components/cell-components.ts
index 3cca4ec1d2..f8a4622e39 100644
--- a/examples/angular/composable-tables/src/app/components/cell-components.ts
+++ b/examples/angular/composable-tables/src/app/components/cell-components.ts
@@ -1,4 +1,4 @@
-import { Component, computed } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core'
 import { injectFlexRenderContext } from '@tanstack/angular-table'
 import { CurrencyPipe } from '@angular/common'
 import { injectTableCellContext } from '../table'
@@ -20,6 +20,27 @@ export class TextCell {
     injectFlexRenderContext<CellContext<TableFeatures, any, string>>()
 }
 
+@Component({
+  selector: 'table-select-cell',
+  host: {
+    class: 'selection-cell',
+  },
+  template: `
+    <input
+      type="checkbox"
+      [checked]="row().getIsSelected()"
+      [disabled]="!row().getCanSelect()"
+      [indeterminate]="row().getIsSomeSelected()"
+      (change)="row().getToggleSelectedHandler()($event)"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectCell {
+  readonly cell = injectTableCellContext()
+  readonly row = computed(() => this.cell().row)
+}
+
 @Component({
   selector: 'span',
   host: {
diff --git a/examples/angular/composable-tables/src/app/components/header-components.ts b/examples/angular/composable-tables/src/app/components/header-components.ts
index 7afeaacb8e..65e195dd0b 100644
--- a/examples/angular/composable-tables/src/app/components/header-components.ts
+++ b/examples/angular/composable-tables/src/app/components/header-components.ts
@@ -9,7 +9,7 @@
 // )
 // }
 
-import { Component, computed } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core'
 import { flexRenderComponent } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { injectTableHeaderContext } from '../table'
@@ -24,6 +24,26 @@ export function SortIndicator(): string | null {
   return `<span class="sort-indicator">${sorted === 'asc' ? '🔼' : '🔽'}</span>`
 }
 
+@Component({
+  selector: 'table-select-header',
+  host: {
+    class: 'selection-cell',
+  },
+  template: `
+    <input
+      type="checkbox"
+      [checked]="table().getIsAllRowsSelected()"
+      [indeterminate]="table().getIsSomeRowsSelected()"
+      (change)="table().getToggleAllRowsSelectedHandler()($event)"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectHeader {
+  readonly header = injectTableHeaderContext()
+  readonly table = computed(() => this.header().getContext().table)
+}
+
 export function ColumnFilter(): FlexRenderComponent | null {
   const header = injectTableHeaderContext()
   if (!header().column.getCanFilter()) return null
diff --git a/examples/angular/composable-tables/src/app/components/products-table/products-table.html b/examples/angular/composable-tables/src/app/components/products-table/products-table.html
index ad0643dbea..f4eb639602 100644
--- a/examples/angular/composable-tables/src/app/components/products-table/products-table.html
+++ b/examples/angular/composable-tables/src/app/components/products-table/products-table.html
@@ -6,65 +6,67 @@
     "
   />
 
-  <table>
-    <thead>
-      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
-        <tr>
-          @for (_header of headerGroup.headers; track _header.id) {
-            @let header = table.appHeader(_header);
-            @if (!header.isPlaceholder) {
-              <th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
-                <ng-container *flexRenderHeader="header; let header">
-                  {{ header }}
-                </ng-container>
+  <div class="table-scroll">
+    <table>
+      <thead>
+        @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+          <tr>
+            @for (_header of headerGroup.headers; track _header.id) {
+              @let header = table.appHeader(_header);
+              @if (!header.isPlaceholder) {
+                <th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
+                  <ng-container *flexRenderHeader="header; let header">
+                    {{ header }}
+                  </ng-container>
 
-                <ng-container
-                  *flexRender="header.SortIndicator; props: header.getContext(); let value"
-                >
-                  <div [innerHTML]="value"></div>
-                </ng-container>
+                  <ng-container
+                    *flexRender="header.SortIndicator; props: header.getContext(); let value"
+                  >
+                    <div [innerHTML]="value"></div>
+                  </ng-container>
 
-                <ng-container
-                  *flexRender="header.ColumnFilter; props: header.getContext(); let value"
-                >
-                  <div [innerHTML]="value"></div>
+                  <ng-container
+                    *flexRender="header.ColumnFilter; props: header.getContext(); let value"
+                  >
+                    <div [innerHTML]="value"></div>
+                  </ng-container>
+                </th>
+              }
+            }
+          </tr>
+        }
+      </thead>
+      <tbody>
+        @for (row of table.getRowModel().rows; track row.id) {
+          <tr>
+            @for (cell of row.getAllCells(); track cell.id) {
+              <td [tanStackTableCell]="cell">
+                <ng-container *flexRenderCell="cell; let cell">
+                  {{ cell }}
                 </ng-container>
-              </th>
+              </td>
             }
-          }
-        </tr>
-      }
-    </thead>
-    <tbody>
-      @for (row of table.getRowModel().rows; track row.id) {
-        <tr>
-          @for (cell of row.getAllCells(); track cell.id) {
-            <td [tanStackTableCell]="cell">
-              <ng-container *flexRenderCell="cell; let cell">
-                {{ cell }}
-              </ng-container>
-            </td>
-          }
-        </tr>
-      }
-    </tbody>
+          </tr>
+        }
+      </tbody>
 
-    <tfoot>
-      @for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
-        <tr>
-          @for (footer of footerGroup.headers; track footer.id) {
-            <th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
-              @if (!footer.isPlaceholder) {
-                <ng-container *flexRenderFooter="footer; let footer">
-                  {{ footer }}
-                </ng-container>
-              }
-            </th>
-          }
-        </tr>
-      }
-    </tfoot>
-  </table>
+      <tfoot>
+        @for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
+          <tr>
+            @for (footer of footerGroup.headers; track footer.id) {
+              <th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
+                @if (!footer.isPlaceholder) {
+                  <ng-container *flexRenderFooter="footer; let footer">
+                    {{ footer }}
+                  </ng-container>
+                }
+              </th>
+            }
+          </tr>
+        }
+      </tfoot>
+    </table>
+  </div>
 
   <ng-container *ngComponentOutlet="table.PaginationControls" />
 
diff --git a/examples/angular/composable-tables/src/app/components/products-table/products-table.ts b/examples/angular/composable-tables/src/app/components/products-table/products-table.ts
index c8bad25b6d..303580cdd0 100644
--- a/examples/angular/composable-tables/src/app/components/products-table/products-table.ts
+++ b/examples/angular/composable-tables/src/app/components/products-table/products-table.ts
@@ -5,6 +5,7 @@ import {
   TanStackTable,
   TanStackTableCell,
   TanStackTableHeader,
+  flexRenderComponent,
 } from '@tanstack/angular-table'
 import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeProductData } from '../../makeData'
@@ -34,6 +35,11 @@ export class ProductsTable {
   readonly data = signal(makeProductData(1_000))
 
   readonly columns = productColumnHelper.columns([
+    productColumnHelper.display({
+      id: 'select',
+      header: ({ header }) => flexRenderComponent(header.SelectHeader),
+      cell: ({ cell }) => flexRenderComponent(cell.SelectCell),
+    }),
     productColumnHelper.accessor('name', {
       header: 'Product Name',
       footer: (props) => props.column.id,
@@ -66,6 +72,7 @@ export class ProductsTable {
     columns: this.columns,
     data: this.data(),
     getRowId: (row) => row.id,
+    enableRowSelection: true,
     // more table options
   }))
 
diff --git a/examples/angular/composable-tables/src/app/components/users-table/users-table.html b/examples/angular/composable-tables/src/app/components/users-table/users-table.html
index 3744b5b0f7..f08f9499c2 100644
--- a/examples/angular/composable-tables/src/app/components/users-table/users-table.html
+++ b/examples/angular/composable-tables/src/app/components/users-table/users-table.html
@@ -6,65 +6,67 @@
     "
   />
 
-  <table>
-    <thead>
-      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
-        <tr>
-          @for (_header of headerGroup.headers; track _header.id) {
-            @let header = table.appHeader(_header);
-            @if (!header.isPlaceholder) {
-              <th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
-                <ng-container *flexRenderHeader="header; let header">
-                  {{ header }}
-                </ng-container>
+  <div class="table-scroll">
+    <table>
+      <thead>
+        @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+          <tr>
+            @for (_header of headerGroup.headers; track _header.id) {
+              @let header = table.appHeader(_header);
+              @if (!header.isPlaceholder) {
+                <th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
+                  <ng-container *flexRenderHeader="header; let header">
+                    {{ header }}
+                  </ng-container>
 
-                <ng-container
-                  *flexRender="header.SortIndicator; props: header.getContext(); let value"
-                >
-                  <div [innerHTML]="value"></div>
-                </ng-container>
+                  <ng-container
+                    *flexRender="header.SortIndicator; props: header.getContext(); let value"
+                  >
+                    <div [innerHTML]="value"></div>
+                  </ng-container>
 
-                <ng-container
-                  *flexRender="header.ColumnFilter; props: header.getContext(); let value"
-                >
-                  <div [innerHTML]="value"></div>
+                  <ng-container
+                    *flexRender="header.ColumnFilter; props: header.getContext(); let value"
+                  >
+                    <div [innerHTML]="value"></div>
+                  </ng-container>
+                </th>
+              }
+            }
+          </tr>
+        }
+      </thead>
+      <tbody>
+        @for (row of table.getRowModel().rows; track row.id) {
+          <tr>
+            @for (cell of row.getAllCells(); track cell.id) {
+              <td [tanStackTableCell]="cell">
+                <ng-container *flexRenderCell="cell; let cell">
+                  {{ cell }}
                 </ng-container>
-              </th>
+              </td>
             }
-          }
-        </tr>
-      }
-    </thead>
-    <tbody>
-      @for (row of table.getRowModel().rows; track row.id) {
-        <tr>
-          @for (cell of row.getAllCells(); track cell.id) {
-            <td [tanStackTableCell]="cell">
-              <ng-container *flexRenderCell="cell; let cell">
-                {{ cell }}
-              </ng-container>
-            </td>
-          }
-        </tr>
-      }
-    </tbody>
+          </tr>
+        }
+      </tbody>
 
-    <tfoot>
-      @for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
-        <tr>
-          @for (footer of footerGroup.headers; track footer.id) {
-            <th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
-              @if (!footer.isPlaceholder) {
-                <ng-container *flexRenderFooter="footer; let footer">
-                  {{ footer }}
-                </ng-container>
-              }
-            </th>
-          }
-        </tr>
-      }
-    </tfoot>
-  </table>
+      <tfoot>
+        @for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
+          <tr>
+            @for (footer of footerGroup.headers; track footer.id) {
+              <th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
+                @if (!footer.isPlaceholder) {
+                  <ng-container *flexRenderFooter="footer; let footer">
+                    {{ footer }}
+                  </ng-container>
+                }
+              </th>
+            }
+          </tr>
+        }
+      </tfoot>
+    </table>
+  </div>
 
   <ng-container *ngComponentOutlet="table.PaginationControls" />
 
diff --git a/examples/angular/composable-tables/src/app/components/users-table/users-table.ts b/examples/angular/composable-tables/src/app/components/users-table/users-table.ts
index 7441694757..ac07756c0d 100644
--- a/examples/angular/composable-tables/src/app/components/users-table/users-table.ts
+++ b/examples/angular/composable-tables/src/app/components/users-table/users-table.ts
@@ -35,6 +35,11 @@ export class UsersTable {
   readonly data = signal(makeData(1_000))
 
   readonly columns = personColumnHelper.columns([
+    personColumnHelper.display({
+      id: 'select',
+      header: ({ header }) => flexRenderComponent(header.SelectHeader),
+      cell: ({ cell }) => flexRenderComponent(cell.SelectCell),
+    }),
     personColumnHelper.accessor('firstName', {
       header: 'First Name',
       footer: ({ header }) => flexRenderComponent(header.FooterColumnId),
@@ -77,6 +82,7 @@ export class UsersTable {
     columns: this.columns,
     data: this.data(),
     debugTable: true,
+    enableRowSelection: true,
     // more table options
   }))
 
diff --git a/examples/angular/composable-tables/src/app/table.ts b/examples/angular/composable-tables/src/app/table.ts
index cff38db8bc..5d6a897920 100644
--- a/examples/angular/composable-tables/src/app/table.ts
+++ b/examples/angular/composable-tables/src/app/table.ts
@@ -13,6 +13,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -31,6 +32,7 @@ import {
   PriceCell,
   ProgressCell,
   RowActionsCell,
+  SelectCell,
   StatusCell,
   TextCell,
 } from './components/cell-components'
@@ -39,6 +41,7 @@ import {
   ColumnFilter,
   FooterColumnId,
   FooterSum,
+  SelectHeader,
   SortIndicator,
 } from './components/header-components'
 
@@ -66,6 +69,7 @@ export const {
   features: tableFeatures({
     columnFilteringFeature,
     rowPaginationFeature,
+    rowSelectionFeature,
     rowSortingFeature,
     sortedRowModel: createSortedRowModel(),
     filteredRowModel: createFilteredRowModel(),
@@ -86,6 +90,7 @@ export const {
 
   // Register cell-level components (accessible via cell.ComponentName in AppCell)
   cellComponents: {
+    SelectCell,
     TextCell,
     NumberCell,
     ProgressCell,
@@ -97,6 +102,7 @@ export const {
 
   // Register header/footer-level components (accessible via header.ComponentName in AppHeader/AppFooter)
   headerComponents: {
+    SelectHeader,
     SortIndicator,
     ColumnFilter,
     FooterColumnId,
diff --git a/examples/angular/composable-tables/src/styles.css b/examples/angular/composable-tables/src/styles.css
index 4d8fef0142..b171dde3f0 100644
--- a/examples/angular/composable-tables/src/styles.css
+++ b/examples/angular/composable-tables/src/styles.css
@@ -35,6 +35,18 @@ tfoot th {
   font-weight: normal;
 }
 
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .table-container {
   padding: 16px;
   max-width: 1200px;
diff --git a/examples/lit/composable-tables/src/components/products-table.ts b/examples/lit/composable-tables/src/components/products-table.ts
index 96d75df3c4..1c40109b92 100644
--- a/examples/lit/composable-tables/src/components/products-table.ts
+++ b/examples/lit/composable-tables/src/components/products-table.ts
@@ -11,6 +11,26 @@ const productColumnHelper = createAppColumnHelper<Product>()
 
 // Define columns — different structure than Users table, same reusable components
 const columns = productColumnHelper.columns([
+  productColumnHelper.display({
+    id: 'select',
+    header: ({ table }) => html`
+      <input
+        type="checkbox"
+        @change=${table.getToggleAllRowsSelectedHandler()}
+        .checked=${table.getIsAllRowsSelected()}
+        .indeterminate=${table.getIsSomeRowsSelected()}
+      />
+    `,
+    cell: ({ row }) => html`
+      <input
+        type="checkbox"
+        @change=${row.getToggleSelectedHandler()}
+        .checked=${row.getIsSelected()}
+        ?disabled=${!row.getCanSelect()}
+        .indeterminate=${row.getIsSomeSelected()}
+      />
+    `,
+  }),
   productColumnHelper.accessor('name', {
     header: 'Product Name',
     footer: (props) => props.column.id,
@@ -55,11 +75,13 @@ export class ProductsTable extends LitElement {
         get data() {
           return host.data
         },
+        enableRowSelection: true,
       },
       (state) => ({
         pagination: state.pagination,
         sorting: state.sorting,
         columnFilters: state.columnFilters,
+        rowSelection: state.rowSelection,
       }),
     )
   })()
@@ -88,104 +110,109 @@ export class ProductsTable extends LitElement {
         ></table-toolbar>
 
         <!-- Table element -->
-        <table>
-          <thead>
-            ${table.getHeaderGroups().map(
-              (headerGroup) => html`
-                <tr>
-                  ${headerGroup.headers.map((h) =>
-                    table.AppHeader(
-                      h,
-                      (header) => html`
-                        <th
-                          colspan=${header.colSpan}
-                          class=${header.column.getCanSort()
-                            ? 'sortable-header'
-                            : ''}
-                          @click=${header.column.getToggleSortingHandler()}
-                        >
-                          ${header.isPlaceholder
-                            ? nothing
-                            : html`
-                                ${header.FlexRender()} ${header.SortIndicator()}
-                                ${header.ColumnFilter()}
-                                ${sorting.length > 1 &&
-                                sorting.findIndex(
-                                  (s) => s.id === header.column.id,
-                                ) > -1
-                                  ? html`<span class="sort-order"
-                                      >${sorting.findIndex(
-                                        (s) => s.id === header.column.id,
-                                      ) + 1}</span
-                                    >`
-                                  : nothing}
-                              `}
-                        </th>
-                      `,
-                    ),
-                  )}
-                </tr>
-              `,
-            )}
-          </thead>
-          <tbody>
-            ${table.getRowModel().rows.map(
-              (row) => html`
-                <tr>
-                  ${row
-                    .getAllCells()
-                    .map((c) =>
-                      table.AppCell(
-                        c,
-                        (cell) => html` <td>${cell.FlexRender()}</td> `,
-                      ),
-                    )}
-                </tr>
-              `,
-            )}
-          </tbody>
-          <tfoot>
-            ${table.getFooterGroups().map(
-              (footerGroup) => html`
-                <tr>
-                  ${footerGroup.headers.map((f) =>
-                    table.AppFooter(f, (footer) => {
-                      const columnId = footer.column.id
-                      const hasFilter = columnFilters.some(
-                        (cf) => cf.id === columnId,
-                      )
-                      return html`
-                        <td colspan=${footer.colSpan}>
-                          ${footer.isPlaceholder
-                            ? nothing
-                            : columnId === 'price' ||
-                                columnId === 'stock' ||
-                                columnId === 'rating'
-                              ? html`
-                                  ${footer.FooterSum()}
-                                  ${hasFilter
-                                    ? html`<span class="filtered-indicator">
-                                        (filtered)</span
-                                      >`
-                                    : nothing}
-                                `
+        <div class="table-scroll">
+          <table>
+            <thead>
+              ${table.getHeaderGroups().map(
+                (headerGroup) => html`
+                  <tr>
+                    ${headerGroup.headers.map((h) =>
+                      table.AppHeader(
+                        h,
+                        (header) => html`
+                          <th
+                            colspan=${header.colSpan}
+                            class=${header.column.getCanSort()
+                              ? 'sortable-header'
+                              : ''}
+                            @click=${header.column.getToggleSortingHandler()}
+                          >
+                            ${header.isPlaceholder
+                              ? nothing
                               : html`
-                                  ${footer.FooterColumnId()}
-                                  ${hasFilter
-                                    ? html`<span class="filtered-indicator">
-                                        ✓</span
+                                  ${header.FlexRender()}
+                                  ${header.SortIndicator()}
+                                  ${header.ColumnFilter()}
+                                  ${sorting.length > 1 &&
+                                  sorting.findIndex(
+                                    (s) => s.id === header.column.id,
+                                  ) > -1
+                                    ? html`<span class="sort-order"
+                                        >${sorting.findIndex(
+                                          (s) => s.id === header.column.id,
+                                        ) + 1}</span
                                       >`
                                     : nothing}
                                 `}
-                        </td>
-                      `
-                    }),
-                  )}
-                </tr>
-              `,
-            )}
-          </tfoot>
-        </table>
+                          </th>
+                        `,
+                      ),
+                    )}
+                  </tr>
+                `,
+              )}
+            </thead>
+            <tbody>
+              ${table.getRowModel().rows.map(
+                (row) => html`
+                  <tr>
+                    ${row
+                      .getAllCells()
+                      .map((c) =>
+                        table.AppCell(
+                          c,
+                          (cell) => html` <td>${cell.FlexRender()}</td> `,
+                        ),
+                      )}
+                  </tr>
+                `,
+              )}
+            </tbody>
+            <tfoot>
+              ${table.getFooterGroups().map(
+                (footerGroup) => html`
+                  <tr>
+                    ${footerGroup.headers.map((f) =>
+                      table.AppFooter(f, (footer) => {
+                        const columnId = footer.column.id
+                        const hasFilter = columnFilters.some(
+                          (cf) => cf.id === columnId,
+                        )
+                        return html`
+                          <td colspan=${footer.colSpan}>
+                            ${footer.isPlaceholder
+                              ? nothing
+                              : columnId === 'price' ||
+                                  columnId === 'stock' ||
+                                  columnId === 'rating'
+                                ? html`
+                                    ${footer.FooterSum()}
+                                    ${hasFilter
+                                      ? html`<span class="filtered-indicator">
+                                          (filtered)</span
+                                        >`
+                                      : nothing}
+                                  `
+                                : columnId === 'select'
+                                  ? nothing
+                                  : html`
+                                      ${footer.FooterColumnId()}
+                                      ${hasFilter
+                                        ? html`<span class="filtered-indicator">
+                                            ✓</span
+                                          >`
+                                        : nothing}
+                                    `}
+                          </td>
+                        `
+                      }),
+                    )}
+                  </tr>
+                `,
+              )}
+            </tfoot>
+          </table>
+        </div>
 
         <!-- Pagination and row count using the same context-based custom elements -->
         <pagination-controls></pagination-controls>
diff --git a/examples/lit/composable-tables/src/components/users-table.ts b/examples/lit/composable-tables/src/components/users-table.ts
index 737ba0f5a2..7c43bf5112 100644
--- a/examples/lit/composable-tables/src/components/users-table.ts
+++ b/examples/lit/composable-tables/src/components/users-table.ts
@@ -13,6 +13,26 @@ const personColumnHelper = createAppColumnHelper<Person>()
 // NOTE: Use createAppColumnHelper (not createColumnHelper) to get pre-bound
 // component types on cell/header objects (e.g., cell.TextCell, header.SortIndicator).
 const columns = personColumnHelper.columns([
+  personColumnHelper.display({
+    id: 'select',
+    header: ({ table }) => html`
+      <input
+        type="checkbox"
+        @change=${table.getToggleAllRowsSelectedHandler()}
+        .checked=${table.getIsAllRowsSelected()}
+        .indeterminate=${table.getIsSomeRowsSelected()}
+      />
+    `,
+    cell: ({ row }) => html`
+      <input
+        type="checkbox"
+        @change=${row.getToggleSelectedHandler()}
+        .checked=${row.getIsSelected()}
+        ?disabled=${!row.getCanSelect()}
+        .indeterminate=${row.getIsSomeSelected()}
+      />
+    `,
+  }),
   personColumnHelper.accessor('firstName', {
     header: 'First Name',
     footer: (props) => props.column.id,
@@ -68,12 +88,14 @@ export class UsersTable extends LitElement {
         get data() {
           return host.data
         },
+        enableRowSelection: true,
         debugTable: true,
       },
       (state) => ({
         pagination: state.pagination,
         sorting: state.sorting,
         columnFilters: state.columnFilters,
+        rowSelection: state.rowSelection,
       }),
     )
   })()
@@ -102,106 +124,110 @@ export class UsersTable extends LitElement {
         ></table-toolbar>
 
         <!-- Table element -->
-        <table>
-          <thead>
-            ${table.getHeaderGroups().map(
-              (headerGroup) => html`
-                <tr>
-                  ${headerGroup.headers.map((h) =>
-                    table.AppHeader(
-                      h,
-                      (header) => html`
-                        <th
-                          colspan=${header.colSpan}
-                          class=${header.column.getCanSort()
-                            ? 'sortable-header'
-                            : ''}
-                          @click=${header.column.getToggleSortingHandler()}
-                        >
-                          ${header.isPlaceholder
-                            ? nothing
-                            : html`
-                                ${header.FlexRender()} ${header.SortIndicator()}
-                                ${header.ColumnFilter()}
-                                ${sorting.length > 1 &&
-                                sorting.findIndex(
-                                  (s) => s.id === header.column.id,
-                                ) > -1
-                                  ? html`<span class="sort-order"
-                                      >${sorting.findIndex(
-                                        (s) => s.id === header.column.id,
-                                      ) + 1}</span
-                                    >`
-                                  : nothing}
-                              `}
-                        </th>
-                      `,
-                    ),
-                  )}
-                </tr>
-              `,
-            )}
-          </thead>
-          <tbody>
-            ${table.getRowModel().rows.map(
-              (row) => html`
-                <tr>
-                  ${row
-                    .getAllCells()
-                    .map((c) =>
-                      table.AppCell(
-                        c,
-                        (cell) => html` <td>${cell.FlexRender()}</td> `,
-                      ),
-                    )}
-                </tr>
-              `,
-            )}
-          </tbody>
-          <tfoot>
-            ${table.getFooterGroups().map(
-              (footerGroup) => html`
-                <tr>
-                  ${footerGroup.headers.map((f) =>
-                    table.AppFooter(f, (footer) => {
-                      const columnId = footer.column.id
-                      const hasFilter = columnFilters.some(
-                        (cf) => cf.id === columnId,
-                      )
-                      return html`
-                        <td colspan=${footer.colSpan}>
-                          ${footer.isPlaceholder
-                            ? nothing
-                            : columnId === 'age' ||
-                                columnId === 'visits' ||
-                                columnId === 'progress'
-                              ? html`
-                                  ${footer.FooterSum()}
-                                  ${hasFilter
-                                    ? html`<span class="filtered-indicator">
-                                        (filtered)</span
+        <div class="table-scroll">
+          <table>
+            <thead>
+              ${table.getHeaderGroups().map(
+                (headerGroup) => html`
+                  <tr>
+                    ${headerGroup.headers.map((h) =>
+                      table.AppHeader(
+                        h,
+                        (header) => html`
+                          <th
+                            colspan=${header.colSpan}
+                            class=${header.column.getCanSort()
+                              ? 'sortable-header'
+                              : ''}
+                            @click=${header.column.getToggleSortingHandler()}
+                          >
+                            ${header.isPlaceholder
+                              ? nothing
+                              : html`
+                                  ${header.FlexRender()}
+                                  ${header.SortIndicator()}
+                                  ${header.ColumnFilter()}
+                                  ${sorting.length > 1 &&
+                                  sorting.findIndex(
+                                    (s) => s.id === header.column.id,
+                                  ) > -1
+                                    ? html`<span class="sort-order"
+                                        >${sorting.findIndex(
+                                          (s) => s.id === header.column.id,
+                                        ) + 1}</span
                                       >`
                                     : nothing}
-                                `
-                              : columnId === 'actions'
-                                ? nothing
-                                : html`
-                                    ${footer.FooterColumnId()}
+                                `}
+                          </th>
+                        `,
+                      ),
+                    )}
+                  </tr>
+                `,
+              )}
+            </thead>
+            <tbody>
+              ${table.getRowModel().rows.map(
+                (row) => html`
+                  <tr>
+                    ${row
+                      .getAllCells()
+                      .map((c) =>
+                        table.AppCell(
+                          c,
+                          (cell) => html` <td>${cell.FlexRender()}</td> `,
+                        ),
+                      )}
+                  </tr>
+                `,
+              )}
+            </tbody>
+            <tfoot>
+              ${table.getFooterGroups().map(
+                (footerGroup) => html`
+                  <tr>
+                    ${footerGroup.headers.map((f) =>
+                      table.AppFooter(f, (footer) => {
+                        const columnId = footer.column.id
+                        const hasFilter = columnFilters.some(
+                          (cf) => cf.id === columnId,
+                        )
+                        return html`
+                          <td colspan=${footer.colSpan}>
+                            ${footer.isPlaceholder
+                              ? nothing
+                              : columnId === 'age' ||
+                                  columnId === 'visits' ||
+                                  columnId === 'progress'
+                                ? html`
+                                    ${footer.FooterSum()}
                                     ${hasFilter
                                       ? html`<span class="filtered-indicator">
-                                          ✓</span
+                                          (filtered)</span
                                         >`
                                       : nothing}
-                                  `}
-                        </td>
-                      `
-                    }),
-                  )}
-                </tr>
-              `,
-            )}
-          </tfoot>
-        </table>
+                                  `
+                                : columnId === 'actions' ||
+                                    columnId === 'select'
+                                  ? nothing
+                                  : html`
+                                      ${footer.FooterColumnId()}
+                                      ${hasFilter
+                                        ? html`<span class="filtered-indicator">
+                                            ✓</span
+                                          >`
+                                        : nothing}
+                                    `}
+                          </td>
+                        `
+                      }),
+                    )}
+                  </tr>
+                `,
+              )}
+            </tfoot>
+          </table>
+        </div>
 
         <!-- Pagination and row count using context-based custom elements -->
         <pagination-controls></pagination-controls>
diff --git a/examples/lit/composable-tables/src/hooks/table.ts b/examples/lit/composable-tables/src/hooks/table.ts
index 68327899b6..58c0e5f4f6 100644
--- a/examples/lit/composable-tables/src/hooks/table.ts
+++ b/examples/lit/composable-tables/src/hooks/table.ts
@@ -6,6 +6,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -33,6 +34,7 @@ import {
 export const features = tableFeatures({
   columnFilteringFeature,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortedRowModel: createSortedRowModel(),
   filteredRowModel: createFilteredRowModel(),
diff --git a/examples/lit/composable-tables/src/index.css b/examples/lit/composable-tables/src/index.css
index 4d8fef0142..d03f22d5b7 100644
--- a/examples/lit/composable-tables/src/index.css
+++ b/examples/lit/composable-tables/src/index.css
@@ -43,6 +43,20 @@ tfoot th {
   border-spacing: 0;
 }
 
+/* Fixed-height, scrollable region around the table. With a page size larger
+   than ~12 rows the body overflows and scrolls. */
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .pagination {
   display: flex;
   align-items: center;
diff --git a/examples/preact/composable-tables/src/components/cell-components.tsx b/examples/preact/composable-tables/src/components/cell-components.tsx
index 29c0c22ee9..ebd1d03de0 100644
--- a/examples/preact/composable-tables/src/components/cell-components.tsx
+++ b/examples/preact/composable-tables/src/components/cell-components.tsx
@@ -5,6 +5,29 @@
  * in AppCell children, e.g., <cell.TextCell />
  */
 import { useCellContext } from '../hooks/table'
+import { IndeterminateCheckbox } from './indeterminate-checkbox'
+
+/**
+ * Row-selection checkbox cell - toggles selection for the current row.
+ *
+ * Unlike React (which needs a `Subscribe` boundary to work around React
+ * Compiler memoization), Preact re-renders this cell when selection state
+ * changes via the parent table's subscription, so reading `row.getIsSelected()`
+ * directly is enough.
+ */
+export function SelectCell() {
+  const cell = useCellContext()
+  const row = cell.row
+
+  return (
+    <IndeterminateCheckbox
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      indeterminate={row.getIsSomeSelected()}
+      onChange={row.getToggleSelectedHandler()}
+    />
+  )
+}
 
 /**
  * Generic text cell renderer
diff --git a/examples/preact/composable-tables/src/components/indeterminate-checkbox.tsx b/examples/preact/composable-tables/src/components/indeterminate-checkbox.tsx
new file mode 100644
index 0000000000..5f0fa43f57
--- /dev/null
+++ b/examples/preact/composable-tables/src/components/indeterminate-checkbox.tsx
@@ -0,0 +1,39 @@
+/**
+ * Indeterminate checkbox used by the row-selection column
+ * (both the select-all header and the per-row select cell).
+ */
+import { useEffect, useRef } from 'preact/hooks'
+
+export function IndeterminateCheckbox({
+  indeterminate,
+  className = '',
+  checked,
+  onChange,
+  disabled,
+  ...rest
+}: {
+  indeterminate?: boolean
+  checked?: boolean
+  disabled?: boolean
+  onChange?: (event: Event) => void
+} & Record<string, any>) {
+  const ref = useRef<HTMLInputElement>(null!)
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !checked && indeterminate
+    }
+  }, [ref, indeterminate, checked])
+
+  return (
+    <input
+      type="checkbox"
+      ref={ref}
+      className={className}
+      checked={checked}
+      onChange={onChange}
+      disabled={disabled}
+      {...rest}
+    />
+  )
+}
diff --git a/examples/preact/composable-tables/src/hooks/table.ts b/examples/preact/composable-tables/src/hooks/table.ts
index 49cc16891d..7d5a6a906f 100644
--- a/examples/preact/composable-tables/src/hooks/table.ts
+++ b/examples/preact/composable-tables/src/hooks/table.ts
@@ -13,6 +13,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -32,6 +33,7 @@ import {
   PriceCell,
   ProgressCell,
   RowActionsCell,
+  SelectCell,
   StatusCell,
   TextCell,
 } from '../components/cell-components'
@@ -64,6 +66,7 @@ export const {
   features: tableFeatures({
     columnFilteringFeature,
     rowPaginationFeature,
+    rowSelectionFeature,
     rowSortingFeature,
     sortedRowModel: createSortedRowModel(),
     filteredRowModel: createFilteredRowModel(),
@@ -84,6 +87,7 @@ export const {
 
   // Register cell-level components (accessible via cell.ComponentName in AppCell)
   cellComponents: {
+    SelectCell,
     TextCell,
     NumberCell,
     StatusCell,
diff --git a/examples/preact/composable-tables/src/index.css b/examples/preact/composable-tables/src/index.css
index 4d8fef0142..521b9c190c 100644
--- a/examples/preact/composable-tables/src/index.css
+++ b/examples/preact/composable-tables/src/index.css
@@ -43,6 +43,21 @@ tfoot th {
   border-spacing: 0;
 }
 
+/* Fixed-height, scrollable region around the table. With a page size larger
+   than ~12 rows the body overflows and scrolls; this is what makes any
+   remounting of the App wrappers visible (the scroll position would reset). */
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .pagination {
   display: flex;
   align-items: center;
diff --git a/examples/preact/composable-tables/src/main.tsx b/examples/preact/composable-tables/src/main.tsx
index 5792f91e3c..2ebac34597 100644
--- a/examples/preact/composable-tables/src/main.tsx
+++ b/examples/preact/composable-tables/src/main.tsx
@@ -6,6 +6,7 @@ import {
   useTanStackTableDevtools,
 } from '@tanstack/preact-table-devtools'
 import { createAppColumnHelper, useAppTable } from './hooks/table'
+import { IndeterminateCheckbox } from './components/indeterminate-checkbox'
 import { makeData, makeProductData } from './makeData'
 import type { Person, Product } from './makeData'
 import './index.css'
@@ -34,6 +35,18 @@ function UsersTable() {
     () =>
       // NOTE: You must use `createAppColumnHelper` instead of `createColumnHelper` when using pre-bound components like <cell.TextCell />
       personColumnHelper.columns([
+        personColumnHelper.display({
+          id: 'select',
+          header: ({ table }) => (
+            <IndeterminateCheckbox
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          ),
+          // Cell uses the pre-bound SelectCell component via AppCell
+          cell: ({ cell }) => <cell.SelectCell />,
+        }),
         personColumnHelper.accessor('firstName', {
           header: 'First Name',
           footer: (props) => props.column.id,
@@ -80,6 +93,7 @@ function UsersTable() {
       columns,
       data,
       debugTable: true,
+      enableRowSelection: true,
       // more table options
     },
     (state) => state, // default selector
@@ -106,112 +120,118 @@ function UsersTable() {
             onStressTest={stressTest}
           />
 
-          {/* Table element */}
-          <table>
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((h) => (
-                    <table.AppHeader header={h} key={h.id}>
-                      {(header) => (
-                        <th
-                          colSpan={header.colSpan}
-                          className={
-                            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 className="sort-order">
-                                    {sorting.findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) + 1}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </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 components are pre-bound via AppCell */}
-                          <cell.FlexRender />
-                        </td>
-                      )}
-                    </table.AppCell>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              {table.getFooterGroups().map((footerGroup) => (
-                <tr key={footerGroup.id}>
-                  {footerGroup.headers.map((f) => (
-                    <table.AppFooter header={f} key={f.id}>
-                      {(footer) => {
-                        const columnId = footer.column.id
-                        const hasFilter = columnFilters.some(
-                          (cf) => cf.id === columnId,
-                        )
-
-                        return (
-                          <td colSpan={footer.colSpan}>
-                            {footer.isPlaceholder ? null : (
+          {/* Scroll container with a fixed max-height so larger page sizes
+              scroll. If the App wrappers remount on state updates, the scroll
+              position jumps back to the top on every keystroke/selection. */}
+          <div className="table-scroll">
+            <table>
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((h) => (
+                      <table.AppHeader header={h} key={h.id}>
+                        {(header) => (
+                          <th
+                            colSpan={header.colSpan}
+                            className={
+                              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 className="filtered-indicator">
-                                        {' '}
-                                        (filtered)
-                                      </span>
-                                    )}
-                                  </>
-                                ) : columnId === 'actions' ? null : (
-                                  <>
-                                    <footer.FooterColumnId />
-                                    {hasFilter && (
-                                      <span className="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 className="sort-order">
+                                      {sorting.findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) + 1}
+                                    </span>
+                                  )}
                               </>
                             )}
+                          </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 components are pre-bound via AppCell */}
+                            <cell.FlexRender />
                           </td>
-                        )
-                      }}
-                    </table.AppFooter>
-                  ))}
-                </tr>
-              ))}
-            </tfoot>
-          </table>
+                        )}
+                      </table.AppCell>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                {table.getFooterGroups().map((footerGroup) => (
+                  <tr key={footerGroup.id}>
+                    {footerGroup.headers.map((f) => (
+                      <table.AppFooter header={f} key={f.id}>
+                        {(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 className="filtered-indicator">
+                                          {' '}
+                                          (filtered)
+                                        </span>
+                                      )}
+                                    </>
+                                  ) : columnId === 'actions' ? null : (
+                                    <>
+                                      <footer.FooterColumnId />
+                                      {hasFilter && (
+                                        <span className="filtered-indicator">
+                                          {' '}
+                                          ✓
+                                        </span>
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </td>
+                          )
+                        }}
+                      </table.AppFooter>
+                    ))}
+                  </tr>
+                ))}
+              </tfoot>
+            </table>
+          </div>
 
           {/* Pagination using pre-bound component */}
           <table.PaginationControls />
@@ -242,6 +262,18 @@ function ProductsTable() {
   const columns = useMemo(
     () =>
       productColumnHelper.columns([
+        productColumnHelper.display({
+          id: 'select',
+          header: ({ table }) => (
+            <IndeterminateCheckbox
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          ),
+          // Cell uses the pre-bound SelectCell component via AppCell
+          cell: ({ cell }) => <cell.SelectCell />,
+        }),
         productColumnHelper.accessor('name', {
           header: 'Product Name',
           footer: (props) => props.column.id,
@@ -279,6 +311,7 @@ function ProductsTable() {
       columns,
       data,
       getRowId: (row) => row.id,
+      enableRowSelection: true,
     },
     (state) => state, // default selector
   )
@@ -302,111 +335,117 @@ function ProductsTable() {
             onStressTest={stressTest}
           />
 
-          {/* Table element */}
-          <table>
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((h) => (
-                    <table.AppHeader header={h} key={h.id}>
-                      {(header) => (
-                        <th
-                          colSpan={header.colSpan}
-                          className={
-                            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 className="sort-order">
-                                    {sorting.findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) + 1}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </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 components are pre-bound via AppCell */}
-                          <cell.FlexRender />
-                        </td>
-                      )}
-                    </table.AppCell>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              {table.getFooterGroups().map((footerGroup) => (
-                <tr key={footerGroup.id}>
-                  {footerGroup.headers.map((f) => (
-                    <table.AppFooter header={f} key={f.id}>
-                      {(footer) => {
-                        const columnId = footer.column.id
-                        const hasFilter = columnFilters.some(
-                          (cf) => cf.id === columnId,
-                        )
-
-                        return (
-                          <td colSpan={footer.colSpan}>
-                            {footer.isPlaceholder ? null : (
+          {/* Scroll container with a fixed max-height so larger page sizes
+              scroll. If the App wrappers remount on state updates, the scroll
+              position jumps back to the top on every keystroke/selection. */}
+          <div className="table-scroll">
+            <table>
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((h) => (
+                      <table.AppHeader header={h} key={h.id}>
+                        {(header) => (
+                          <th
+                            colSpan={header.colSpan}
+                            className={
+                              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 className="filtered-indicator">
-                                        {' '}
-                                        (filtered)
-                                      </span>
-                                    )}
-                                  </>
-                                ) : (
-                                  <>
-                                    <footer.FooterColumnId />
-                                    {hasFilter && (
-                                      <span className="filtered-indicator">
-                                        {' '}
-                                        ✓
-                                      </span>
-                                    )}
-                                  </>
-                                )}
+                                <header.FlexRender />
+                                <header.SortIndicator />
+                                <header.ColumnFilter />
+                                {sorting.length > 1 &&
+                                  sorting.findIndex(
+                                    (s) => s.id === header.column.id,
+                                  ) > -1 && (
+                                    <span className="sort-order">
+                                      {sorting.findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) + 1}
+                                    </span>
+                                  )}
                               </>
                             )}
+                          </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 components are pre-bound via AppCell */}
+                            <cell.FlexRender />
                           </td>
-                        )
-                      }}
-                    </table.AppFooter>
-                  ))}
-                </tr>
-              ))}
-            </tfoot>
-          </table>
+                        )}
+                      </table.AppCell>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                {table.getFooterGroups().map((footerGroup) => (
+                  <tr key={footerGroup.id}>
+                    {footerGroup.headers.map((f) => (
+                      <table.AppFooter header={f} key={f.id}>
+                        {(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 className="filtered-indicator">
+                                          {' '}
+                                          (filtered)
+                                        </span>
+                                      )}
+                                    </>
+                                  ) : (
+                                    <>
+                                      <footer.FooterColumnId />
+                                      {hasFilter && (
+                                        <span className="filtered-indicator">
+                                          {' '}
+                                          ✓
+                                        </span>
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </td>
+                          )
+                        }}
+                      </table.AppFooter>
+                    ))}
+                  </tr>
+                ))}
+              </tfoot>
+            </table>
+          </div>
 
           {/* Pagination using the same pre-bound component */}
           <table.PaginationControls />
diff --git a/examples/react/composable-tables/src/components/cell-components.tsx b/examples/react/composable-tables/src/components/cell-components.tsx
index 29c0c22ee9..fb84eeb668 100644
--- a/examples/react/composable-tables/src/components/cell-components.tsx
+++ b/examples/react/composable-tables/src/components/cell-components.tsx
@@ -4,7 +4,36 @@
  * These components can be used via the pre-bound cellComponents
  * in AppCell children, e.g., <cell.TextCell />
  */
-import { useCellContext } from '../hooks/table'
+import { Subscribe } from '@tanstack/react-table'
+import { useCellContext, useTableContext } from '../hooks/table'
+import { IndeterminateCheckbox } from './indeterminate-checkbox'
+
+/**
+ * Row-selection checkbox cell - toggles selection for the current row.
+ *
+ * The `Subscribe` boundary is required to work around React Compiler
+ * memoization: the checkbox reads `row.getIsSelected()` (a table API call, not
+ * a prop or hook the compiler can track), so without an explicit subscription
+ * to the row-selection state it would never re-render when selection changes.
+ */
+export function SelectCell() {
+  const cell = useCellContext()
+  const table = useTableContext()
+  const row = cell.row
+
+  return (
+    <Subscribe source={table.atoms.rowSelection}>
+      {() => (
+        <IndeterminateCheckbox
+          checked={row.getIsSelected()}
+          disabled={!row.getCanSelect()}
+          indeterminate={row.getIsSomeSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      )}
+    </Subscribe>
+  )
+}
 
 /**
  * Generic text cell renderer
diff --git a/examples/react/composable-tables/src/components/indeterminate-checkbox.tsx b/examples/react/composable-tables/src/components/indeterminate-checkbox.tsx
new file mode 100644
index 0000000000..b3cd414cc7
--- /dev/null
+++ b/examples/react/composable-tables/src/components/indeterminate-checkbox.tsx
@@ -0,0 +1,22 @@
+/**
+ * Indeterminate checkbox used by the row-selection column
+ * (both the select-all header and the per-row select cell).
+ */
+import { useEffect, useRef } from 'react'
+import type { HTMLProps } from 'react'
+
+export function IndeterminateCheckbox({
+  indeterminate,
+  className = '',
+  ...rest
+}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) {
+  const ref = useRef<HTMLInputElement>(null!)
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate
+    }
+  }, [ref, indeterminate, rest.checked])
+
+  return <input type="checkbox" ref={ref} className={className} {...rest} />
+}
diff --git a/examples/react/composable-tables/src/hooks/table.ts b/examples/react/composable-tables/src/hooks/table.ts
index e5c218c8f6..028ed4348a 100644
--- a/examples/react/composable-tables/src/hooks/table.ts
+++ b/examples/react/composable-tables/src/hooks/table.ts
@@ -13,6 +13,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -32,6 +33,7 @@ import {
   PriceCell,
   ProgressCell,
   RowActionsCell,
+  SelectCell,
   StatusCell,
   TextCell,
 } from '../components/cell-components'
@@ -64,6 +66,7 @@ export const {
   features: tableFeatures({
     columnFilteringFeature,
     rowPaginationFeature,
+    rowSelectionFeature,
     rowSortingFeature,
     sortedRowModel: createSortedRowModel(),
     filteredRowModel: createFilteredRowModel(),
@@ -84,6 +87,7 @@ export const {
 
   // Register cell-level components (accessible via cell.ComponentName in AppCell)
   cellComponents: {
+    SelectCell,
     TextCell,
     NumberCell,
     StatusCell,
diff --git a/examples/react/composable-tables/src/index.css b/examples/react/composable-tables/src/index.css
index 4d8fef0142..521b9c190c 100644
--- a/examples/react/composable-tables/src/index.css
+++ b/examples/react/composable-tables/src/index.css
@@ -43,6 +43,21 @@ tfoot th {
   border-spacing: 0;
 }
 
+/* Fixed-height, scrollable region around the table. With a page size larger
+   than ~12 rows the body overflows and scrolls; this is what makes any
+   remounting of the App wrappers visible (the scroll position would reset). */
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .pagination {
   display: flex;
   align-items: center;
diff --git a/examples/react/composable-tables/src/main.tsx b/examples/react/composable-tables/src/main.tsx
index 3afef5e1a6..20c03c9342 100644
--- a/examples/react/composable-tables/src/main.tsx
+++ b/examples/react/composable-tables/src/main.tsx
@@ -6,9 +6,12 @@ import {
   tableDevtoolsPlugin,
   useTanStackTableDevtools,
 } from '@tanstack/react-table-devtools'
+import { Subscribe } from '@tanstack/react-table'
 import { createAppColumnHelper, useAppTable } from './hooks/table'
+import { IndeterminateCheckbox } from './components/indeterminate-checkbox'
 import { makeData, makeProductData } from './makeData'
 import type { Person, Product } from './makeData'
+import './index.css'
 // Import cell components directly - they use useCellContext internally
 
 // Create column helpers with TFeatures already bound - only need TData!
@@ -34,6 +37,23 @@ function UsersTable() {
     () =>
       // NOTE: You must use `createAppColumnHelper` instead of `createColumnHelper` when using pre-bound components like <cell.TextCell />
       personColumnHelper.columns([
+        personColumnHelper.display({
+          id: 'select',
+          header: ({ table }) => (
+            // Subscribe works around React Compiler memoization (see SelectCell)
+            <Subscribe source={table.atoms.rowSelection}>
+              {() => (
+                <IndeterminateCheckbox
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              )}
+            </Subscribe>
+          ),
+          // Cell uses the pre-bound SelectCell component via AppCell
+          cell: ({ cell }) => <cell.SelectCell />,
+        }),
         personColumnHelper.accessor('firstName', {
           header: 'First Name',
           footer: (props) => props.column.id,
@@ -80,6 +100,7 @@ function UsersTable() {
       columns,
       data,
       debugTable: true,
+      enableRowSelection: true,
       // more table options
     },
     (state) => state, // default selector
@@ -105,113 +126,115 @@ function UsersTable() {
             onRefresh={refreshData}
             onStressTest={stressTest}
           />
-
-          {/* Table element */}
-          <table>
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((h) => (
-                    <table.AppHeader header={h} key={h.id}>
-                      {(header) => (
-                        <th
-                          colSpan={header.colSpan}
-                          className={
-                            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 className="sort-order">
-                                    {sorting.findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) + 1}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </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 components are pre-bound via AppCell */}
-                          <cell.FlexRender />
-                        </td>
-                      )}
-                    </table.AppCell>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              {table.getFooterGroups().map((footerGroup) => (
-                <tr key={footerGroup.id}>
-                  {footerGroup.headers.map((f) => (
-                    <table.AppFooter header={f} key={f.id}>
-                      {(footer) => {
-                        const columnId = footer.column.id
-                        const hasFilter = columnFilters.some(
-                          (cf) => cf.id === columnId,
-                        )
-
-                        return (
-                          <td colSpan={footer.colSpan}>
-                            {footer.isPlaceholder ? null : (
+          <div className="table-scroll">
+            <table>
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((h) => (
+                      <table.AppHeader header={h} key={h.id}>
+                        {(header) => (
+                          <th
+                            colSpan={header.colSpan}
+                            className={
+                              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 className="filtered-indicator">
-                                        {' '}
-                                        (filtered)
-                                      </span>
-                                    )}
-                                  </>
-                                ) : columnId === 'actions' ? null : (
-                                  <>
-                                    <footer.FooterColumnId />
-                                    {hasFilter && (
-                                      <span className="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 className="sort-order">
+                                      {sorting.findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) + 1}
+                                    </span>
+                                  )}
                               </>
                             )}
+                          </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 components are pre-bound via AppCell */}
+                            <cell.FlexRender />
                           </td>
-                        )
-                      }}
-                    </table.AppFooter>
-                  ))}
-                </tr>
-              ))}
-            </tfoot>
-          </table>
+                        )}
+                      </table.AppCell>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                {table.getFooterGroups().map((footerGroup) => (
+                  <tr key={footerGroup.id}>
+                    {footerGroup.headers.map((f) => (
+                      <table.AppFooter header={f} key={f.id}>
+                        {(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 className="filtered-indicator">
+                                          {' '}
+                                          (filtered)
+                                        </span>
+                                      )}
+                                    </>
+                                  ) : columnId === 'actions' ? null : (
+                                    <>
+                                      <footer.FooterColumnId />
+                                      {hasFilter && (
+                                        <span className="filtered-indicator">
+                                          {' '}
+                                          ✓
+                                        </span>
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </td>
+                          )
+                        }}
+                      </table.AppFooter>
+                    ))}
+                  </tr>
+                ))}
+              </tfoot>
+            </table>
+          </div>
 
           {/* Pagination using pre-bound component */}
           <table.PaginationControls />
@@ -242,6 +265,23 @@ function ProductsTable() {
   const columns = useMemo(
     () =>
       productColumnHelper.columns([
+        productColumnHelper.display({
+          id: 'select',
+          header: ({ table }) => (
+            // Subscribe works around React Compiler memoization (see SelectCell)
+            <Subscribe source={table.atoms.rowSelection}>
+              {() => (
+                <IndeterminateCheckbox
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              )}
+            </Subscribe>
+          ),
+          // Cell uses the pre-bound SelectCell component via AppCell
+          cell: ({ cell }) => <cell.SelectCell />,
+        }),
         productColumnHelper.accessor('name', {
           header: 'Product Name',
           footer: (props) => props.column.id,
@@ -279,6 +319,7 @@ function ProductsTable() {
       columns,
       data,
       getRowId: (row) => row.id,
+      enableRowSelection: true,
     },
     (state) => state, // default selector
   )
@@ -301,112 +342,114 @@ function ProductsTable() {
             onRefresh={refreshData}
             onStressTest={stressTest}
           />
-
-          {/* Table element */}
-          <table>
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((h) => (
-                    <table.AppHeader header={h} key={h.id}>
-                      {(header) => (
-                        <th
-                          colSpan={header.colSpan}
-                          className={
-                            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 className="sort-order">
-                                    {sorting.findIndex(
-                                      (s) => s.id === header.column.id,
-                                    ) + 1}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </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 components are pre-bound via AppCell */}
-                          <cell.FlexRender />
-                        </td>
-                      )}
-                    </table.AppCell>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              {table.getFooterGroups().map((footerGroup) => (
-                <tr key={footerGroup.id}>
-                  {footerGroup.headers.map((f) => (
-                    <table.AppFooter header={f} key={f.id}>
-                      {(footer) => {
-                        const columnId = footer.column.id
-                        const hasFilter = columnFilters.some(
-                          (cf) => cf.id === columnId,
-                        )
-
-                        return (
-                          <td colSpan={footer.colSpan}>
-                            {footer.isPlaceholder ? null : (
+          <div className="table-scroll">
+            <table>
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((h) => (
+                      <table.AppHeader header={h} key={h.id}>
+                        {(header) => (
+                          <th
+                            colSpan={header.colSpan}
+                            className={
+                              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 className="filtered-indicator">
-                                        {' '}
-                                        (filtered)
-                                      </span>
-                                    )}
-                                  </>
-                                ) : (
-                                  <>
-                                    <footer.FooterColumnId />
-                                    {hasFilter && (
-                                      <span className="filtered-indicator">
-                                        {' '}
-                                        ✓
-                                      </span>
-                                    )}
-                                  </>
-                                )}
+                                <header.FlexRender />
+                                <header.SortIndicator />
+                                <header.ColumnFilter />
+                                {sorting.length > 1 &&
+                                  sorting.findIndex(
+                                    (s) => s.id === header.column.id,
+                                  ) > -1 && (
+                                    <span className="sort-order">
+                                      {sorting.findIndex(
+                                        (s) => s.id === header.column.id,
+                                      ) + 1}
+                                    </span>
+                                  )}
                               </>
                             )}
+                          </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 components are pre-bound via AppCell */}
+                            <cell.FlexRender />
                           </td>
-                        )
-                      }}
-                    </table.AppFooter>
-                  ))}
-                </tr>
-              ))}
-            </tfoot>
-          </table>
+                        )}
+                      </table.AppCell>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                {table.getFooterGroups().map((footerGroup) => (
+                  <tr key={footerGroup.id}>
+                    {footerGroup.headers.map((f) => (
+                      <table.AppFooter header={f} key={f.id}>
+                        {(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 className="filtered-indicator">
+                                          {' '}
+                                          (filtered)
+                                        </span>
+                                      )}
+                                    </>
+                                  ) : (
+                                    <>
+                                      <footer.FooterColumnId />
+                                      {hasFilter && (
+                                        <span className="filtered-indicator">
+                                          {' '}
+                                          ✓
+                                        </span>
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </td>
+                          )
+                        }}
+                      </table.AppFooter>
+                    ))}
+                  </tr>
+                ))}
+              </tfoot>
+            </table>
+          </div>
 
           {/* Pagination using the same pre-bound component */}
           <table.PaginationControls />
diff --git a/examples/solid/composable-tables/src/App.tsx b/examples/solid/composable-tables/src/App.tsx
index c7c83e0d03..3a84f00366 100644
--- a/examples/solid/composable-tables/src/App.tsx
+++ b/examples/solid/composable-tables/src/App.tsx
@@ -1,6 +1,7 @@
 import { For, createSignal } from 'solid-js'
 import { useTanStackTableDevtools } from '@tanstack/solid-table-devtools'
 import { createAppColumnHelper, createAppTable } from './hooks/table'
+import { IndeterminateCheckbox } from './components/indeterminate-checkbox'
 import { makeData, makeProductData } from './makeData'
 import type { Person, Product } from './makeData'
 // Import cell components directly - they use useCellContext internally
@@ -26,6 +27,19 @@ function UsersTable() {
   const columns =
     // NOTE: You must use `createAppColumnHelper` instead of `createColumnHelper` when using pre-bound components like <cell.TextCell />
     personColumnHelper.columns([
+      personColumnHelper.display({
+        id: 'select',
+        header: ({ table }) => (
+          // Solid tracks these calls natively, so no Subscribe is needed.
+          <IndeterminateCheckbox
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        ),
+        // Cell uses the pre-bound SelectCell component via AppCell
+        cell: ({ cell }) => <cell.SelectCell />,
+      }),
       personColumnHelper.accessor('firstName', {
         header: 'First Name',
         footer: (props) => props.column.id,
@@ -71,6 +85,7 @@ function UsersTable() {
       return data()
     },
     debugTable: true,
+    enableRowSelection: true,
     // more table options
   })
 
@@ -99,124 +114,128 @@ function UsersTable() {
             />
 
             {/* 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 : (
+            <div class="table-scroll">
+              <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>
+            </div>
 
             {/* Pagination using pre-bound component */}
             <table.PaginationControls />
@@ -245,6 +264,19 @@ function ProductsTable() {
 
   // Define columns using the column helper - different structure than Users table
   const columns = productColumnHelper.columns([
+    productColumnHelper.display({
+      id: 'select',
+      header: ({ table }) => (
+        // Solid tracks these calls natively, so no Subscribe is needed.
+        <IndeterminateCheckbox
+          checked={table.getIsAllRowsSelected()}
+          indeterminate={table.getIsSomeRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      // Cell uses the pre-bound SelectCell component via AppCell
+      cell: ({ cell }) => <cell.SelectCell />,
+    }),
     productColumnHelper.accessor('name', {
       header: 'Product Name',
       footer: (props) => props.column.id,
@@ -281,6 +313,7 @@ function ProductsTable() {
       return data()
     },
     getRowId: (row) => row.id,
+    enableRowSelection: true,
   })
 
   useTanStackTableDevtools(table)
@@ -306,123 +339,127 @@ function ProductsTable() {
             />
 
             {/* 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 : (
+            <div class="table-scroll">
+              <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>
+            </div>
 
             {/* Pagination using the same pre-bound component */}
             <table.PaginationControls />
diff --git a/examples/solid/composable-tables/src/components/cell-components.tsx b/examples/solid/composable-tables/src/components/cell-components.tsx
index af78520679..1cb6b35c20 100644
--- a/examples/solid/composable-tables/src/components/cell-components.tsx
+++ b/examples/solid/composable-tables/src/components/cell-components.tsx
@@ -5,6 +5,27 @@
  * in AppCell children, e.g., <cell.TextCell />
  */
 import { useCellContext } from '../hooks/table'
+import { IndeterminateCheckbox } from './indeterminate-checkbox'
+
+/**
+ * Row-selection checkbox cell - toggles selection for the current row.
+ *
+ * Solid tracks the `row.getIsSelected()` etc. calls natively, so passing them
+ * as accessors keeps the checkbox reactive without any Subscribe boundary.
+ */
+export function SelectCell() {
+  const cell = useCellContext()
+  const row = cell.row
+
+  return (
+    <IndeterminateCheckbox
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      indeterminate={row.getIsSomeSelected()}
+      onChange={row.getToggleSelectedHandler()}
+    />
+  )
+}
 
 /**
  * Generic text cell renderer
diff --git a/examples/solid/composable-tables/src/components/indeterminate-checkbox.tsx b/examples/solid/composable-tables/src/components/indeterminate-checkbox.tsx
new file mode 100644
index 0000000000..ed760d1f7d
--- /dev/null
+++ b/examples/solid/composable-tables/src/components/indeterminate-checkbox.tsx
@@ -0,0 +1,36 @@
+/**
+ * Indeterminate checkbox used by the row-selection column
+ * (both the select-all header and the per-row select cell).
+ *
+ * Solid handles reactivity natively, so `checked`/`indeterminate` are read
+ * from props (kept reactive by the callers) and the indeterminate DOM property
+ * is synced via a ref in createEffect.
+ */
+import { createEffect } from 'solid-js'
+
+export function IndeterminateCheckbox(props: {
+  indeterminate?: boolean
+  class?: string
+  checked?: boolean
+  disabled?: boolean
+  onChange?: (event: Event) => void
+}) {
+  let ref: HTMLInputElement | undefined
+
+  createEffect(() => {
+    if (typeof props.indeterminate === 'boolean' && ref) {
+      ref.indeterminate = !props.checked && props.indeterminate
+    }
+  })
+
+  return (
+    <input
+      type="checkbox"
+      ref={ref}
+      class={props.class ?? ''}
+      checked={props.checked}
+      disabled={props.disabled}
+      onChange={props.onChange}
+    />
+  )
+}
diff --git a/examples/solid/composable-tables/src/hooks/table.ts b/examples/solid/composable-tables/src/hooks/table.ts
index d8379b071c..377aed21e8 100644
--- a/examples/solid/composable-tables/src/hooks/table.ts
+++ b/examples/solid/composable-tables/src/hooks/table.ts
@@ -13,6 +13,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -32,6 +33,7 @@ import {
   PriceCell,
   ProgressCell,
   RowActionsCell,
+  SelectCell,
   StatusCell,
   TextCell,
 } from '../components/cell-components'
@@ -64,6 +66,7 @@ export const {
   features: tableFeatures({
     columnFilteringFeature,
     rowPaginationFeature,
+    rowSelectionFeature,
     rowSortingFeature,
     sortedRowModel: createSortedRowModel(),
     filteredRowModel: createFilteredRowModel(),
@@ -84,6 +87,7 @@ export const {
 
   // Register cell-level components (accessible via cell.ComponentName in AppCell)
   cellComponents: {
+    SelectCell,
     TextCell,
     NumberCell,
     StatusCell,
diff --git a/examples/solid/composable-tables/src/index.css b/examples/solid/composable-tables/src/index.css
index 4d8fef0142..8dd0d1ca90 100644
--- a/examples/solid/composable-tables/src/index.css
+++ b/examples/solid/composable-tables/src/index.css
@@ -603,3 +603,17 @@ tfoot th {
   font-size: 1.875rem;
   font-weight: 700;
 }
+
+/* Fixed-height scroll container for the table body. When the page size exceeds
+   ~12 rows the body overflows and scrolls, with sticky headers. */
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
diff --git a/examples/svelte/composable-tables/src/components/ProductsTable.svelte b/examples/svelte/composable-tables/src/components/ProductsTable.svelte
index 596db98a56..1aa036e8c6 100644
--- a/examples/svelte/composable-tables/src/components/ProductsTable.svelte
+++ b/examples/svelte/composable-tables/src/components/ProductsTable.svelte
@@ -24,6 +24,11 @@
 
   // Define columns using the column helper - different structure than Users table
   const columns = productColumnHelper.columns([
+    productColumnHelper.display({
+      id: 'select',
+      header: ({ header }) => renderComponent(header.SelectHeader),
+      cell: ({ cell }) => renderComponent(cell.SelectCell),
+    }),
     productColumnHelper.accessor('name', {
       header: 'Product Name',
       footer: (props) => props.column.id,
@@ -59,6 +64,7 @@
       return data
     },
     getRowId: (row) => row.id,
+    enableRowSelection: true,
   })
 
   // Reactive derived values from table state
@@ -84,6 +90,7 @@
     />
 
     <!-- Table element -->
+    <div class="table-scroll">
     <table>
       <thead>
         {#each table.getHeaderGroups() as headerGroup (headerGroup.id)
@@ -166,6 +173,7 @@
         {/each}
       </tfoot>
     </table>
+    </div>
 
     <!-- Pagination using the same pre-bound component -->
     <table.PaginationControls />
diff --git a/examples/svelte/composable-tables/src/components/SelectCell.svelte b/examples/svelte/composable-tables/src/components/SelectCell.svelte
new file mode 100644
index 0000000000..6b144f1a07
--- /dev/null
+++ b/examples/svelte/composable-tables/src/components/SelectCell.svelte
@@ -0,0 +1,31 @@
+<!--
+  Row-selection checkbox cell - toggles selection for the current row.
+  Uses useCellContext to access the cell (and its row) instance.
+
+  Unlike React, Svelte tracks the table state read here natively, so no
+  Subscribe boundary is needed; a small action sets the indeterminate property.
+-->
+<script lang="ts">
+  import { useCellContext } from '../hooks/table'
+
+  const cell = useCellContext()
+  const row = $derived(cell.row)
+
+  // Svelte action to set the indeterminate property on the checkbox input.
+  function setIndeterminate(node: HTMLInputElement, value: boolean) {
+    node.indeterminate = value
+    return {
+      update(newValue: boolean) {
+        node.indeterminate = newValue
+      },
+    }
+  }
+</script>
+
+<input
+  type="checkbox"
+  checked={row.getIsSelected()}
+  disabled={!row.getCanSelect()}
+  use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()}
+  onchange={row.getToggleSelectedHandler()}
+/>
diff --git a/examples/svelte/composable-tables/src/components/SelectHeader.svelte b/examples/svelte/composable-tables/src/components/SelectHeader.svelte
new file mode 100644
index 0000000000..c19be36e72
--- /dev/null
+++ b/examples/svelte/composable-tables/src/components/SelectHeader.svelte
@@ -0,0 +1,31 @@
+<!--
+  Select-all header checkbox for the row-selection column.
+  Uses useHeaderContext to access the header (and its table) instance.
+-->
+<script lang="ts">
+  import { useHeaderContext } from '../hooks/table'
+
+  const header = useHeaderContext()
+  const table = $derived(header.table)
+
+  // Svelte action to set the indeterminate property on the checkbox input.
+  function setIndeterminate(node: HTMLInputElement, value: boolean) {
+    node.indeterminate = value
+    return {
+      update(newValue: boolean) {
+        node.indeterminate = newValue
+      },
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<input
+  type="checkbox"
+  checked={table.getIsAllRowsSelected()}
+  use:setIndeterminate={!table.getIsAllRowsSelected() &&
+    table.getIsSomeRowsSelected()}
+  onchange={table.getToggleAllRowsSelectedHandler()}
+  onclick={(e) => e.stopPropagation()}
+/>
diff --git a/examples/svelte/composable-tables/src/components/UsersTable.svelte b/examples/svelte/composable-tables/src/components/UsersTable.svelte
index a09cab1763..95fe06bc76 100644
--- a/examples/svelte/composable-tables/src/components/UsersTable.svelte
+++ b/examples/svelte/composable-tables/src/components/UsersTable.svelte
@@ -25,6 +25,11 @@
   // NOTE: You must use `createAppColumnHelper` instead of `createColumnHelper`
   // when using pre-bound components like cell.TextCell
   const columns = personColumnHelper.columns([
+    personColumnHelper.display({
+      id: 'select',
+      header: ({ header }) => renderComponent(header.SelectHeader),
+      cell: ({ cell }) => renderComponent(cell.SelectCell),
+    }),
     personColumnHelper.accessor('firstName', {
       header: 'First Name',
       footer: (props) => props.column.id,
@@ -68,6 +73,7 @@
     get data() {
       return data
     },
+    enableRowSelection: true,
     debugTable: true,
   })
 
@@ -96,6 +102,7 @@
     />
 
     <!-- Table element -->
+    <div class="table-scroll">
     <table>
       <thead>
         {#each table.getHeaderGroups() as headerGroup (headerGroup.id)
@@ -180,6 +187,7 @@
         {/each}
       </tfoot>
     </table>
+    </div>
 
     <!-- Pagination using pre-bound component -->
     <table.PaginationControls />
diff --git a/examples/svelte/composable-tables/src/hooks/table.ts b/examples/svelte/composable-tables/src/hooks/table.ts
index 9694a6b1cf..fcff4aca29 100644
--- a/examples/svelte/composable-tables/src/hooks/table.ts
+++ b/examples/svelte/composable-tables/src/hooks/table.ts
@@ -13,6 +13,7 @@ import {
   createTableHook,
   filterFns,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -29,6 +30,7 @@ import NumberCell from '../components/NumberCell.svelte'
 import PriceCell from '../components/PriceCell.svelte'
 import ProgressCell from '../components/ProgressCell.svelte'
 import RowActionsCell from '../components/RowActionsCell.svelte'
+import SelectCell from '../components/SelectCell.svelte'
 import StatusCell from '../components/StatusCell.svelte'
 import TextCell from '../components/TextCell.svelte'
 
@@ -36,6 +38,7 @@ import TextCell from '../components/TextCell.svelte'
 import ColumnFilter from '../components/ColumnFilter.svelte'
 import FooterColumnId from '../components/FooterColumnId.svelte'
 import FooterSum from '../components/FooterSum.svelte'
+import SelectHeader from '../components/SelectHeader.svelte'
 import SortIndicator from '../components/SortIndicator.svelte'
 
 /**
@@ -58,6 +61,7 @@ export const {
   features: tableFeatures({
     columnFilteringFeature,
     rowPaginationFeature,
+    rowSelectionFeature,
     rowSortingFeature,
     sortedRowModel: createSortedRowModel(),
     filteredRowModel: createFilteredRowModel(),
@@ -78,6 +82,7 @@ export const {
 
   // Register cell-level components (accessible via cell.ComponentName in AppCell)
   cellComponents: {
+    SelectCell,
     TextCell,
     NumberCell,
     StatusCell,
@@ -89,6 +94,7 @@ export const {
 
   // Register header/footer-level components (accessible via header.ComponentName in AppHeader/AppFooter)
   headerComponents: {
+    SelectHeader,
     SortIndicator,
     ColumnFilter,
     FooterColumnId,
diff --git a/examples/svelte/composable-tables/src/index.css b/examples/svelte/composable-tables/src/index.css
index 4d8fef0142..09ce02888c 100644
--- a/examples/svelte/composable-tables/src/index.css
+++ b/examples/svelte/composable-tables/src/index.css
@@ -43,6 +43,18 @@ tfoot th {
   border-spacing: 0;
 }
 
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .pagination {
   display: flex;
   align-items: center;
diff --git a/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue b/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue
new file mode 100644
index 0000000000..7ea24e9f0d
--- /dev/null
+++ b/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  checked?: boolean
+  disabled?: boolean
+  indeterminate?: boolean
+  onChange?: (event: Event) => void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+watchEffect(() => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = !props.checked && !!props.indeterminate
+  }
+})
+</script>
+
+<template>
+  <input
+    type="checkbox"
+    ref="inputRef"
+    :checked="props.checked"
+    :disabled="props.disabled"
+    @change="props.onChange"
+  />
+</template>
diff --git a/examples/vue/composable-tables/src/components/ProductsTable.vue b/examples/vue/composable-tables/src/components/ProductsTable.vue
index 35d811cbd2..58eaa61cad 100644
--- a/examples/vue/composable-tables/src/components/ProductsTable.vue
+++ b/examples/vue/composable-tables/src/components/ProductsTable.vue
@@ -10,6 +10,11 @@ const columnHelper = createAppColumnHelper<Product>()
 const data = ref(makeProductData(1_000))
 
 const columns = columnHelper.columns([
+  columnHelper.display({
+    id: 'select',
+    header: ({ header }) => header.SelectAllHeader,
+    cell: ({ cell }) => cell.SelectCell,
+  }),
   columnHelper.accessor('name', {
     header: 'Product',
     footer: (props) => props.column.id,
@@ -48,6 +53,7 @@ function stressTest() {
 const table = useAppTable({
   key: 'products-table', // needed for devtools
   debugTable: true,
+  enableRowSelection: true,
   columns,
   data,
   initialState: {
@@ -71,75 +77,79 @@ useTanStackTableDevtools(table)
         :onStressTest="stressTest"
       />
 
-      <table>
-        <thead>
-          <tr
-            v-for="headerGroup in table.getHeaderGroups()"
-            :key="headerGroup.id"
-          >
-            <component
-              :is="table.AppHeader"
-              v-for="header in headerGroup.headers"
-              :key="header.id"
-              :header="header"
-              v-slot="{ header: appHeader }"
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
             >
-              <th
-                :colspan="appHeader.colSpan"
-                :class="{ 'sortable-header': appHeader.column.getCanSort() }"
-                @click="appHeader.column.getToggleSortingHandler()?.($event)"
+              <component
+                :is="table.AppHeader"
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                :header="header"
+                v-slot="{ header: appHeader }"
               >
-                <template v-if="!appHeader.isPlaceholder">
-                  <component :is="appHeader.FlexRender" />
-                  <component :is="appHeader.SortIndicator" />
-                  <component :is="appHeader.ColumnFilter" />
-                </template>
-              </th>
-            </component>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in table.getRowModel().rows" :key="row.id">
-            <component
-              :is="table.AppCell"
-              v-for="cell in row.getAllCells()"
-              :key="cell.id"
-              :cell="cell"
-              v-slot="{ cell: appCell }"
-            >
-              <td>
-                <component :is="appCell.FlexRender" />
-              </td>
-            </component>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr
-            v-for="footerGroup in table.getFooterGroups()"
-            :key="footerGroup.id"
-          >
-            <component
-              :is="table.AppFooter"
-              v-for="header in footerGroup.headers"
-              :key="header.id"
-              :header="header"
-              v-slot="{ header: appFooter }"
+                <th
+                  :colspan="appHeader.colSpan"
+                  :class="{ 'sortable-header': appHeader.column.getCanSort() }"
+                  @click="appHeader.column.getToggleSortingHandler()?.($event)"
+                >
+                  <template v-if="!appHeader.isPlaceholder">
+                    <component :is="appHeader.FlexRender" />
+                    <component :is="appHeader.SortIndicator" />
+                    <component :is="appHeader.ColumnFilter" />
+                  </template>
+                </th>
+              </component>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in table.getRowModel().rows" :key="row.id">
+              <component
+                :is="table.AppCell"
+                v-for="cell in row.getAllCells()"
+                :key="cell.id"
+                :cell="cell"
+                v-slot="{ cell: appCell }"
+              >
+                <td>
+                  <component :is="appCell.FlexRender" />
+                </td>
+              </component>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr
+              v-for="footerGroup in table.getFooterGroups()"
+              :key="footerGroup.id"
             >
-              <td :colspan="appFooter.colSpan">
-                <template v-if="!appFooter.isPlaceholder">
-                  <component
-                    :is="
-                      ['price', 'stock', 'rating'].includes(appFooter.column.id)
-                        ? appFooter.FooterSum
-                        : appFooter.FooterColumnId
-                    "
-                  />
-                </template>
-              </td>
-            </component>
-          </tr>
-        </tfoot>
-      </table>
+              <component
+                :is="table.AppFooter"
+                v-for="header in footerGroup.headers"
+                :key="header.id"
+                :header="header"
+                v-slot="{ header: appFooter }"
+              >
+                <td :colspan="appFooter.colSpan">
+                  <template v-if="!appFooter.isPlaceholder">
+                    <component
+                      :is="
+                        ['price', 'stock', 'rating'].includes(
+                          appFooter.column.id,
+                        )
+                          ? appFooter.FooterSum
+                          : appFooter.FooterColumnId
+                      "
+                    />
+                  </template>
+                </td>
+              </component>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
 
       <component :is="table.PaginationControls" />
       <component :is="table.RowCount" />
diff --git a/examples/vue/composable-tables/src/components/UsersTable.vue b/examples/vue/composable-tables/src/components/UsersTable.vue
index 9295bed4dd..1ed3ec5acb 100644
--- a/examples/vue/composable-tables/src/components/UsersTable.vue
+++ b/examples/vue/composable-tables/src/components/UsersTable.vue
@@ -10,6 +10,11 @@ const columnHelper = createAppColumnHelper<Person>()
 const data = ref(makeData(1_000))
 
 const columns = columnHelper.columns([
+  columnHelper.display({
+    id: 'select',
+    header: ({ header }) => header.SelectAllHeader,
+    cell: ({ cell }) => cell.SelectCell,
+  }),
   columnHelper.accessor('firstName', {
     header: 'First Name',
     footer: (props) => props.column.id,
@@ -58,6 +63,7 @@ function stressTest() {
 const table = useAppTable({
   key: 'users-table', // needed for devtools
   debugTable: true,
+  enableRowSelection: true,
   columns,
   data,
   initialState: {
@@ -89,85 +95,90 @@ function tableSelector(state: ReturnType<typeof table.store.get>) {
         :onStressTest="stressTest"
       />
 
-      <table>
-        <thead>
-          <tr
-            v-for="headerGroup in table.getHeaderGroups()"
-            :key="headerGroup.id"
-          >
-            <component
-              :is="table.AppHeader"
-              v-for="header in headerGroup.headers"
-              :key="header.id"
-              :header="header"
-              v-slot="{ header: appHeader }"
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
             >
-              <th
-                :colspan="appHeader.colSpan"
-                :class="{ 'sortable-header': appHeader.column.getCanSort() }"
-                @click="appHeader.column.getToggleSortingHandler()?.($event)"
+              <component
+                :is="table.AppHeader"
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                :header="header"
+                v-slot="{ header: appHeader }"
               >
-                <template v-if="!appHeader.isPlaceholder">
-                  <component :is="appHeader.FlexRender" />
-                  <component :is="appHeader.SortIndicator" />
-                  <component :is="appHeader.ColumnFilter" />
-                  <span v-if="state.sorting.length > 1" class="sort-indicator">
-                    {{
-                      state.sorting.findIndex(
-                        (sort: { id: string }) =>
-                          sort.id === appHeader.column.id,
-                      ) + 1 || ''
-                    }}
-                  </span>
-                </template>
-              </th>
-            </component>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in table.getRowModel().rows" :key="row.id">
-            <component
-              :is="table.AppCell"
-              v-for="cell in row.getAllCells()"
-              :key="cell.id"
-              :cell="cell"
-              v-slot="{ cell: appCell }"
-            >
-              <td>
-                <component :is="appCell.FlexRender" />
-              </td>
-            </component>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr
-            v-for="footerGroup in table.getFooterGroups()"
-            :key="footerGroup.id"
-          >
-            <component
-              :is="table.AppFooter"
-              v-for="header in footerGroup.headers"
-              :key="header.id"
-              :header="header"
-              v-slot="{ header: appFooter }"
+                <th
+                  :colspan="appHeader.colSpan"
+                  :class="{ 'sortable-header': appHeader.column.getCanSort() }"
+                  @click="appHeader.column.getToggleSortingHandler()?.($event)"
+                >
+                  <template v-if="!appHeader.isPlaceholder">
+                    <component :is="appHeader.FlexRender" />
+                    <component :is="appHeader.SortIndicator" />
+                    <component :is="appHeader.ColumnFilter" />
+                    <span
+                      v-if="state.sorting.length > 1"
+                      class="sort-indicator"
+                    >
+                      {{
+                        state.sorting.findIndex(
+                          (sort: { id: string }) =>
+                            sort.id === appHeader.column.id,
+                        ) + 1 || ''
+                      }}
+                    </span>
+                  </template>
+                </th>
+              </component>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in table.getRowModel().rows" :key="row.id">
+              <component
+                :is="table.AppCell"
+                v-for="cell in row.getAllCells()"
+                :key="cell.id"
+                :cell="cell"
+                v-slot="{ cell: appCell }"
+              >
+                <td>
+                  <component :is="appCell.FlexRender" />
+                </td>
+              </component>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr
+              v-for="footerGroup in table.getFooterGroups()"
+              :key="footerGroup.id"
             >
-              <td :colspan="appFooter.colSpan">
-                <template v-if="!appFooter.isPlaceholder">
-                  <component
-                    :is="
-                      ['age', 'visits', 'progress'].includes(
-                        appFooter.column.id,
-                      )
-                        ? appFooter.FooterSum
-                        : appFooter.FooterColumnId
-                    "
-                  />
-                </template>
-              </td>
-            </component>
-          </tr>
-        </tfoot>
-      </table>
+              <component
+                :is="table.AppFooter"
+                v-for="header in footerGroup.headers"
+                :key="header.id"
+                :header="header"
+                v-slot="{ header: appFooter }"
+              >
+                <td :colspan="appFooter.colSpan">
+                  <template v-if="!appFooter.isPlaceholder">
+                    <component
+                      :is="
+                        ['age', 'visits', 'progress'].includes(
+                          appFooter.column.id,
+                        )
+                          ? appFooter.FooterSum
+                          : appFooter.FooterColumnId
+                      "
+                    />
+                  </template>
+                </td>
+              </component>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
 
       <component :is="table.PaginationControls" />
       <component :is="table.RowCount" />
diff --git a/examples/vue/composable-tables/src/components/cell-components.ts b/examples/vue/composable-tables/src/components/cell-components.ts
index bacd92252e..b39e149cbb 100644
--- a/examples/vue/composable-tables/src/components/cell-components.ts
+++ b/examples/vue/composable-tables/src/components/cell-components.ts
@@ -1,5 +1,27 @@
 import { defineComponent, h } from 'vue'
 import { useCellContext } from '../hooks/table'
+import IndeterminateCheckbox from './IndeterminateCheckbox.vue'
+
+// Row-selection checkbox cell - toggles selection for the current row.
+// Vue tracks the reactive table state natively, so no Subscribe boundary is
+// needed for the checkbox to update when the row-selection state changes.
+export const SelectCell = defineComponent({
+  name: 'SelectCell',
+  setup() {
+    const cell = useCellContext()
+    return () => {
+      const row = cell.row
+      return h('div', { class: 'column-toggle-row' }, [
+        h(IndeterminateCheckbox, {
+          checked: row.getIsSelected(),
+          disabled: !row.getCanSelect(),
+          indeterminate: row.getIsSomeSelected(),
+          onChange: row.getToggleSelectedHandler(),
+        }),
+      ])
+    }
+  },
+})
 
 export const TextCell = defineComponent({
   name: 'TextCell',
diff --git a/examples/vue/composable-tables/src/components/header-components.ts b/examples/vue/composable-tables/src/components/header-components.ts
index 5cb64d8667..af6d826783 100644
--- a/examples/vue/composable-tables/src/components/header-components.ts
+++ b/examples/vue/composable-tables/src/components/header-components.ts
@@ -1,5 +1,22 @@
 import { computed, defineComponent, h } from 'vue'
 import { useHeaderContext } from '../hooks/table'
+import IndeterminateCheckbox from './IndeterminateCheckbox.vue'
+
+// Select-all checkbox used in the header of the row-selection column.
+export const SelectAllHeader = defineComponent({
+  name: 'SelectAllHeader',
+  setup() {
+    const header = useHeaderContext()
+    return () => {
+      const table = header.getContext().table
+      return h(IndeterminateCheckbox, {
+        checked: table.getIsAllRowsSelected(),
+        indeterminate: table.getIsSomeRowsSelected(),
+        onChange: table.getToggleAllRowsSelectedHandler(),
+      })
+    }
+  },
+})
 
 export const SortIndicator = defineComponent({
   name: 'SortIndicator',
diff --git a/examples/vue/composable-tables/src/hooks/table.ts b/examples/vue/composable-tables/src/hooks/table.ts
index 3fd438e13d..a94114613e 100644
--- a/examples/vue/composable-tables/src/hooks/table.ts
+++ b/examples/vue/composable-tables/src/hooks/table.ts
@@ -7,6 +7,7 @@ import {
   filterFns,
   globalFilteringFeature,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   sortFns,
   tableFeatures,
@@ -17,6 +18,7 @@ import {
   PriceCell,
   ProgressCell,
   RowActionsCell,
+  SelectCell,
   StatusCell,
   TextCell,
 } from '../components/cell-components'
@@ -24,6 +26,7 @@ import {
   ColumnFilter,
   FooterColumnId,
   FooterSum,
+  SelectAllHeader,
   SortIndicator,
 } from '../components/header-components'
 import {
@@ -47,6 +50,7 @@ const features = tableFeatures({
   columnFilteringFeature,
   globalFilteringFeature,
   rowPaginationFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
@@ -71,12 +75,14 @@ const _hook = createTableHook({
     RowActionsCell,
     PriceCell,
     CategoryCell,
+    SelectCell,
   },
   headerComponents: {
     SortIndicator,
     ColumnFilter,
     FooterColumnId,
     FooterSum,
+    SelectAllHeader,
   },
 })
 
diff --git a/examples/vue/composable-tables/src/index.css b/examples/vue/composable-tables/src/index.css
index 4d8fef0142..b171dde3f0 100644
--- a/examples/vue/composable-tables/src/index.css
+++ b/examples/vue/composable-tables/src/index.css
@@ -35,6 +35,18 @@ tfoot th {
   font-weight: normal;
 }
 
+.table-scroll {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid lightgray;
+}
+
+.table-scroll thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .table-container {
   padding: 16px;
   max-width: 1200px;
diff --git a/packages/preact-table/src/createTableHook.tsx b/packages/preact-table/src/createTableHook.tsx
index ee8fadbd0c..9b3e57d057 100644
--- a/packages/preact-table/src/createTableHook.tsx
+++ b/packages/preact-table/src/createTableHook.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { createContext } from 'preact'
-import { useContext, useMemo } from 'preact/hooks'
+import { useContext, useMemo, useRef } from 'preact/hooks'
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
 import { useTable } from './useTable'
 import { FlexRender } from './FlexRender'
@@ -819,6 +819,16 @@ export function createTableHook<
       selector,
     )
 
+    // `useTable` returns a fresh `table` reference on every render (required for
+    // the React Compiler). The App wrapper components below must NOT depend on
+    // that reference, or they would be recreated each render and Preact would
+    // remount their entire subtree on every state update (e.g. a controlled
+    // input in a toolbar would lose focus on each keystroke). Instead we keep
+    // the components stable (created once) and read the current table from a
+    // ref that we refresh on every render.
+    const tableRef = useRef(table)
+    tableRef.current = table
+
     // AppTable - Root wrapper that provides table context with optional Subscribe
     const AppTable = useMemo(() => {
       function AppTableImpl(
@@ -833,17 +843,18 @@ export function createTableHook<
           | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
       ): ComponentChildren {
         const { children, selector: appTableSelector } = props as any
+        const currentTable = tableRef.current
 
         return (
-          <TableContext.Provider value={table}>
+          <TableContext.Provider value={currentTable}>
             {appTableSelector ? (
-              <table.Subscribe selector={appTableSelector}>
+              <currentTable.Subscribe selector={appTableSelector}>
                 {(state: TAppTableSelected) =>
                   (children as (state: TAppTableSelected) => ComponentChildren)(
                     state,
                   )
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               children
             )}
@@ -851,7 +862,7 @@ export function createTableHook<
         )
       }
       return AppTableImpl as AppTableComponent<TFeatures>
-    }, [table])
+    }, [])
 
     // AppCell - Wraps cell with context, pre-bound cellComponents, and optional Subscribe
     const AppCell = useMemo(() => {
@@ -895,6 +906,7 @@ export function createTableHook<
             >,
       ): ComponentChildren {
         const { cell, children, selector: appCellSelector } = props as any
+        const currentTable = tableRef.current
         const extendedCell = Object.assign(cell, {
           FlexRender: CellFlexRender,
           ...cellComponents,
@@ -903,7 +915,7 @@ export function createTableHook<
         return (
           <CellContext.Provider value={cell}>
             {appCellSelector ? (
-              <table.Subscribe selector={appCellSelector}>
+              <currentTable.Subscribe selector={appCellSelector}>
                 {(state: TAppCellSelected) =>
                   (
                     children as (
@@ -915,7 +927,7 @@ export function createTableHook<
                     ) => ComponentChildren
                   )(extendedCell, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -928,7 +940,7 @@ export function createTableHook<
         )
       }
       return AppCellImpl as AppCellComponent<TFeatures, TData, TCellComponents>
-    }, [table])
+    }, [])
 
     // AppHeader - Wraps header with context, pre-bound headerComponents, and optional Subscribe
     const AppHeader = useMemo(() => {
@@ -972,6 +984,7 @@ export function createTableHook<
             >,
       ): ComponentChildren {
         const { header, children, selector: appHeaderSelector } = props as any
+        const currentTable = tableRef.current
         const extendedHeader = Object.assign(header, {
           FlexRender: HeaderFlexRender,
           ...headerComponents,
@@ -980,7 +993,7 @@ export function createTableHook<
         return (
           <HeaderContext.Provider value={header}>
             {appHeaderSelector ? (
-              <table.Subscribe selector={appHeaderSelector}>
+              <currentTable.Subscribe selector={appHeaderSelector}>
                 {(state: TAppHeaderSelected) =>
                   (
                     children as (
@@ -990,7 +1003,7 @@ export function createTableHook<
                     ) => ComponentChildren
                   )(extendedHeader, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -1007,7 +1020,7 @@ export function createTableHook<
         TData,
         THeaderComponents
       >
-    }, [table])
+    }, [])
 
     // AppFooter - Same as AppHeader (footers use Header type)
     const AppFooter = useMemo(() => {
@@ -1051,6 +1064,7 @@ export function createTableHook<
             >,
       ): ComponentChildren {
         const { header, children, selector: appFooterSelector } = props as any
+        const currentTable = tableRef.current
         const extendedHeader = Object.assign(header, {
           FlexRender: FooterFlexRender,
           ...headerComponents,
@@ -1059,7 +1073,7 @@ export function createTableHook<
         return (
           <HeaderContext.Provider value={header}>
             {appFooterSelector ? (
-              <table.Subscribe selector={appFooterSelector}>
+              <currentTable.Subscribe selector={appFooterSelector}>
                 {(state: TAppFooterSelected) =>
                   (
                     children as (
@@ -1069,7 +1083,7 @@ export function createTableHook<
                     ) => ComponentChildren
                   )(extendedHeader, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -1086,7 +1100,7 @@ export function createTableHook<
         TData,
         THeaderComponents
       >
-    }, [table])
+    }, [])
 
     // Combine everything into the extended table API
     const extendedTable = useMemo(() => {
diff --git a/packages/react-table/src/createTableHook.tsx b/packages/react-table/src/createTableHook.tsx
index 7f976a2959..5bd8a55be1 100644
--- a/packages/react-table/src/createTableHook.tsx
+++ b/packages/react-table/src/createTableHook.tsx
@@ -1,6 +1,6 @@
 'use client'
 /* eslint-disable @eslint-react/no-context-provider */
-import React, { createContext, useContext, useMemo } from 'react'
+import React, { createContext, useContext, useMemo, useRef } from 'react'
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
 import { useTable } from './useTable'
 import { FlexRender } from './FlexRender'
@@ -823,6 +823,16 @@ export function createTableHook<
       selector,
     )
 
+    // `useTable` returns a fresh `table` reference on every render (required for
+    // the React Compiler). The App wrapper components below must NOT depend on
+    // that reference, or they would be recreated each render and React would
+    // remount their entire subtree on every state update (e.g. a controlled
+    // input in a toolbar would lose focus on each keystroke). Instead we keep
+    // the components stable (created once) and read the current table from a
+    // ref that we refresh on every render.
+    const tableRef = useRef(table)
+    tableRef.current = table
+
     // AppTable - Root wrapper that provides table context with optional Subscribe
     const AppTable = useMemo(() => {
       function AppTableImpl(props: AppTablePropsWithoutSelector): ReactNode
@@ -835,15 +845,16 @@ export function createTableHook<
           | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
       ): ReactNode {
         const { children, selector: appTableSelector } = props
+        const currentTable = tableRef.current
 
         return (
-          <TableContext.Provider value={table}>
+          <TableContext.Provider value={currentTable}>
             {appTableSelector ? (
-              <table.Subscribe selector={appTableSelector}>
+              <currentTable.Subscribe selector={appTableSelector}>
                 {(state: TAppTableSelected) =>
                   (children as (state: TAppTableSelected) => ReactNode)(state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               children
             )}
@@ -851,7 +862,7 @@ export function createTableHook<
         )
       }
       return AppTableImpl as AppTableComponent<TFeatures>
-    }, [table])
+    }, [])
 
     // AppCell - Wraps cell with context, pre-bound cellComponents, and optional Subscribe
     const AppCell = useMemo(() => {
@@ -895,6 +906,7 @@ export function createTableHook<
             >,
       ): ReactNode {
         const { cell, children, selector: appCellSelector } = props as any
+        const currentTable = tableRef.current
         const extendedCell = Object.assign(cell, {
           FlexRender: CellFlexRender,
           ...cellComponents,
@@ -903,7 +915,7 @@ export function createTableHook<
         return (
           <CellContext.Provider value={cell}>
             {appCellSelector ? (
-              <table.Subscribe selector={appCellSelector}>
+              <currentTable.Subscribe selector={appCellSelector}>
                 {(state: TAppCellSelected) =>
                   (
                     children as (
@@ -913,7 +925,7 @@ export function createTableHook<
                     ) => ReactNode
                   )(extendedCell, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -926,7 +938,7 @@ export function createTableHook<
         )
       }
       return AppCellImpl as AppCellComponent<TFeatures, TData, TCellComponents>
-    }, [table])
+    }, [])
 
     // AppHeader - Wraps header with context, pre-bound headerComponents, and optional Subscribe
     const AppHeader = useMemo(() => {
@@ -970,6 +982,7 @@ export function createTableHook<
             >,
       ): ReactNode {
         const { header, children, selector: appHeaderSelector } = props as any
+        const currentTable = tableRef.current
         const extendedHeader = Object.assign(header, {
           FlexRender: HeaderFlexRender,
           ...headerComponents,
@@ -978,7 +991,7 @@ export function createTableHook<
         return (
           <HeaderContext.Provider value={header}>
             {appHeaderSelector ? (
-              <table.Subscribe selector={appHeaderSelector}>
+              <currentTable.Subscribe selector={appHeaderSelector}>
                 {(state: TAppHeaderSelected) =>
                   (
                     children as (
@@ -988,7 +1001,7 @@ export function createTableHook<
                     ) => ReactNode
                   )(extendedHeader, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -1005,7 +1018,7 @@ export function createTableHook<
         TData,
         THeaderComponents
       >
-    }, [table])
+    }, [])
 
     // AppFooter - Same as AppHeader (footers use Header type)
     const AppFooter = useMemo(() => {
@@ -1049,6 +1062,7 @@ export function createTableHook<
             >,
       ): ReactNode {
         const { header, children, selector: appFooterSelector } = props as any
+        const currentTable = tableRef.current
         const extendedHeader = Object.assign(header, {
           FlexRender: FooterFlexRender,
           ...headerComponents,
@@ -1057,7 +1071,7 @@ export function createTableHook<
         return (
           <HeaderContext.Provider value={header}>
             {appFooterSelector ? (
-              <table.Subscribe selector={appFooterSelector}>
+              <currentTable.Subscribe selector={appFooterSelector}>
                 {(state: TAppFooterSelected) =>
                   (
                     children as (
@@ -1067,7 +1081,7 @@ export function createTableHook<
                     ) => ReactNode
                   )(extendedHeader, state)
                 }
-              </table.Subscribe>
+              </currentTable.Subscribe>
             ) : (
               (
                 children as (
@@ -1084,7 +1098,7 @@ export function createTableHook<
         TData,
         THeaderComponents
       >
-    }, [table])
+    }, [])
 
     // Combine everything into the extended table API
     const extendedTable = useMemo(() => {