TanStack Table

https://tanstack.com/table/latest/docs
Admin
TanStack Table is a headless UI library for building powerful data tables and grids with a focus on...
Tokens:303,553
Snippets:3,387
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getStart.md

Basic usage of column_getStart to retrieve the start offset of a column.

```ts
const startOffset = column_getStart(column, 'start')
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartFlatHeaders.md

Basic usage of the table_getStartFlatHeaders function to retrieve start pinned headers.

```ts
const headers = table_getStartFlatHeaders(table)
```

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

### Usage Example for column_getIsFirstColumn

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getIsFirstColumn.md

A basic example demonstrating how to check if a column is the first in the 'start' pinning position.

```ts
const isFirst = column_getIsFirstColumn(column, 'start')
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartLeafHeaders.md

Basic usage of the table_getStartLeafHeaders function to retrieve start pinned leaf headers.

```ts
const headers = table_getStartLeafHeaders(table)
```

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

### Install Devtools Adapters

Source: https://tanstack.com/table/latest/docs/devtools.md

Install the host devtools package and the corresponding table adapter for your specific framework.

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

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

```sh
npm install @tanstack/vue-devtools @tanstack/vue-table-devtools
```

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

```sh
npm install @tanstack/angular-devtools @tanstack/angular-table-devtools
```

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

### Usage Examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_syncExternalStateToBaseAtoms.md

Basic usage examples for synchronizing external state with the table instance.

```ts
table_syncExternalStateToBaseAtoms(table)
table_syncExternalStateToBaseAtoms(table, capturedState ?? null, shallow)
```

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

### Install TanStack Virtual

Source: https://tanstack.com/table/latest/docs/framework/react/guide/virtualization.md

Install the required React virtualizer adapter package.

```sh
npm install @tanstack/react-virtual
```

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

### Reset Pagination Usage Examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetPagination.md

Examples showing how to reset pagination using the initial state or a hardcoded default.

```ts
table_resetPagination(table)
table_resetPagination(table, true)
```

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

### Example Generated Skill Guidance Block

Source: https://tanstack.com/table/latest/docs/agent-skills.md

The markdown block injected into agent configuration files to guide the agent on skill discovery and loading.

```markdown
<!-- intent-skills:start -->

## Skill Loading

Before editing files for a substantial task:

- Run `npx @tanstack/intent@latest list` from the workspace root to see available local skills.
- If a listed skill matches the task, run `npx @tanstack/intent@latest load <package>#<skill>` before changing files.
- Use the loaded `SKILL.md` guidance while making the change.
- Monorepos: when working across packages, run the skill check from the workspace root and prefer the local skill for the package being changed.
- Multiple matches: prefer the most specific local skill for the package or concern you are changing; load additional skills only when the task spans multiple packages or concerns.

<!-- intent-skills:end -->
```

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

### Reset column sizing examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetColumnSizing.md

Usage examples for resetting column sizing with and without ignoring the initial state.

```ts
table_resetColumnSizing(table)
table_resetColumnSizing(table, true)
```

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

### Usage Example for table_getStartTotalSize

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartTotalSize.md

Basic usage of the function to retrieve the total size of the start pinned region.

```ts
const width = table_getStartTotalSize(table)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getPinnedVisibleLeafColumns.md

Retrieving visible leaf columns pinned to the start position.

```ts
const columns = table_getPinnedVisibleLeafColumns(table, 'start')
```

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

### Usage Example for table_getStartLeafColumns

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartLeafColumns.md

Basic usage of the function to retrieve pinned start columns from a table instance.

```ts
const columns = table_getStartLeafColumns(table)
```

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

### Toggle Column Visibility Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_toggleVisibility.md

Usage example showing how to toggle a column's visibility.

```ts
column_toggleVisibility(column)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/header_getResizeHandler.md

Basic implementation of the resize handler for a header.

```ts
const onMouseDown = header_getResizeHandler(header)
```

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

### getStartLeafColumns

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnPinning.md

Gets leaf columns pinned to the logical start region.

```ts
getStartLeafColumns: () => Column<TFeatures, TData, unknown>[];
```

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

### table_resetSorting usage examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetSorting.md

Examples showing how to reset sorting to the initial state or force a reset to an empty array.

```ts
table_resetSorting(table)
table_resetSorting(table, true)
```

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

### Row DnD Implementation with @dnd-kit

Source: https://tanstack.com/table/latest/docs/framework/react/examples/row-dnd

Initial setup for the Row DnD example, including imports for TanStack Table and @dnd-kit utilities.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
FlexRender,
columnSizingFeature,
createTableHook,
} from '@tanstack/react-table'
import {
DndContext,
KeyboardSensor,
MouseSensor,
TouchSensor,
closestCenter,
useSensor,
useSensors,
} from '@dnd-kit/core'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import {
SortableContext,
arrayMove,
useSortable,
verticalListSortingStrategy,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { makeData } from './makeData'
import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'
import type { CSSProperties } from 'react'
import type { Person } from './makeData'
import type { Row } from '@tanstack/react-table'
import './index.css'
  

const { appFeatures, useAppTable, createAppColumnHelper } = createTableHook({
features: { columnSizingFeature },
debugTable: true,
debugHeaders: true,
debugColumns: true,
```

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

### getStartLeafColumns()

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnPinning.md

Gets leaf columns pinned to the logical start region in pinning-state order.

```APIDOC
## getStartLeafColumns()

### Description
Gets leaf columns pinned to the logical start region in pinning-state order.

### Returns
- Column<TFeatures, TData, unknown>[]
```

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

### Install TanStack Table

Source: https://tanstack.com/table/latest/docs/framework/react/quick-start.md

Use npm to add the library to your project.

```bash
npm install @tanstack/react-table
```

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

### Install Skills in Mapping Mode

Source: https://tanstack.com/table/latest/docs/agent-skills.md

Initializes the agent configuration with explicit task-to-skill mappings based on installed packages.

```bash
npx @tanstack/intent@latest install --map
```

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

### getStart()

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Column_ColumnSizing.md

Measures the offset from the start of this column's region to its start edge.

```APIDOC
## getStart(position?)

### Description
Measures the offset from the start of this column's region to its start edge. The value is the sum of visible leaf column sizes before this column.

### Parameters
- **position** (ColumnPinningPosition | "center") - Optional - The pinned region to measure within.

### Returns
- **number** - The calculated offset.
```

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

### table_setPageSize Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setPageSize.md

An example demonstrating how to call table_setPageSize with an updater function.

```ts
table_setPageSize(table, (old) => old)
```

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

### Usage Example for table_getPinnedLeafColumns

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getPinnedLeafColumns.md

A basic example showing how to retrieve leaf columns for the 'center' pinning position.

```ts
const columns = table_getPinnedLeafColumns(table, 'center')
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setPagination.md

Demonstrates how to invoke the function with an updater that returns the current state.

```ts
table_setPagination(table, (old) => old)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getToggleAllColumnsVisibilityHandler.md

Basic implementation of the handler for a toggle control.

```ts
const onChange = table_getToggleAllColumnsVisibilityHandler(table)
```

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

### Material UI Integration Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/lib-material-ui

Initial imports and setup for using Material UI components with TanStack Table features.

```typescript
import * as React from 'react'
import ReactDOM from 'react-dom/client'
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
import SearchIcon from '@mui/icons-material/Search'
import {
Box,
Button,
Container,
CssBaseline,
InputAdornment,
Paper,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TablePagination,
TableRow,
TableSortLabel,
TextField,
ThemeProvider,
Typography,
createTheme,
} from '@mui/material'
import {
columnFilteringFeature,
createColumnHelper,
createFilteredRowModel,
createPaginatedRowModel,
createSortedRowModel,
filterFn_includesString,
globalFilteringFeature,
rowPaginationFeature,
rowSortingFeature,
sortFn_alphanumeric,
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getBottomRows.md

Basic implementation showing how to call the function with a table instance.

```ts
const rows = table_getBottomRows(table)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getToggleVisibilityHandler.md

Basic implementation of the handler for a column visibility toggle.

```ts
const onChange = column_getToggleVisibilityHandler(column)
```

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

### Usage Example for table_getIsAllPageRowsSelected

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getIsAllPageRowsSelected.md

Basic usage example showing how to call the function with a table instance.

```ts
const allPageRowsSelected = table_getIsAllPageRowsSelected(table)
```

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

### Initialize Basic Table Features

Source: https://tanstack.com/table/latest/docs/guide/row-models.md

Shows the minimal setup for a table using only core features.

```ts
import { tableFeatures, useTable } from '@tanstack/react-table'

const features = tableFeatures({}) // Core features only

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

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

### Get column offset start

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Column_ColumnSizing.md

Measures the offset from the start of the column's region to its start edge, optionally within a specific pinned region.

```ts
getStart: (position?) => number;
```

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

### Install TanStack Table React Adapter

Source: https://tanstack.com/table/latest/docs/agent-skills.md

Installs the React-specific adapter for TanStack Table, which includes the core library as a dependency.

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

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

### Initialize Virtualized Columns Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns-experimental

Imports and feature configuration required for enabling column virtualization and sorting in TanStack Table.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
FlexRender,
Subscribe,
columnResizingFeature,
columnSizingFeature,
createColumnHelper,
createSortedRowModel,
rowSortingFeature,
sortFn_alphanumeric,
sortFn_text,
useTable,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'
import { makeColumns, makeData } from './makeData'
import type {
Cell,
Header,
HeaderGroup,
ReactTable,
Row,
} from '@tanstack/react-table'
import type { Virtualizer } from '@tanstack/react-virtual'
import type { Person } from './makeData'
  

const features = {
columnResizingFeature,
columnSizingFeature,
rowSortingFeature,
rowSortingFeature,
sortedRowModel: createSortedRowModel(),
sortFns: {
alphanumeric: sortFn_alphanumeric,
text: sortFn_text,
},
```

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

### table_setColumnPinning Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setColumnPinning.md

Example of using table_setColumnPinning with an updater function to modify the start pinning state.

```ts
table_setColumnPinning(table, (old) => ({ ...old, start: ['select'] }))
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/row_getToggleExpandedHandler.md

Basic implementation of the toggle handler for a row.

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

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

### table_resetPageIndex Usage Examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetPageIndex.md

Examples showing how to reset the page index using the table instance, with and without forcing a reset to zero.

```ts
table_resetPageIndex(table)
table_resetPageIndex(table, true)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_selectAllCells.md

Basic usage of the table_selectAllCells function.

```ts
table_selectAllCells(table)
```

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

### Application Root Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink-chakra-ui

Initializes the React application with the Chakra provider and TanStack Devtools.

```jsx
function Root() {
  return (
    <ChakraExampleProvider>
      <App />
      <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />
    </ChakraExampleProvider>
  )
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>,
)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getToggleSortingHandler.md

Basic implementation of the toggle sorting handler on a column.

```ts
const onClick = column_getToggleSortingHandler(column)
```

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

### Initialize Agent Skill Guidance

Source: https://tanstack.com/table/latest/docs/agent-skills.md

Runs the intent CLI to generate skill-loading instructions in the project's agent configuration file.

```bash
npx @tanstack/intent@latest install
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md

Basic implementation of the handler for a checkbox control.

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

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

### Pinning a Column

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_pin.md

Example usage of the column_pin function to pin a column to the start position.

```ts
column_pin(column, 'start')
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_autoResetPageIndex.md

Basic invocation of the table_autoResetPageIndex function.

```ts
table_autoResetPageIndex(table)
```

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

### Initialize Virtualized Columns Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns

Imports and feature configuration required to set up a virtualized table in React.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
columnResizingFeature,
columnSizingFeature,
columnVisibilityFeature,
createColumnHelper,
createSortedRowModel,
rowSortingFeature,
sortFn_alphanumeric,
sortFn_text,
useTable,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'
import { makeColumns, makeData } from './makeData'
import type {
Cell,
Header,
HeaderGroup,
ReactTable,
Row,
} from '@tanstack/react-table'
import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'
import type { Person } from './makeData'
  

const features = {
columnResizingFeature,
columnSizingFeature,
columnVisibilityFeature,
rowSortingFeature,
sortedRowModel: createSortedRowModel(),
sortFns: {
alphanumeric: sortFn_alphanumeric,
text: sortFn_text,
},
```

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

### Initialize React Application

Source: https://tanstack.com/table/latest/docs/framework/react/examples/lib-chakra-ui

Mounts the application within a ChakraProvider.

```jsx
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <ChakraProvider value={defaultSystem}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)
```

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

### isTouchStartEvent Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/isTouchStartEvent.md

Demonstrates how to use the function to check if an event is a touch start event.

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

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

### Usage Example for cell_renderValue

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/cell_renderValue.md

Basic usage of the cell_renderValue function to get the rendered value of a cell.

```ts
const rendered = cell_renderValue(cell)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getToggleGroupingHandler.md

Basic usage of the handler to toggle column grouping.

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

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getPreExpandedRowModel.md

Basic usage of the function to retrieve rows before expansion.

```ts
const rowsBeforeExpansion = table_getPreExpandedRowModel(table)
```

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

### Usage Example for table_getStartFooterGroups

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartFooterGroups.md

Basic implementation showing how to call the function with a table instance.

```ts
const footerGroups = table_getStartFooterGroups(table)
```

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

### Get Start Total Size

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnSizing.md

Sums the current sizes of visible logical start-pinned leaf columns.

```ts
getStartTotalSize: () => number;
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_nextPage.md

Basic usage of the table_nextPage function to advance the table state.

```ts
table_nextPage(table)
```

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

### Root Application Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink-material-ui

Configures the Material UI ThemeProvider with CSS variables enabled and renders the application root.

```typescript
function Root() {
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
  const [mode, setMode] = React.useState<'light' | 'dark' | 'system'>('system')
  const resolvedMode =
    mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode
  const theme = React.useMemo(
    () =>
      createTheme({
        // Generate the `--mui-*` CSS variables that the sticky-pinning styles
        // reference; without this they resolve to nothing (transparent cells).
        cssVariables: true,
        palette: {
          mode: resolvedMode,
        },
      }),
    [resolvedMode],
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App mode={mode} setMode={setMode} />
    </ThemeProvider>
  )
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>,
)
```

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

### Define starts property

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/ColumnOffsets.md

Represents the offset from the start edge of the region to each column's start edge.

```ts
starts: Record<string, number>;
```

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

### column_toggleSorting Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_toggleSorting.md

An example of calling column_toggleSorting with multi-sorting enabled.

```ts
column_toggleSorting(column, undefined, true)
```

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

### Solid Table Implementation

Source: https://tanstack.com/table/latest/docs/overview.md

Demonstrates replacing a pre-built data grid with a custom table structure using the createTable hook in Solid.

```diff
- {/* Pass props into a pre-built component and hope you can style it */}
- <PrebuiltDataGrid
-   data={data()}
-   columns={columns}
-   theme={messyThemeOverrides}
-   sx={cssOverridesThatHopefullyWork}
-   positionPagination={"however-my-stakeholders-are-feeling-today"}
- />
+ // Build your own markup from the table instance's state and APIs
+ const table = createTable({ features, columns, get data() { return data() } })
+
+ return (
+   <table class="anything-you-want">
+     <thead>
+       {/* need to really customize the functionality in your headers? no problem! */}
+       <For each={table.getHeaderGroups()}>{(headerGroup) => ( ... )}</For>
+     </thead>
+     <tbody>
+       {/* want to add virtualization here? no problem! */}
+       <For each={table.getRowModel().rows}>{(row) => ( ... )}</For>
+     </tbody>
+   </table>
+ )
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/cell_getSelectionStartHandler.md

Example of using the handler within a table cell component.

```tsx
<td onMouseDown={cell.getSelectionStartHandler()} />
```

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

### Setup Column Resizing Features

Source: https://tanstack.com/table/latest/docs/framework/react/guide/column-resizing.md

Initialize the table with columnSizingFeature and columnResizingFeature to enable resizing capabilities.

```tsx
import {
  useTable,
  tableFeatures,
  columnSizingFeature,
  columnResizingFeature,
} from '@tanstack/react-table'

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

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

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

### header_getStart Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/header_getStart.md

Basic usage of the header_getStart function to retrieve a header's offset.

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

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

### Retrieve start leaf headers

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnPinning.md

Returns an array of leaf headers for columns pinned to the start.

```ts
getStartLeafHeaders: () => Header<TFeatures, TData, unknown>[];
```

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

### Define start pinning property

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/ColumnPinningState.md

Represents the array of column IDs pinned to the start of the table.

```ts
start: string[];
```

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

### Usage Examples for table_resetPageSize

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetPageSize.md

Demonstrates how to call the function with and without the default state override.

```ts
table_resetPageSize(table)
table_resetPageSize(table, true)
```

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

### table_setPageIndex usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setPageIndex.md

A basic example of calling table_setPageIndex with a table instance and an updater function.

```ts
table_setPageIndex(table, (old) => old)
```

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

### table_setColumnFilters Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setColumnFilters.md

Example demonstrating how to update column filters by removing a specific filter.

```ts
table_setColumnFilters(table, (old) => old.filter((filter) => filter.id !== 'age'))
```

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

### Initialize React Application with Mantine

Source: https://tanstack.com/table/latest/docs/framework/react/examples/lib-mantine

Mounts the application to the DOM and wraps it in a MantineProvider.

```jsx
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <MantineProvider forceColorScheme="light">
      <App />
    </MantineProvider>
  </React.StrictMode>,
)
```

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

### Initialize React Application

Source: https://tanstack.com/table/latest/docs/framework/react/examples/with-tanstack-router

The main entry point for the React application, rendering the App component into the DOM.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getCenterHeaderGroups.md

Basic implementation showing how to call the function to retrieve center header groups.

```ts
const headerGroups = table_getCenterHeaderGroups(table)
```

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

### Example Usage of row_getParentRow

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/row_getParentRow.md

Basic usage example showing how to retrieve the parent of a row object.

```ts
const parent = row_getParentRow(row)
```

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

### Virtualized Rows Experimental Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-rows-experimental

Initializes the table features and imports necessary dependencies for virtualized row rendering.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
FlexRender,
columnSizingFeature,
createColumnHelper,
createSortedRowModel,
rowSortingFeature,
sortFn_alphanumeric,
sortFn_datetime,
sortFn_text,
useTable,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'
import { makeData } from './makeData'
import type { ReactTable, Row } from '@tanstack/react-table'
import type { Virtualizer } from '@tanstack/react-virtual'
import type { Person } from './makeData'
import './index.css'
  

const features = {
columnSizingFeature,
rowSortingFeature,
sortedRowModel: createSortedRowModel(),
sortFns: {
alphanumeric: sortFn_alphanumeric,
datetime: sortFn_datetime,
text: sortFn_text,
},
}
  

const columnHelper = createColumnHelper<typeof features, Person>()
// This is a dynamic row height example, which is more complicated, but allows for a more realistic table.
// See https://tanstack.com/virtual/v3/docs/examples/react/table for a simpler fixed row height example.
function App() {
const columns = React.useMemo(
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/cell_getSelectionExtendHandler.md

Example of using the handler within a table cell's onMouseEnter event.

```tsx
<td onMouseEnter={cell.getSelectionExtendHandler()} />
```

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

### Initialize Table with Features

Source: https://tanstack.com/table/latest/docs/framework/react/guide/virtualization.md

Configure the table instance using standard TanStack Table features before integrating with the virtualizer.

```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,
})
```

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

### Initialize React Application

Source: https://tanstack.com/table/latest/docs/framework/react/examples/basic-use-legacy-table

Standard entry point for rendering the React application with strict mode and devtools.

```tsx
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
    <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />
  </React.StrictMode>,
)
```

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

### table_setSorting usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setSorting.md

An example of using a functional updater to append a new sorting criterion to the existing state.

```ts
table_setSorting(table, (old) => [...old, { id: 'age', desc: true }])
```

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

### table_setGrouping Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_setGrouping.md

An example of using a functional updater to append a new column to the existing grouping state.

```ts
table_setGrouping(table, (old) => [...old, 'status'])
```

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

### Usage Examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetHeaderSizeInfo.md

Demonstrates resetting to the initial state versus forcing a reset to the default no-drag state.

```ts
table_resetHeaderSizeInfo(table)
table_resetHeaderSizeInfo(table, true)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/getDefaultColumnSizingColumnDef.md

Basic usage of the function to retrieve default column sizing settings.

```ts
const defaults = getDefaultColumnSizingColumnDef()
```

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

### Initialize TanStack Table with Query

Source: https://tanstack.com/table/latest/docs/framework/react/examples/with-tanstack-query

Setup the QueryClient and import necessary features for integrating TanStack Table with TanStack Query.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import {
QueryClient,
QueryClientProvider,
keepPreviousData,
useInfiniteQuery,
useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import {
columnFilteringFeature,
createColumnHelper,
globalFilteringFeature,
rowPaginationFeature,
rowSortingFeature,
tableFeatures,
useTable,
} from '@tanstack/react-table'
import {
tableDevtoolsPlugin,
useTanStackTableDevtools,
} from '@tanstack/react-table-devtools'
import { fetchData, fetchInfiniteData } from './fetchData'
import './index.css'
import type {
PaginationState,
ReactTable,
SortingState,
} from '@tanstack/react-table'
import type { Person } from './fetchData'
  

const queryClient = new QueryClient()
const defaultData: Array<Person> = []
```

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

### Retrieve visible start leaf columns

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnPinning.md

Returns an array of visible leaf columns currently in the start pinned region.

```ts
getStartVisibleLeafColumns: () => Column<TFeatures, TData, unknown>[];
```

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

### Usage Examples for table_resetExpanded

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetExpanded.md

Examples showing how to reset the expanded state using the initial state or by forcing an empty state.

```ts
table_resetExpanded(table)
table_resetExpanded(table, true)
```

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

### Using createColumnHelper to define columns

Source: https://tanstack.com/table/latest/docs/reference/index/functions/createColumnHelper.md

Demonstrates initializing a column helper and using its methods to define display and accessor columns.

```tsx
const helper = createColumnHelper<typeof features, Person>() // features is the result of `tableFeatures({})` helper
const columns = [
 helper.display({ id: 'actions', header: 'Actions' }),
 helper.accessor('firstName', {}),
 helper.accessor((row) => row.lastName, { id: 'lastName' }),
]
```

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

### Usage Example for table_getSelectedRowIds

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getSelectedRowIds.md

A basic example demonstrating how to call the function with a table instance to obtain selected row IDs.

```ts
const selectedRowIds = table_getSelectedRowIds(table)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md

Basic implementation of the handler to create an onChange event for a select-all checkbox.

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

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

### Row Selection State Examples

Source: https://tanstack.com/table/latest/docs/framework/react/guide/row-selection.md

Examples of how row selection state is structured with custom IDs versus default indices.

```json
{
  "13e79140-62a8-4f9c-b087-5da737903b76": true,
  "f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
  //...
}
```

```json
{
  "0": true,
  "1": false
  //...
}
```

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

### Implementing Pagination Controls in React

Source: https://tanstack.com/table/latest/docs/framework/react/guide/pagination.md

Example usage of navigation buttons and page size selection using table instance methods.

```tsx
<Button
  onClick={() => table.firstPage()}
  disabled={!table.getCanPreviousPage()}
>
  {'<<'}
</Button>
<Button
  onClick={() => table.previousPage()}
  disabled={!table.getCanPreviousPage()}
>
  {'<'}
</Button>
<Button
  onClick={() => table.nextPage()}
  disabled={!table.getCanNextPage()}
>
  {'>'}
</Button>
<Button
  onClick={() => table.lastPage()}
  disabled={!table.getCanLastPage()}
>
  {'>>'}
</Button>
<select
  value={table.state.pagination.pageSize}
  onChange={e => {
    table.setPageSize(Number(e.target.value))
  }}
>
  {[10, 20, 30, 40, 50].map(pageSize => (
    <option key={pageSize} value={pageSize}>
      {pageSize}
    </option>
  ))}
</select>
```

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

### Page-Index Pagination with useQuery

Source: https://tanstack.com/table/latest/docs/guide/client-side-vs-server-side.md

Demonstrates how to integrate TanStack Table with TanStack Query to handle server-side filtering, sorting, and pagination by setting manual flags.

```tsx
const features = tableFeatures({
  columnFilteringFeature,
  globalFilteringFeature,
  rowPaginationFeature,
  rowSortingFeature,
  // Client-side filtering, sorting, and pagination row models are not
  // required because those operations are handled manually on the server.
  // Omitting the filtered and sorted row models also omits their page-reset
  // hooks, so pagination is reset in the change handlers below.
})

const [sorting, setSorting] = useState<SortingState>([])
const [globalFilter, setGlobalFilter] = useState('')
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
})

const dataQuery = useQuery({
  queryKey: ['people', { sorting, globalFilter, pagination }],
  queryFn: () => fetchPeople({ sorting, globalFilter, pagination }),
  placeholderData: keepPreviousData,
})

const table = useTable(
  {
    features,
    columns,
    data: dataQuery.data?.rows ?? [],
    rowCount: dataQuery.data?.rowCount,
    state: { sorting, globalFilter, pagination },
    onSortingChange: (updater) => {
      setSorting(updater)
      setPagination((previous) => ({ ...previous, pageIndex: 0 })) // reset page index when sorting changes
    },
    onGlobalFilterChange: (updater) => {
      setGlobalFilter(updater)
      setPagination((previous) => ({ ...previous, pageIndex: 0 })) // reset page index when global filter changes
    },
    onPaginationChange: setPagination,
    manualFiltering: true,
    manualSorting: true,
    manualPagination: true,
  },
  (state) => state,
)
```

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

### Virtualized Infinite Scrolling Setup

Source: https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling

Initializes the necessary imports and feature configuration for a virtualized table with infinite scrolling capabilities.

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
  

// 3 TanStack Libraries!!!
import {
columnSizingFeature,
createColumnHelper,
createSortedRowModel,
rowSortingFeature,
sortFn_alphanumeric,
sortFn_datetime,
sortFn_text,
tableFeatures,
useTable,
} from '@tanstack/react-table'
import {
QueryClient,
QueryClientProvider,
keepPreviousData,
useInfiniteQuery,
} from '@tanstack/react-query'
import { useVirtualizer } from '@tanstack/react-virtual'
import { fetchData } from './makeData'
import type { Person, PersonApiResponse } from './makeData'
import type { OnChangeFn, SortingState } from '@tanstack/react-table'
  

const fetchSize = 50
  

const features = tableFeatures({
columnSizingFeature,
rowSortingFeature,
sortedRowModel: createSortedRowModel(),
sortFns: {
alphanumeric: sortFn_alphanumeric,
datetime: sortFn_datetime,
```

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

### Setup Column Sizing Feature

Source: https://tanstack.com/table/latest/docs/framework/react/guide/column-sizing.md

Initialize the table with the columnSizingFeature to enable sizing APIs.

```tsx
import {
  useTable,
  tableFeatures,
  columnSizingFeature,
} from '@tanstack/react-table'

const features = tableFeatures({ columnSizingFeature })

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

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

### table_getStartTotalSize(table)

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartTotalSize.md

Calculates the sum of the rendered size of the logical start pinned header region. Returns 0 if the start pinning region is empty.

```APIDOC
## table_getStartTotalSize

### Signature
`function table_getStartTotalSize<TFeatures, TData>(table: Table_Internal<TFeatures, TData>): number`

### Description
Sums the rendered size of the logical start pinned header region. If the start pinning region is empty, it returns 0.

### Parameters
- **table** (Table_Internal<TFeatures, TData>) - The table instance to calculate the size for.

### Returns
- **number** - The total size of the start pinned header region.

### Example
```ts
const width = table_getStartTotalSize(table)
```
```

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

### row_getStartVisibleCells<TFeatures, TData>(row)

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/row_getStartVisibleCells.md

Collects visible cells for columns pinned to the start region. Cells are returned in state.columnPinning.start order and are marked with cell.position = 'start'.

```APIDOC
## row_getStartVisibleCells

### Signature
`function row_getStartVisibleCells<TFeatures, TData>(row): Cell<TFeatures, TData, unknown>[]`

### Description
Collects visible cells for columns pinned to the start region. Cells are returned in `state.columnPinning.start` order and are marked with `cell.position = 'start'`.

### Parameters
- **row** (Row<TFeatures, TData>) - The row object to extract pinned cells from.

### Returns
- **Cell<TFeatures, TData, unknown>[]** - An array of visible cells pinned to the start.

### Example
```ts
const startCells = row_getStartVisibleCells(row)
```
```

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

### Reset Grouping Examples

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_resetGrouping.md

Demonstrates resetting to the initial state versus forcing a reset to an empty array.

```ts
table_resetGrouping(table)
table_resetGrouping(table, true)
```

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

### Initialize Table in Solid

Source: https://tanstack.com/table/latest/docs/guide/tables.md

Initialization pattern for Solid using createTable with a reactive data getter.

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

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_clearSorting.md

Basic usage of the column_clearSorting function.

```ts
column_clearSorting(column)
```

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

### Initialize Data Array

Source: https://tanstack.com/table/latest/docs/guide/data.md

Examples of initializing the data array with stable references.

```ts
//note: data needs a "stable" reference to prevent wasteful re-computation (more on this below)
const data: Array<User> = []
//or
const [data, setData] = React.useState<Array<User>>([])
//or
const data = ref<Array<User>>([]) //vue
//etc...
```

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

### Initialize Table in Vanilla JS

Source: https://tanstack.com/table/latest/docs/guide/tables.md

Initialization pattern for vanilla JavaScript using constructTable.

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

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/cell_getContext.md

Basic usage of the cell_getContext function.

```ts
const context = cell_getContext(cell)
```

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

### getCanResize()

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Column_ColumnResizing.md

Checks whether this column can start a resize interaction.

```APIDOC
## getCanResize()

### Description
Checks whether this column can start a resize interaction.

### Returns
- **boolean** - Returns true if the column can be resized, otherwise false.
```

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

### Setup Expanding Features

Source: https://tanstack.com/table/latest/docs/framework/react/guide/expanding.md

Initializes the table with row expanding features and the expanded row model.

```tsx
import {
  useTable,
  tableFeatures,
  rowExpandingFeature,
  createExpandedRowModel,
} from '@tanstack/react-table'

const features = tableFeatures({
  rowExpandingFeature,
  expandedRowModel: createExpandedRowModel(), // if using client-side expanding
  // manualExpanding: true, // if using manual server-side expanding
})

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

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

### Implement useLegacyTable in React

Source: https://tanstack.com/table/latest/docs/framework/react/guide/use-legacy-table.md

Demonstrates the setup of a table using the legacy compatibility layer, including column definitions, state management, and rendering logic.

```tsx
import { useState } from 'react'
import { flexRender } from '@tanstack/react-table'
import {
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  legacyCreateColumnHelper,
  useLegacyTable,
} from '@tanstack/react-table/legacy'
import type {
  ColumnFiltersState,
  PaginationState,
  SortingState,
} from '@tanstack/react-table'
import type {
  LegacyColumn,
  LegacyColumnDef,
  LegacyRow,
} from '@tanstack/react-table/legacy'

interface Person {
  name: string
  email: string
  age: number
}

const columnHelper = legacyCreateColumnHelper<Person>()

const columns: LegacyColumnDef<Person>[] = [
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
  columnHelper.accessor('age', { header: 'Age' }),
  columnHelper.display({ id: 'actions', header: 'Actions' }),
]

function MyTable({ data }: { data: Person[] }) {
  const [sorting, setSorting] = useState<SortingState>([])
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  })

  // useLegacyTable accepts the v8-style API
  const table = useLegacyTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state: { sorting, columnFilters, pagination },
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onPaginationChange: setPagination,
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {flexRender(
                  header.column.columnDef.header,
                  header.getContext(),
                )}
                {header.column.getCanFilter() ? (
                  <Filter column={header.column} />
                ) : null}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getAllCells().map((cell) => (
              <td key={cell.id}>
                {cell.column.id === 'actions' ? (
                  <RowActions row={row} />
                ) : (
                  flexRender(cell.column.columnDef.cell, cell.getContext())
                )}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

function Filter({ column }: { column: LegacyColumn<Person> }) {
  return (
    <input
      value={(column.getFilterValue() as string) ?? ''}
      onChange={(e) => column.setFilterValue(e.target.value)}
      placeholder="Filter..."
    />
  )
}

function RowActions({ row }: { row: LegacyRow<Person> }) {
  return <button onClick={() => console.log(row.original)}>Edit</button>
}
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getPreSortedRowModel.md

Retrieving the row model before sorting is applied.

```ts
const rowsBeforeSorting = table_getPreSortedRowModel(table)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getStartVisibleLeafColumns.md

Basic usage of the function to retrieve start-pinned visible leaf columns.

```ts
const columns = table_getStartVisibleLeafColumns(table)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getPreGroupedRowModel.md

Retrieving the row model before grouping is applied.

```ts
const rowsBeforeGrouping = table_getPreGroupedRowModel(table)
```

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

### getStartFlatHeaders()

Source: https://tanstack.com/table/latest/docs/reference/index/interfaces/Table_ColumnPinning.md

Builds flat logical start-region headers for pinned columns, including parent headers.

```APIDOC
## getStartFlatHeaders()

### Description
Builds flat logical start-region headers for pinned columns, including parent headers.

### Returns
- Header<TFeatures, TData, unknown>[]
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getGlobalAutoFilterFn.md

Retrieves the default global filter function.

```ts
const filterFn = table_getGlobalAutoFilterFn()
```

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

### table_getColumnIndexes usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getColumnIndexes.md

Basic usage of the table_getColumnIndexes function.

```ts
const indexes = table_getColumnIndexes(table)
```

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

### Configuring the column virtualizer

Source: https://tanstack.com/table/latest/docs/framework/react/guide/virtualization.md

Set up the column virtualizer with horizontal configuration and column-specific size estimation.

```tsx
const columnVirtualizer = useVirtualizer({
  count: visibleColumns.length,
  estimateSize: (index) => visibleColumns[index].getSize(),
  getScrollElement: () => tableContainerRef.current,
  horizontal: true,
  overscan: 3,
})
```

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

### Chakra Example Provider

Source: https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink-chakra-ui

Wraps the application with ChakraProvider and ThemeProvider for theme management.

```tsx
function ChakraExampleProvider({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ThemeProvider
        attribute="class"
        defaultTheme="system"
        enableSystem
        disableTransitionOnChange
      >
        {children}
      </ThemeProvider>
    </ChakraProvider>
  )
}
```

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

### row_getToggleSelectedHandler Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/row_getToggleSelectedHandler.md

Basic implementation of the handler for a row.

```ts
const onChange = row_getToggleSelectedHandler(row)
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_getCellSelectionColumnIds.md

Retrieving the column IDs from a table instance.

```ts
const columnIds = table_getCellSelectionColumnIds(table)
```

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

### table_autoResetSorting Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_autoResetSorting.md

Basic usage of the table_autoResetSorting function.

```ts
table_autoResetSorting(table)
```

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

### Implement Page-Index Pagination with useQuery

Source: https://tanstack.com/table/latest/docs/framework/react/guide/pagination.md

Uses a query key containing pagination state to fetch data and sets manual pagination flags in the table configuration.

```tsx
const dataQuery = useQuery({
  queryKey: ['people', 'offset', pagination, sorting, globalFilter],
  queryFn: () => fetchPeople({ pagination, sorting, globalFilter }),
  placeholderData: keepPreviousData,
})

const table = useTable(
  {
    features,
    columns,
    data: dataQuery.data?.rows ?? [],
    rowCount: dataQuery.data?.rowCount,
    state: { pagination, sorting, globalFilter },
    onPaginationChange: setPagination,
    manualPagination: true,
    manualSorting: true,
    manualFiltering: true,
  },
  (state) => state,
)
```

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

### Usage Example for table_autoResetExpanded

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/table_autoResetExpanded.md

Basic usage of the table_autoResetExpanded function.

```ts
table_autoResetExpanded(table)
```

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

### Initialize a table with useAppTable

Source: https://tanstack.com/table/latest/docs/framework/react/guide/composable-tables.md

Initializes a table instance by providing configuration options and a state selector.

```tsx
const table = useAppTable(
  {
    key: 'users-table',
    columns,
    data,
    debugTable: true,
  },
  (state) => state,
)
```

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

### Configure Table CSS for Virtualization

Source: https://tanstack.com/table/latest/docs/framework/react/guide/virtualization.md

Apply grid and flexbox layouts to support virtual positioning and sticky headers.

```css
table {
  display: grid;
}

thead {
  display: grid;
  position: sticky;
  top: 0;
}

tr {
  display: flex;
}
```

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

### Usage Example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/column_getAutoSortDir.md

Basic usage of the column_getAutoSortDir function to retrieve the sort direction.

```ts
const direction = column_getAutoSortDir(column)
```

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

### getDefaultSortingState usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/getDefaultSortingState.md

Basic usage of the getDefaultSortingState function.

```ts
const sorting = getDefaultSortingState()
```

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

### Compare Pre-built Widgets vs TanStack Table Construction

Source: https://tanstack.com/table/latest/docs/overview.md

Contrast the approach of configuring a pre-built widget with the TanStack Table method of constructing a table instance and manually rendering markup.

```diff
- // Configure a pre-built widget and hope you can style it
- new PrebuiltDataGrid('#my-table', {
-   data,
-   columns,
-   theme: messyThemeOverrides,
-   positionPagination: 'however-my-stakeholders-are-feeling-today',
- })
+ // Build your own markup from the table instance's state and APIs
+ const table = constructTable({ features, columns, data })
+
+ // render however you like: DOM APIs, innerHTML, or your own template system
+ table.getHeaderGroups().forEach((headerGroup) => { ... })
+ table.getRowModel().rows.forEach((row) => { ... })
```

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

### getDefaultGroupingState usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/getDefaultGroupingState.md

Basic usage of the getDefaultGroupingState function.

```ts
const grouping = getDefaultGroupingState()
```

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

### Import Production Devtools

Source: https://tanstack.com/table/latest/docs/devtools.md

Use the production entrypoint to include devtools in production builds.

```tsx
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/react-table-devtools/production'
```

```tsx
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/preact-table-devtools/production'
```

```tsx
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/vue-table-devtools/production'
```

```tsx
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/solid-table-devtools/production'
```

```ts
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools/production'
```

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

### getDefaultColumnSizingState usage example

Source: https://tanstack.com/table/latest/docs/reference/static-functions/functions/getDefaultColumnSizingState.md

Basic usage of the getDefaultColumnSizingState function.

```ts
const sizing = getDefaultColumnSizingState()
```
Tokens:
Raw