### Install and Run Example

Source: https://github.com/tanstack/table/blob/beta/examples/lit/basic-subscribe/README.md

Instructions for installing dependencies and starting the development server for the example.

```bash
npm install
npm run start
```

--------------------------------

### Start Example Server (Alternative)

Source: https://github.com/tanstack/table/blob/beta/CONTRIBUTING.md

An alternative command to start the dev server for an example. Ensure you are in the example directory.

```bash
pnpm start
```

--------------------------------

### Install Dependencies and Run Example

Source: https://github.com/tanstack/table/blob/beta/examples/react/mantine-react-table/README.md

Instructions for installing dependencies and running the development server for the Mantine React Table example.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Run the Development Server with pnpm

Source: https://github.com/tanstack/table/blob/beta/examples/preact/with-tanstack-form/README.md

Start the development server to run the example.

```bash
pnpm dev
```

--------------------------------

### Basic Angular Table Setup

Source: https://github.com/tanstack/table/blob/beta/packages/angular-table/skills/angular/getting-started/SKILL.md

This example shows the minimal setup for a table using @tanstack/angular-table, including data definition, column configuration, and rendering the table in an Angular component.

```typescript
// app.ts
import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
import {
  FlexRender,
  injectTable,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/angular-table'

type Person = {
  id: string
  firstName: string
  lastName: string
  age: number
}

// 1. features OUTSIDE the component class (stable reference)
const features = tableFeatures({}) // empty = core row model only

// 2. columns OUTSIDE the component class (stable reference)
const columns: Array<ColumnDef<typeof features, Person>> = [
  {
    accessorKey: 'firstName',
    header: 'First name',
    cell: (info) => info.getValue(),
  },
  {
    accessorKey: 'lastName',
    header: 'Last name',
    cell: (info) => info.getValue(),
  },
  {
    accessorKey: 'age',
    header: () => 'Age',
    cell: (info) => info.getValue(),
  },
]

@Component({
  selector: 'app-root',
  imports: [FlexRender], // tuple imports BOTH directives
  templateUrl: './app.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
  readonly data = signal<Array<Person>>([
    { id: '1', firstName: 'Ada', lastName: 'Lovelace', age: 36 },
    { id: '2', firstName: 'Alan', lastName: 'Turing', age: 41 },
  ])

  // 3. injectTable in an injection context (a class field qualifies)
  readonly table = injectTable(() => ({
    features, // required in v9; core row model is automatic
    columns, // stable ref
    data: this.data(), // signal read → re-syncs the table on change
  }))
}

```

```html
<!-- app.html -->
<table>
  <thead>
    @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
    <tr>
      @for (header of headerGroup.headers; track header.id) {
      <th>
        @if (!header.isPlaceholder) {
        <ng-container *flexRenderHeader="header; let value">
          {{ value }}
        </ng-container>
        }
      </th>
      }
    </tr>
    }
  </thead>

  <tbody>
    @for (row of table.getRowModel().rows; track row.id) {
    <tr>
      @for (cell of row.getVisibleCells(); track cell.id) {
      <td>
        <ng-container *flexRenderCell="cell; let value">
          {{ value }}
        </ng-container>
      </td>
      }
    </tr>
    }
  </tbody>
</table>

```

--------------------------------

### TanStack Table and Virtualizer Setup

Source: https://github.com/tanstack/table/blob/beta/docs/framework/react/guide/virtualization.md

Set up your TanStack Table with features and create the table instance. This example shows the necessary imports and basic table creation, integrating with TanStack Virtual.

```tsx
import {
  columnSizingFeature,
  rowSortingFeature,
  createSortedRowModel,
  sortFns,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'

const features = tableFeatures({
  columnSizingFeature,
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
})

const table = useTable({
  features,
  columns,
  data,
})
```

--------------------------------

### Install @tanstack/svelte-virtual

Source: https://github.com/tanstack/table/blob/beta/packages/svelte-table/skills/svelte/compose-with-tanstack-virtual/SKILL.md

Install the necessary virtualization library using pnpm.

```bash
pnpm add @tanstack/svelte-virtual
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/tanstack/table/blob/beta/examples/vue/column-ordering/README.md

Run this command to install all necessary packages for the project.

```sh
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/compose-with-tanstack-query/SKILL.md

Install the necessary packages for @tanstack/solid-query and @tanstack/solid-store.

```bash
pnpm add @tanstack/solid-query @tanstack/solid-store
```

--------------------------------

### SolidJS Table with TanStack Virtualization

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/compose-with-tanstack-virtual/SKILL.md

This example demonstrates how to set up a SolidJS table with virtualization using `@tanstack/solid-virtual`. It includes the table creation, virtualizer setup, and rendering logic for both headers and body rows. Ensure the scroll container and virtualizer are in the same component.

```tsx
import {
  createTable,
  rowSortingFeature,
  createSortedRowModel,
  sortFns,
  columnSizingFeature,
  tableFeatures,
  FlexRender,
  type Row,
  type SolidTable,
} from '@tanstack/solid-table'
import {
  createVirtualizer,
  type VirtualItem,
  type Virtualizer,
} from '@tanstack/solid-virtual'
import { For, createSignal } from 'solid-js'

const features = tableFeatures({
  columnSizingFeature,
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
})

function App() {
  const [data] = createSignal(makeData(200_000))

  const table = createTable({
    features,
    columns,
    get data() {
      return data()
    },
  })

  return <VirtualizedTable table={table} />
}

// Keep the virtualizer + scroll container ref in the SAME component.
function VirtualizedTable(props: {
  table: SolidTable<typeof features, Person>
}) {
  let tableContainerRef: HTMLDivElement | undefined

  const rows = () => props.table.getRowModel().rows

  const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>(
    {
      get count() {
        return rows().length
      },
      estimateSize: () => 33,
      getScrollElement: () => tableContainerRef ?? null,
      // Optional: measure for dynamic row height
      measureElement:
        typeof window !== 'undefined' &&
        navigator.userAgent.indexOf('Firefox') === -1
          ? (el) => el.getBoundingClientRect().height
          : undefined,
      overscan: 5,
    },
  )

  return (
    <div
      ref={tableContainerRef}
      style={{ overflow: 'auto', position: 'relative', height: '800px' }}
    >
      <table style={{ display: 'grid' }}>
        <thead
          style={{
            display: 'grid',
            position: 'sticky',
            top: '0px',
            'z-index': 1,
          }}
        >
          <For each={props.table.getHeaderGroups()}>
            {(hg) => (
              <tr style={{ display: 'flex', width: '100%' }}>
                <For each={hg.headers}>
                  {(header) => (
                    <th
                      style={{ display: 'flex', width: `${header.getSize()}px` }}
                    >
                      <FlexRender header={header} />
                    </th>
                  )}
                </For>
              </tr>
            )}
          </For>
        </thead>
        <tbody
          style={{
            display: 'grid',
            height: `${rowVirtualizer.getTotalSize()}px`, // tells the scrollbar how tall
            position: 'relative',
          }}
        >
          <For each={rowVirtualizer.getVirtualItems()}>
            {(virtualRow) => (
              <TableBodyRow
                row={rows()[virtualRow.index]}
                virtualRow={virtualRow}
                rowVirtualizer={rowVirtualizer}
                table={props.table}
              />
            )}
          </For>
        </tbody>
      </table>
    </div>
  )
}

function TableBodyRow(props: {
  row: Row<typeof features, Person>
  virtualRow: VirtualItem
  rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>
  table: SolidTable<typeof features, Person>
}) {
  return (
    <tr
      data-index={props.virtualRow.index}
      ref={(node) => props.rowVirtualizer.measureElement(node)}
      style={{
        display: 'flex',
        position: 'absolute',
        transform: `translateY(${props.virtualRow.start}px)`,
        width: '100%',
      }}
    >
      <For each={props.row.getAllCells()}>
        {(cell) => (
          <td style={{ display: 'flex', width: `${cell.column.getSize()}px` }}>
            <FlexRender cell={cell} />
          </td>
        )}
      </For>
    </tr>
  )
}

```

--------------------------------

### Canonical Lit Table Setup

Source: https://github.com/tanstack/table/blob/beta/packages/lit-table/skills/lit/lit-table-controller/SKILL.md

Provides a complete example of setting up a LitElement component with the Lit Table Controller, including imports, column definitions, and rendering the table structure.

```ts
import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import { repeat } from 'lit/directives/repeat.js'
import {
  FlexRender,
  TableController,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/lit-table'

const features = tableFeatures({}) // module scope

const columns: Array<ColumnDef<typeof features, Person>> = [
  /* … module scope … */
]

@customElement('people-table')
class PeopleTable extends LitElement {
  // ONE controller, constructed as a class field.
  private tableController = new TableController<typeof features, Person>(this)

  @state()
  private data: Person[] = []

  protected render() {
    const table = this.tableController.table(
      {
        features,
        columns,
        data: this.data,
      },
      () => ({}), // selector — empty when you don't need to project state
    )

    return html`
      <table>
        <thead>
          ${repeat(
            table.getHeaderGroups(),
            (hg) => hg.id,
            (hg) => html`
              <tr>
                ${repeat(
                  hg.headers,
                  (h) => h.id,
                  (h) => html`<th>${FlexRender({ header: h })}</th>`,
                )}
              </tr>
            `,
          )}
        </thead>
        <tbody>
          ${repeat(
            table.getRowModel().rows,
            (r) => r.id,
            (row) => html`
              <tr>
                ${repeat(
                  row.getAllCells(),
                  (c) => c.id,
                  (cell) => html`<td>${FlexRender({ cell })}</td>`,
                )}
              </tr>
            `,
          )}
        </tbody>
      </table>
    `
  }
}

```

--------------------------------

### Lit Table Controller Setup and Rendering

Source: https://github.com/tanstack/table/blob/beta/packages/lit-table/skills/lit/table-state/SKILL.md

Register features, instantiate TableController, and call .table() within render(). This example demonstrates a basic Lit table with sorting capabilities.

```typescript
import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import { repeat } from 'lit/directives/repeat.js'
import {
  FlexRender,
  TableController,
  rowSortingFeature,
  createSortedRowModel,
  sortFns,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/lit-table'

type Person = { firstName: string; lastName: string; age: number }

const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
})

const columns: Array<ColumnDef<typeof features, Person>> = [
  {
    accessorKey: 'firstName',
    header: 'First Name',
    cell: (info) => info.getValue(),
  },
  { accessorKey: 'lastName', header: () => html`<span>Last Name</span>` },
  { accessorKey: 'age', header: 'Age' },
]

@customElement('people-table')
export class PeopleTable extends LitElement {
  // ONE controller per host. The constructor calls host.addController(this).
  private tableController = new TableController<typeof features, Person>(this)

  @state()
  private data: Person[] = []

  protected render() {
    const table = this.tableController.table(
      {
        features,
        columns,
        data: this.data,
      },
      (state) => ({ sorting: state.sorting }),
    )

    return html`
      <table>
        <thead>
          ${repeat(
            table.getHeaderGroups(),
            (hg) => hg.id,
            (hg) => html`
              <tr>
                ${repeat(
                  hg.headers,
                  (h) => h.id,
                  (h) => html`
                    <th @click=${h.column.getToggleSortingHandler()}>
                      ${h.isPlaceholder ? null : FlexRender({ header: h })}
                    </th>
                  `,
                )}
              </tr>
            `,
          )}
        </thead>
        <tbody>
          ${repeat(
            table.getRowModel().rows,
            (r) => r.id,
            (row) => html`
              <tr>
                ${repeat(
                  row.getAllCells(),
                  (c) => c.id,
                  (cell) => html` <td>${FlexRender({ cell })}</td> `,
                )}
              </tr>
            `,
          )}
        </tbody>
      </table>
    `
  }
}

```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/compose-with-tanstack-form/SKILL.md

Install the necessary packages for `@tanstack/solid-form` and `zod` for validation.

```bash
pnpm add @tanstack/solid-form zod
```

--------------------------------

### Commit Example Changes

Source: https://github.com/tanstack/table/blob/beta/CONTRIBUTING.md

Use this commit message format when adding a new example to the project.

```bash
docs: Add example-name
```

--------------------------------

### Install Dependencies and Linkages

Source: https://github.com/tanstack/table/blob/beta/CONTRIBUTING.md

Run this command to install project dependencies and set up linkages using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/react-table/skills/react/compose-with-tanstack-virtual/SKILL.md

Install the necessary packages for React Table and TanStack Virtual.

```bash
pnpm add @tanstack/react-table @tanstack/react-virtual
```

--------------------------------

### Install @tanstack/solid-virtual

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/compose-with-tanstack-virtual/SKILL.md

Install the necessary package for virtualization. This command is used with pnpm.

```bash
pnpm add @tanstack/solid-virtual
```

--------------------------------

### Install TanStack Table for Lit

Source: https://github.com/tanstack/table/blob/beta/docs/framework/lit/quick-start.md

Install the beta version of the @tanstack/lit-table adapter using npm.

```bash
npm install @tanstack/lit-table@beta
```

--------------------------------

### Install TanStack Table for SolidJS

Source: https://github.com/tanstack/table/blob/beta/docs/framework/solid/quick-start.md

Install the beta version of TanStack Table for SolidJS using npm.

```bash
npm install @tanstack/solid-table@beta
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/tanstack/table/blob/beta/examples/react/with-tanstack-form/README.md

Install the necessary project dependencies using pnpm.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Install @tanstack/react-store

Source: https://github.com/tanstack/table/blob/beta/packages/react-table/skills/react/compose-with-tanstack-store/SKILL.md

Install the @tanstack/react-store package using pnpm.

```bash
pnpm add @tanstack/react-store
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/vue-table/skills/vue/compose-with-tanstack-store/SKILL.md

Install the necessary packages for @tanstack/vue-table and @tanstack/vue-store.

```bash
pnpm add @tanstack/vue-table @tanstack/vue-store
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/vue-table/skills/vue/compose-with-tanstack-virtual/SKILL.md

Install the necessary packages for @tanstack/vue-table and @tanstack/vue-virtual using pnpm.

```bash
pnpm add @tanstack/vue-table @tanstack/vue-virtual
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/preact-table-devtools/skills/preact/compose-with-tanstack-devtools/SKILL.md

Install the necessary packages for TanStack Devtools and the Preact Table adapter.

```sh
pnpm add @tanstack/preact-devtools @tanstack/preact-table-devtools
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/vue-table/skills/vue/getting-started/SKILL.md

Install the core @tanstack/vue-table package and Vue. Optionally, install @tanstack/vue-store for external atoms or shared state.

```bash
pnpm add @tanstack/vue-table vue
# Optional: external atoms / shared state
pnpm add @tanstack/vue-store
```

--------------------------------

### Minimum Table Setup

Source: https://github.com/tanstack/table/blob/beta/packages/table-core/skills/setup/SKILL.md

Use `tableFeatures({})` for the most basic setup, including only the core read pipeline features.

```typescript
const features = tableFeatures({}) // core features only
const table = constructTable({
  features,
  columns,
  data,
})
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/tanstack/table/blob/beta/examples/preact/with-tanstack-form/README.md

Install the necessary dependencies for the project using pnpm.

```bash
pnpm install
```

--------------------------------

### Install @tanstack/svelte-pacer

Source: https://github.com/tanstack/table/blob/beta/packages/svelte-table/skills/svelte/compose-with-tanstack-pacer/SKILL.md

Install the necessary package for debouncing and throttling functionalities.

```bash
pnpm add @tanstack/svelte-pacer
```

--------------------------------

### Install @tanstack/solid-pacer

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/compose-with-tanstack-pacer/SKILL.md

Install the @tanstack/solid-pacer package using pnpm.

```bash
pnpm add @tanstack/solid-pacer
```

--------------------------------

### Install TanStack Table (Preact)

Source: https://github.com/tanstack/table/blob/beta/docs/framework/preact/quick-start.md

Install the beta version of TanStack Table for Preact using npm.

```bash
npm install @tanstack/preact-table@beta
```

--------------------------------

### Install TanStack Virtual Core

Source: https://github.com/tanstack/table/blob/beta/packages/preact-table/skills/preact/compose-with-tanstack-virtual/SKILL.md

Install the necessary package for row virtualization.

```bash
npm install @tanstack/virtual-core
```

--------------------------------

### Install TanStack Table (Beta)

Source: https://github.com/tanstack/table/blob/beta/docs/framework/vue/quick-start.md

Install the beta version of TanStack Table for Vue using npm.

```bash
npm install @tanstack/vue-table@beta
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/svelte-table/skills/svelte/compose-with-tanstack-form/SKILL.md

Install the necessary packages for TanStack Form and TanStack Svelte Table.

```bash
pnpm add @tanstack/svelte-form @tanstack/svelte-table
```

--------------------------------

### Install @tanstack/vue-table and @tanstack/pacer

Source: https://github.com/tanstack/table/blob/beta/packages/vue-table/skills/vue/compose-with-tanstack-pacer/SKILL.md

Install the necessary packages for @tanstack/vue-table and @tanstack/pacer using pnpm.

```bash
pnpm add @tanstack/vue-table @tanstack/pacer
```

--------------------------------

### Example Usage of column_getStart for Left Pinning

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/column_getStart.md

Demonstrates how to use the column_getStart function to get the starting offset for a column pinned to the left.

```typescript
const leftOffset = column_getStart(column, 'left')
```

--------------------------------

### Install TanStack Table (Beta)

Source: https://github.com/tanstack/table/blob/beta/docs/framework/svelte/quick-start.md

Install the beta version of TanStack Table for Svelte 5 using npm.

```bash
npm install @tanstack/svelte-table@beta
```

--------------------------------

### Preview Production Build

Source: https://github.com/tanstack/table/blob/beta/examples/preact/basic-use-table/README.md

Starts a local server to test the production build before deployment. Access the preview at http://localhost:4173/.

```bash
npm run preview
```

--------------------------------

### Full Migration Example: v8 vs v9 Table Configuration

Source: https://github.com/tanstack/table/blob/beta/docs/framework/angular/guide/migrating.md

Compares the configuration of a table in v8 with the equivalent setup in v9. Highlights the shift from separate `get*RowModel` functions and root options to integrated `tableFeatures` slots and factory functions.

```typescript
// v8
import {
  createAngularTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  filterFns,
  sortingFns,
} from '@tanstack/angular-table'

const v8Table = createAngularTable(() => ({
  columns,
  data: data(),
  getCoreRowModel: getCoreRowModel(), // used to be called "get*RowModel()"
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  filterFns, // used to be passed in as a root option
  sortingFns,
}))

// v9
import {
  injectTable,
  tableFeatures,
  columnFilteringFeature,
  rowSortingFeature,
  rowPaginationFeature,
  createFilteredRowModel,
  createSortedRowModel,
  createPaginatedRowModel,
  filterFns,
  sortFns,
} from '@tanstack/angular-table'

const features = tableFeatures({
  columnFilteringFeature,
  rowSortingFeature,
  rowPaginationFeature,
  filteredRowModel: createFilteredRowModel(),
  sortedRowModel: createSortedRowModel(),
  paginatedRowModel: createPaginatedRowModel(),
  filterFns,
  sortFns,
})

const v9Table = injectTable(() => ({
  features,
  columns,
  data: data(),
}))
```

--------------------------------

### Get Column Ordering Function

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getOrderColumnsFn.md

Example of how to use the table_getOrderColumnsFn to get the column ordering function for a given table instance.

```typescript
const orderColumnsForTable = table_getOrderColumnsFn(table)
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/table/blob/beta/packages/preact-table/skills/preact/compose-with-tanstack-form/SKILL.md

Install the necessary @tanstack/preact-form and @tanstack/preact-table packages. Ensure you have preact version 10 or higher as a peer dependency.

```bash
npm install @tanstack/preact-form @tanstack/preact-table
```

--------------------------------

### Example Usage of column_getToggleGroupingHandler

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/column_getToggleGroupingHandler.md

This example demonstrates how to use the column_getToggleGroupingHandler function to get a handler for toggling column grouping and assigning it to a variable.

```typescript
const onClick = column_getToggleGroupingHandler(column)
```

--------------------------------

### Get Header Start Offset

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/header_getStart.md

Computes a header's offset from the start of its header group. The offset is the previous sibling header's start plus size, or 0 for the first header in the group.

```typescript
function header_getStart<TFeatures, TData, TValue>(header): number;
```

```typescript
const offset = header_getStart(header)
```

--------------------------------

### Development Server

Source: https://github.com/tanstack/table/blob/beta/examples/preact/basic-use-table/README.md

Starts a development server for live previewing changes. Access the application at http://localhost:5173/.

```bash
npm run dev
```

--------------------------------

### Get Expanded Row Model

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getExpandedRowModel.md

This example demonstrates how to get the expanded row model using the table_getExpandedRowModel function. Ensure the table instance is available.

```typescript
function table_getExpandedRowModel<TFeatures, TData>(table): RowModel<TFeatures, TData>;

const expandedRows = table_getExpandedRowModel(table)
```

--------------------------------

### Get Default Pagination State

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/getDefaultPaginationState.md

Use this function to get the initial pagination state. The default state starts at page 1 with a page size of 10.

```typescript
function getDefaultPaginationState(): PaginationState;

```

```typescript
const pagination = getDefaultPaginationState()

```

--------------------------------

### Example Usage of row_getToggleExpandedHandler

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/row_getToggleExpandedHandler.md

This example demonstrates how to use the row_getToggleExpandedHandler function to get a click handler for toggling a row's expanded state. The handler is a no-op if the row cannot expand.

```typescript
const onClick = row_getToggleExpandedHandler(row)
```

--------------------------------

### Install Solid Devtools Adapter

Source: https://github.com/tanstack/table/blob/beta/docs/devtools.md

Install the TanStack Devtools host and the Solid table adapter. Use the `@beta` tag for v9.

```sh
npm install @tanstack/solid-devtools @tanstack/solid-table-devtools@beta
```

--------------------------------

### Get Paginated Row Model

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getPaginatedRowModel.md

This example shows how to get the paginated row model using the table instance. This is useful for accessing the rows that are currently displayed on the page after pagination has been applied.

```typescript
function table_getPaginatedRowModel<TFeatures, TData>(table): RowModel<TFeatures, TData>;
```

```typescript
const pageRows = table_getPaginatedRowModel(table)
```

--------------------------------

### Solid Table Meta Example

Source: https://github.com/tanstack/table/blob/beta/docs/guide/table-and-column-meta.md

Shows how to set up table meta functions in Solid and access them for data updates.

```typescript
const table = createTable({
  features,
  columns,
  get data() {
    return data()
  },
  meta: {
    updateData: (rowIndex, columnId, value) => {
      // ...
    },
  },
})

// ...later, anywhere the table is available (e.g. inside a cell component)
table.options.meta?.updateData(rowIndex, columnId, newValue)
```

--------------------------------

### Example Usage of table_getToggleAllRowsSelectedHandler

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md

Demonstrates how to use the table_getToggleAllRowsSelectedHandler function to get a handler for toggling all row selections.

```typescript
const onChange = table_getToggleAllRowsSelectedHandler(table)
```

--------------------------------

### Build Project

Source: https://github.com/tanstack/table/blob/beta/CONTRIBUTING.md

Run this command to build the project. This is typically done before testing in your own projects.

```bash
pnpm build
```

--------------------------------

### Install TanStack Table and Lit Virtual

Source: https://github.com/tanstack/table/blob/beta/packages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.md

Install the necessary packages for TanStack Table and its Lit virtualization adapter using npm.

```bash
npm install @tanstack/lit-table @tanstack/lit-virtual
```

--------------------------------

### Example Usage of table_getToggleAllPageRowsSelectedHandler

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md

Demonstrates how to use the table_getToggleAllPageRowsSelectedHandler function to get a handler for managing row selection on the current page.

```typescript
const onChange = table_getToggleAllPageRowsSelectedHandler(table)
```

--------------------------------

### Using injectTable

Source: https://github.com/tanstack/table/blob/beta/docs/framework/angular/reference/functions/injectTable.md

Example demonstrating how to use `injectTable` to create a table instance, including registering features, preparing columns, and providing data.

```APIDOC
## Example Usage

1.  **Register Table Features**:
    ```ts
    // Register only the features you need
    import { tableFeatures, rowPaginationFeature } from '@tanstack/angular-table';
    const features = tableFeatures({
      rowPaginationFeature,
      // ...all other features you need
    });

    // Or use all stock features
    import { stockFeatures } from '@tanstack/angular-table';
    const features = tableFeatures(stockFeatures);
    ```

2.  **Prepare Table Columns**:
    ```ts
    import { ColumnDef } from '@tanstack/angular-table';

    type MyData = {}; // Replace with your actual data type

    const columns: ColumnDef<typeof features, MyData>[] = [
      // ...column definitions
    ];

    // Or using createColumnHelper
    import { createColumnHelper } from '@tanstack/angular-table';
    const columnHelper = createColumnHelper<typeof features, MyData>();
    const columns = columnHelper.columns([
      columnHelper.accessor('someField', { header: 'Some Header' }),
      // ...other columns
    ]);
    ```

3.  **Create Table Instance with `injectTable`**:
    ```ts
    import { injectTable } from '@tanstack/angular-table';
    import { myDataSignal } from './my-data-signal'; // Assuming you have a signal for your data

    const table = injectTable(() => ({
      // ...table options,
      features,
      columns: columns,
      data: myDataSignal(), // Provide your data signal here
    }));
    ```
```

--------------------------------

### Subscribe Component Usage with Selector

Source: https://github.com/tanstack/table/blob/beta/docs/framework/react/reference/index/type-aliases/ReactTable.md

Example of using the Subscribe component with a selector to get a specific part of the table state.

```typescript
<table.Subscribe selector={(state) => state.globalFilter} >
  {(globalFilter) => <>
    Global Filter: {globalFilter}
  </>}
</table.Subscribe>
```

--------------------------------

### Get Visible Flat Columns

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/table_getVisibleFlatColumns.md

This example demonstrates how to use the table_getVisibleFlatColumns function to retrieve a list of all visible columns from a table instance.

```typescript
function table_getVisibleFlatColumns<TFeatures, TData>(table): Column<TFeatures, TData, unknown>[];
```

```typescript
const columns = table_getVisibleFlatColumns(table)
```

--------------------------------

### Solid Table Meta Setup

Source: https://github.com/tanstack/table/blob/beta/docs/guide/table-and-column-meta.md

Import and configure table features with meta helpers for Solid.

```typescript
import { metaHelper, rowSortingFeature, tableFeatures } from '@tanstack/solid-table'

const features = tableFeatures({
  rowSortingFeature,
  tableMeta: metaHelper<MyTableMeta>(),
  columnMeta: metaHelper<MyColumnMeta>(),
})
```

--------------------------------

### Custom Initial Table State

Source: https://github.com/tanstack/table/blob/beta/docs/framework/alpine/guide/table-state.md

Configure the starting values for table state slices using the `initialState` option during table creation. This is used for the initial setup and by reset APIs.

```typescript
const table = createTable({
  features,
  columns,
  get data() {
    return local.data
  },
  initialState: {
    sorting: [
      {
        id: 'age',
        desc: true,
      },
    ],
    pagination: {
      pageIndex: 0,
      pageSize: 25,
    },
  },
})
```

--------------------------------

### Using isTouchStartEvent to Check for Touch Events

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/isTouchStartEvent.md

An example demonstrating how to use the isTouchStartEvent function to determine if a given event is a touch start event. This is useful for conditional logic in touch-based interactions.

```typescript
const isTouch = isTouchStartEvent(event)
```

--------------------------------

### Install TanStack Virtual Adapter

Source: https://github.com/tanstack/table/blob/beta/docs/framework/solid/guide/virtualization.md

Install the Solid virtualizer adapter using npm. This package provides the `createVirtualizer` function for SolidJS.

```bash
npm install @tanstack/solid-virtual
```

--------------------------------

### Get Default Row Pinning State

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/getDefaultRowPinningState.md

This function creates the default row pinning state. Both pinning regions start empty. Reset APIs use this value when `defaultState` is `true`.

```typescript
function getDefaultRowPinningState(): RowPinningState;
```

```typescript
const pinning = getDefaultRowPinningState()
```

--------------------------------

### Incorrect Manual Pagination Setup

Source: https://github.com/tanstack/table/blob/beta/packages/table-core/skills/pagination/SKILL.md

This example shows the wrong way to set up manual pagination, leading to incorrect page counts and disabled navigation buttons because `rowCount` or `pageCount` is missing.

```tsx
// getPageCount() returns 1, next/prev buttons are disabled
const table = useTable({
  features: tableFeatures({ rowPaginationFeature }),
  data, // only 10 rows for the current page
  columns,
  manualPagination: true,
  state: { pagination },
  onPaginationChange: setPagination,
  // missing: rowCount or pageCount
})
```

--------------------------------

### Get Column Aggregation Function

Source: https://github.com/tanstack/table/blob/beta/docs/reference/static-functions/functions/column_getAggregationFn.md

This example demonstrates how to use the column_getAggregationFn to retrieve the aggregation function for a given column. This function is useful when you need to programmatically access or apply aggregation logic to column data.

```typescript
const aggregationFn = column_getAggregationFn(column)
```

--------------------------------

### Table Setup with Virtualization Features

Source: https://github.com/tanstack/table/blob/beta/docs/framework/solid/guide/virtualization.md

Set up your TanStack Table in SolidJS by importing and configuring necessary features and the `createVirtualizer` from `@tanstack/solid-virtual`. Note that `data` should be a getter for reactive inputs.

```tsx
import {
  columnSizingFeature,
  rowSortingFeature,
  createSortedRowModel,
  sortFns,
  tableFeatures,
  createTable,
} from '@tanstack/solid-table'
import { createVirtualizer } from '@tanstack/solid-virtual'

const features = tableFeatures({
  columnSizingFeature,
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
})

const table = createTable({
  features,
  columns,
  get data() {
    return data()
  },
})
```

--------------------------------

### Install Preact Devtools Adapter

Source: https://github.com/tanstack/table/blob/beta/docs/devtools.md

Install the TanStack Devtools host and the Preact table adapter. Use the `@beta` tag for v9.

```sh
npm install @tanstack/preact-devtools @tanstack/preact-table-devtools@beta
```

--------------------------------

### Add Sorting to React Table

Source: https://github.com/tanstack/table/blob/beta/packages/react-table/skills/react/getting-started/SKILL.md

Register the sorting feature and its row model factory, then wire a click handler to toggle sorting on table headers. This example shows the complete setup for basic sorting functionality.

```tsx
import {
  useTable,
  tableFeatures,
  rowSortingFeature,
  createSortedRowModel,
  sortFns,
  createColumnHelper,
} from '@tanstack/react-table'

const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
})
const columnHelper = createColumnHelper<typeof features, Person>()

const columns = columnHelper.columns([
  columnHelper.accessor('firstName', { header: 'First' }),
  columnHelper.accessor('age', { header: 'Age' }),
])

function App({ data }: { data: Person[] }) {
  const table = useTable({
    features,
    columns,
    data,
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((hg) => (
          <tr key={hg.id}>
            {hg.headers.map((h) => (
              <th key={h.id} onClick={h.column.getToggleSortingHandler()}>
                <table.FlexRender header={h} />
                {{ asc: ' 🔼', desc: ' 🔽'}[ 
                  h.column.getIsSorted() as string
                ] ?? null}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      {/* tbody same as above */}
    </table>
  )
}
```

--------------------------------

### Full Migration Example: React Table v8 vs v9

Source: https://github.com/tanstack/table/blob/beta/docs/framework/react/guide/migrating.md

Compares the setup for React Table v8 and v9, highlighting the shift of row model configurations and function registries from root options to the `tableFeatures` object in v9.

```tsx
// v8
import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  filterFns,
  sortingFns,
} from '@tanstack/react-table'

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(), // used to be called "get*RowModel()"
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  filterFns, // used to be passed in as a root option
  sortingFns,
})
```

```tsx
// v9
import {
  useTable,
  tableFeatures,
  columnFilteringFeature,
  rowSortingFeature,
  rowPaginationFeature,
  createFilteredRowModel,
  createSortedRowModel,
  createPaginatedRowModel,
  filterFns,
  sortFns,
} from '@tanstack/react-table'

const features = tableFeatures({
  columnFilteringFeature,
  rowSortingFeature,
  rowPaginationFeature,
  filteredRowModel: createFilteredRowModel(), // now called "create*RowModel()" on the features object
  sortedRowModel: createSortedRowModel(),
  paginatedRowModel: createPaginatedRowModel(),
  filterFns, // fns registries move to features too
  sortFns,
})

const table = useTable({
  features,
  columns,
  data,
})
```

--------------------------------

### Minimum Viable React Table v9 Setup

Source: https://github.com/tanstack/table/blob/beta/packages/react-table/skills/react/getting-started/SKILL.md

Demonstrates the essential setup for a v9 table, including initializing features, defining columns with the correct generics, and instantiating the useTable hook with data.

```tsx
import * as React from 'react'
import { useTable, tableFeatures } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

// 1. features — required option, even if empty.
const features = tableFeatures({})

// 2. Columns — defined at module scope for stable identity.
const columns: Array<ColumnDef<typeof features, Person>> = [
  {
    accessorKey: 'firstName',
    header: 'First Name',
    cell: (info) => info.getValue(),
  },
  { accessorKey: 'lastName', header: 'Last Name' },
  { accessorKey: 'age', header: 'Age' },
  { accessorKey: 'visits', header: 'Visits' },
  { accessorKey: 'status', header: 'Status' },
  { accessorKey: 'progress', header: 'Profile Progress' },
]

function App({ initialData }: { initialData: Person[] }) {
  const [data] = React.useState(() => initialData)

  // 3. Build the table — features is required; row model factories go on features when used.
  const table = useTable(
    {
      features,
      columns,
      data,
    },
    (state) => state, // default selector
  )

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((hg) => (
          <tr key={hg.id}>
            {hg.headers.map((h) => (
              <th key={h.id}>
                {h.isPlaceholder ? null : <table.FlexRender header={h} />}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getAllCells().map((cell) => (
              <td key={cell.id}>
                <table.FlexRender cell={cell} />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

```

--------------------------------

### Install @tanstack/vue-table v9

Source: https://github.com/tanstack/table/blob/beta/packages/vue-table/skills/vue/migrate-v8-to-v9/SKILL.md

Install the latest version of @tanstack/vue-table. Optionally, install @tanstack/vue-store for external atoms.

```bash
pnpm add @tanstack/vue-table@latest
# Optional, for external atoms during/after migration:
pnpm add @tanstack/vue-store
```

--------------------------------

### Install React Devtools Adapter

Source: https://github.com/tanstack/table/blob/beta/docs/devtools.md

Install the TanStack Devtools host and the React table adapter. Use the `@beta` tag for v9.

```sh
npm install @tanstack/react-devtools @tanstack/react-table-devtools@beta
```

--------------------------------

### Install TanStack Devtools and Solid Table Adapter

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table-devtools/skills/solid/compose-with-tanstack-devtools/SKILL.md

Install the necessary packages for TanStack Devtools host and the Solid Table adapter using pnpm.

```sh
pnpm add @tanstack/solid-devtools @tanstack/solid-table-devtools
```

--------------------------------

### Create and Render a Basic Solid Table

Source: https://github.com/tanstack/table/blob/beta/packages/solid-table/skills/solid/getting-started/SKILL.md

This snippet demonstrates the core process of creating a Solid Table instance with data and columns, and then rendering it into an HTML table structure. It utilizes `createTable` and `FlexRender` for dynamic rendering of headers and cells.

```tsx
import { createTable, FlexRender } from '@tanstack/solid-table'
import { For, createSignal } from 'solid-js'

function App() {
  const [data, setData] = createSignal<Array<Person>>([
    { firstName: 'tanner', lastName: 'linsley', age: 24 },
    { firstName: 'kevin', lastName: 'vandy', age: 12 },
  ])

  const table = createTable({
    features,
    columns,
    get data() {
      return data() // reactive getter
    },
  })

  return (
    <table>
      <thead>
        <For each={table.getHeaderGroups()}>{(hg) => (
          <tr>
            <For each={hg.headers}>{(header) => (
              <th>
                {header.isPlaceholder ? null : (
                  <FlexRender header={header} />
                )}
              </th>
            )}</For>
          </tr>
        )}</For>
      </thead>
      <tbody>
        <For each={table.getRowModel().rows}>{(row) => (
          <tr>
            <For each={row.getAllCells()}>{(cell) => (
              <td>
                <FlexRender cell={cell} />
              </td>
            )}</For>
          </tr>
        )}</For>
      </tbody>
    </table>
  )
}
```

--------------------------------

### Install Table Core Package

Source: https://github.com/tanstack/table/blob/beta/docs/installation.md

Install the core TanStack Table package if you need to build a custom adapter for an unsupported framework. Ensure you use the `@beta` tag as v9 is in beta.

```bash
npm install @tanstack/table-core@beta
```

```bash
yarn add @tanstack/table-core@beta
```

--------------------------------

### React Table Meta Setup

Source: https://github.com/tanstack/table/blob/beta/docs/guide/table-and-column-meta.md

Import and configure table features with meta helpers for React.

```typescript
import { metaHelper, rowSortingFeature, tableFeatures } from '@tanstack/react-table'

const features = tableFeatures({
  rowSortingFeature,
  tableMeta: metaHelper<MyTableMeta>(),
  columnMeta: metaHelper<MyColumnMeta>(),
})
```

--------------------------------

### Install TanStack Match Sorter Utils

Source: https://github.com/tanstack/table/blob/beta/docs/framework/alpine/guide/fuzzy-filtering.md

Install the `@tanstack/match-sorter-utils` library, which is a fork of `match-sorter` and is recommended for fuzzy filtering and sorting by rank with TanStack Table.

```bash
npm install @tanstack/match-sorter-utils
```

--------------------------------

### Install TanStack Pacer

Source: https://github.com/tanstack/table/blob/beta/packages/react-table/skills/react/compose-with-tanstack-pacer/SKILL.md

Install the TanStack Pacer package using pnpm.

```bash
pnpm add @tanstack/react-pacer
```

--------------------------------

### Column Ordering Setup

Source: https://github.com/tanstack/table/blob/beta/docs/framework/svelte/guide/column-ordering.md

Import and configure the column ordering feature when creating a table instance.

```typescript
import { createTable, tableFeatures, columnOrderingFeature } from '@tanstack/svelte-table'

const features = tableFeatures({ columnOrderingFeature })

const table = createTable({
  features,
  columns,
  get data() {
    return data
  },
})
```

--------------------------------

### Setup Column Resizing Features

Source: https://github.com/tanstack/table/blob/beta/docs/framework/alpine/guide/column-resizing.md

Import and configure column sizing and resizing features before creating the table. Ensure `columnSizingFeature` is added before `columnResizingFeature`.

```typescript
import {
  createTable,
  tableFeatures,
  columnSizingFeature,
  columnResizingFeature,
} from '@tanstack/alpine-table'

const features = tableFeatures({
  columnSizingFeature,
  columnResizingFeature,
})

const table = createTable({
  features,
  columns,
  get data() {
    return local.data
  },
})
```