### Example: Implementing `getFilteredRowModel`

Source: https://tanstack.com/table/latest/docs/api/features/column-filtering.md

An example demonstrating how to import and use the `getFilteredRowModel` function when configuring the table.

```typescript
import { getFilteredRowModel } from '@tanstack/[adapter]-table'


  getFilteredRowModel: getFilteredRowModel(),
})
```

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

### Column API: getStart

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Calculates the starting offset of a column, useful for positioning.

```typescript
getStart: (position?: ColumnPinningPosition) => number
```

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

### Example: Using getFilteredRowModel

Source: https://tanstack.com/table/latest/docs/api/features/global-filtering.md

Demonstrates how to import and use the `getFilteredRowModel` function when configuring the table.

```typescript
import { getFilteredRowModel } from '@tanstack/[adapter]-table'

  getFilteredRowModel: getFilteredRowModel(),
})
```

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

### Header API

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Methods available on header instances to get sizing information and a handler for resizing.

```APIDOC
## Header API

### `getSize`

```tsx
getSize: () => number
```

Returns the size for the header, calculated by summing the size of all leaf-columns that belong to it.

### `getStart`

```tsx
getStart: (position?: ColumnPinningPosition) => number
```

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers.

### `getResizeHandler`

```tsx
getResizeHandler: () => (event: unknown) => void
```

Returns an event handler function that can be used to resize the header. It can be used as an:

- `onMouseDown` handler
- `onTouchStart` handler

The dragging and release events are automatically handled for you.
```

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

### Rendering Cell Content with flexRender

Source: https://tanstack.com/table/latest/docs/api/core/cell.md

Example of using the flexRender utility with the cell's context to render its content.

```typescript
flexRender(cell.column.columnDef.cell, cell.getContext())
```

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

### Render Header using flexRender

Source: https://tanstack.com/table/latest/docs/api/core/header.md

Example of using the getContext method with flexRender to render a header using its defined template.

```typescript
flexRender(header.column.columnDef.header, header.getContext())
```

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

### Fuzzy Filtering and Sorting Example

Source: https://tanstack.com/table/latest/docs/api/features/global-filtering.md

Demonstrates how to implement fuzzy filtering and sorting using match-sorter utilities. This allows for ranking items during filtering, which can then be used for sorting.

```typescript
import { sortingFns } from '@tanstack/[adapter]-table'

import { rankItem, compareItems } from '@tanstack/match-sorter-utils'

const fuzzyFilter = (row, columnId, value, addMeta) => {
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the ranking info
  addMeta(itemRank)

  // Return if the item should be filtered in/out
  return itemRank.passed
}

const fuzzySort = (rowA, rowB, columnId) => {
  let dir = 0

  // Only sort by rank if the column has ranking information
  if (rowA.columnFiltersMeta[columnId]) {
    dir = compareItems(
      rowA.columnFiltersMeta[columnId]!,
      rowB.columnFiltersMeta[columnId]!
    )
  }

  // Provide an alphanumeric fallback for when the item ranks are equal
  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
}
```

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

### Preventing Infinite Loops: Memoizing Data Transformations

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

This example demonstrates the correct approach to handle data transformations by memoizing them with `useMemo`. This ensures a stable reference for the transformed data, preventing infinite re-renders when passed to `useReactTable`.

```javascript
export default function MyComponent() {
  //✅ GOOD
  const columns = useMemo(() => [
    // ...
  ], []);

  //✅ GOOD
  const { data, isLoading } = useQuery({
    //...
  });

  //✅ GOOD: This will not cause an infinite loop of re-renders because `filteredData` is memoized
  const filteredData = useMemo(() => data?.filter(d => d.isActive) ?? [], [data]);

  const table = useReactTable({
    columns,
    data: filteredData, // stable reference!
  });

  return <table>...</table>;
}
```

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

### Get All Columns

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Returns all columns in their normalized and nested hierarchy, mirroring the column definitions provided to the table.

```typescript
type getAllColumns = () => Column<TData>[]
```

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

### Get Pagination Row Model Function

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns the row model after pagination has been applied. Pagination columns are reordered to the start by default.

```typescript
getPaginationRowModel?: (table: Table<TData>) => () => RowModel<TData>
```

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

### Column API

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Methods available on individual column instances to get information about their sizing and resizing state.

```APIDOC
## Column API

### `getSize`

```tsx
getSize: () => number
```

Returns the current size of the column

### `getStart`

```tsx
getStart: (position?: ColumnPinningPosition) => number
```

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all preceding columns.

Useful for sticky or absolute positioning of columns. (e.g. `left` or `transform`)

### `getAfter`

```tsx
getAfter: (position?: ColumnPinningPosition) => number
```

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all succeeding columns.

Useful for sticky or absolute positioning of columns. (e.g. `right` or `transform`)

### `getCanResize`

```tsx
getCanResize: () => boolean
```

Returns `true` if the column can be resized.

### `getIsResizing`

```tsx
getIsResizing: () => boolean
```

Returns `true` if the column is currently being resized.

### `resetSize`

```tsx
resetSize: () => void
```

Resets the column size to its initial size.
```

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

### Get Page Options API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns an array of available page numbers (zero-indexed) based on the current page size.

```typescript
getPageOptions: () => number[]
```

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

### Get First Sort Direction

Source: https://tanstack.com/table/latest/docs/api/features/sorting.md

Use `getFirstSortDir()` to find out the initial sort direction that will be applied to a column.

```typescript
getFirstSortDir: () => SortDirection
```

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

### Infinite Loop: New Columns/Data on Every Render

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

This example demonstrates how redefining `columns` and `data` as new arrays on every render within a React component leads to an infinite re-render loop when used with `useReactTable`.

```javascript
export default function MyComponent() {
  //😵 BAD: This will cause an infinite loop of re-renders because `columns` is redefined as a new array on every render!
  const columns = [
    // ...
  ];

  //😵 BAD: This will cause an infinite loop of re-renders because `data` is redefined as a new array on every render!
  const data = [
    // ...
  ];

  //❌ Columns and data are defined in the same scope as `useReactTable` without a stable reference, will cause infinite loop!
  const table = useReactTable({
    columns,
    data,
  });

  return <table>...</table>;
}
```

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

### Get Can Next Page API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns a boolean indicating whether the table can navigate to the next page.

```typescript
getCanNextPage: () => boolean
```

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

### Get Can Previous Page API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns a boolean indicating whether the table can navigate to the previous page.

```typescript
getCanPreviousPage: () => boolean
```

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

### Get Row Pinned Index

Source: https://tanstack.com/table/latest/docs/api/features/row-pinning.md

Get the index of a row within its pinned group.

```typescript
getPinnedIndex: () => number
```

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

### Get Center Rows API

Source: https://tanstack.com/table/latest/docs/api/features/row-pinning.md

Retrieve all rows that are not pinned.

```typescript
getCenterRows: () => Row<TData>[]
```

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

### Infinite Loop: Mutating Data In-Place

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

This example illustrates how mutating the `data` array in-place, such as with `data?.filter()`, directly within the `useReactTable` options can break its stable reference and cause infinite re-renders.

```javascript
export default function MyComponent() {
  //✅ GOOD
  const columns = useMemo(() => [
    // ...
  ], []);

  //✅ GOOD (React Query provides stable references to data automatically)
  const { data, isLoading } = useQuery({
    //...
  });

  const table = useReactTable({
    columns,
    //❌ BAD: This will cause an infinite loop of re-renders because `data` is mutated in place (destroys stable reference)
    data: data?.filter(d => d.isActive) ?? [],
  });

  return <table>...</table>;
}
```

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

### Get Row Pinned Status

Source: https://tanstack.com/table/latest/docs/api/features/row-pinning.md

Retrieve the current pinned position of a row.

```typescript
getIsPinned: () => RowPinningPosition
```

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

### Get Bottom Pinned Rows API

Source: https://tanstack.com/table/latest/docs/api/features/row-pinning.md

Retrieve all rows pinned to the bottom.

```typescript
getBottomRows: () => Row<TData>[]
```

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

### Stable References: Columns/Data Outside Component

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

This example shows how defining `columns` and `data` outside the React component provides a stable reference, preventing infinite re-renders when used with `useReactTable`.

```javascript
//✅ OK: Define columns outside of the component
const columns = [
  // ...
];

//✅ OK: Define data outside of the component
const data = [
  // ...
];

// Usually it's more practical to define columns and data inside the component, so use `useMemo` or `useState` to give them stable references
export default function MyComponent() {
  //✅ GOOD: This will not cause an infinite loop of re-renders because `columns` is a stable reference
  const columns = useMemo(() => [
    // ...
  ], []);

  //✅ GOOD: This will not cause an infinite loop of re-renders because `data` is a stable reference
  const [data, setData] = useState(() => [
    // ...
  ]);

  // Columns and data are defined in a stable reference, will not cause infinite loop!
  const table = useReactTable({
    columns,
    data,
  });

  return <table>...</table>;
}
```

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

### Table Options - `meta`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `meta` option allows you to pass arbitrary data or functions as context to the table, accessible via `table.options.meta`.

```APIDOC
## Options - `meta`

### `meta`

```tsx
meta?: TableMeta // This interface is extensible via declaration merging. See below!
```

You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta` This type is global to all tables and can be extended like so:

```tsx
declare module '@tanstack/table-core' {
  interface TableMeta<TData extends RowData> {
    foo: string
  }
}
```

> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data](https://github.com/TanStack/table/tree/main/examples/react/editable-data) example.
```

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

### Get Top Pinned Rows API

Source: https://tanstack.com/table/latest/docs/api/features/row-pinning.md

Retrieve all rows pinned to the top.

```typescript
getTopRows: () => Row<TData>[]
```

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

### Table Configuration Options

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Details various configuration options that can be passed to the table instance to customize its behavior and features.

```APIDOC
### `debugAll`

> ⚠️ Debugging is only available in development mode.

```tsx
debugAll?: boolean
```

Set this option to true to output all debugging information to the console.

### `debugTable`

> ⚠️ Debugging is only available in development mode.

```tsx
debugTable?: boolean
```

Set this option to true to output table debugging information to the console.

### `debugHeaders`

> ⚠️ Debugging is only available in development mode.

```tsx
debugHeaders?: boolean
```

Set this option to true to output header debugging information to the console.

### `debugColumns`

> ⚠️ Debugging is only available in development mode.

```tsx
debugColumns?: boolean
```

Set this option to true to output column debugging information to the console.

### `debugRows`

> ⚠️ Debugging is only available in development mode.

```tsx
debugRows?: boolean
```

Set this option to true to output row debugging information to the console.

### `_features`

```tsx
_features?: TableFeature[]
```

An array of extra features that you can add to the table instance.

### `render`

> ⚠️ This option is only necessary if you are implementing a table adapter.

```typescript
type render = <TProps>(template: Renderable<TProps>, props: TProps) => any
```

The `render` option provides a renderer implementation for the table. This implementation is used to turn a table's various column header and cell templates into a result that is supported by the user's framework.

### `mergeOptions`

> ⚠️ This option is only necessary if you are implementing a table adapter.

```typescript
type mergeOptions = <T>(defaultOptions: T, options: Partial<T>) => T
```

This option is used to optionally implement the merging of table options. Some framework like solid-js use proxies to track reactivity and usage, so merging reactive objects needs to be handled carefully. This option inverts control of this process to the adapter.

### `getCoreRowModel`

```typescript
getCoreRowModel: (table: Table<TData>) => () => RowModel<TData>
```

This required option is a factory for a function that computes and returns the core row model for the table. It is called **once** per table and should return a **new function** which will calculate and return the row model for the table.

A default implementation is provided via any table adapter's `{ getCoreRowModel }` export.

### `getSubRows`

```typescript
getSubRows?: (
  originalRow: TData,
  index: number
) => undefined | TData[]
```

This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.

### `getRowId`

```typescript
getRowId?: (
  originalRow: TData,
  index: number,
  parent?: Row<TData>
) => string
```

This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
```

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

### Get Page Count API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns the total number of pages. This is derived from `options.pageCount` or calculated from row count and page size.

```typescript
getPageCount: () => number
```

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

### Get Column by ID

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Retrieves a single column object using its unique ID.

```typescript
type getColumn = (id: string) => Column<TData> | undefined
```

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

### Get Right Flat Headers API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns a flat array of all right pinned headers, including any parent headers.

```typescript
getRightFlatHeaders: () => Header<TData>[]
```

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

### Get Pre-Sorted Row Model

Source: https://tanstack.com/table/latest/docs/api/features/sorting.md

Retrieve the `RowModel` before any sorting has been applied using `getPreSortedRowModel()`.

```typescript
getPreSortedRowModel: () => RowModel<TData>
```

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

### Table Options

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Options that can be passed to the table to configure global column resizing behavior and event handling.

```APIDOC
## Table Options

### `enableColumnResizing`

```tsx
enableColumnResizing?: boolean
```

Enables/disables column resizing for *all columns*.

### `columnResizeMode`

```tsx
columnResizeMode?: 'onChange' | 'onEnd'
```

Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.

### `columnResizeDirection`

```tsx
columnResizeDirection?: 'ltr' | 'rtl'
```

Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.

### `onColumnSizingChange`

```tsx
onColumnSizingChange?: OnChangeFn<ColumnSizingState>
```

This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the `state.columnSizing` table option.

### `onColumnSizingInfoChange`

```tsx
onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>
```

This optional function will be called when the columnSizingInfo state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the `state.columnSizingInfo` table option.
```

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

### Get Parent Rows Method

Source: https://tanstack.com/table/latest/docs/api/core/row.md

Returns an array of all parent row objects, tracing back up to the root row.

```typescript
type getParentRows = () => Row<TData>[]
```

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

### Get Visible Flat Columns

Source: https://tanstack.com/table/latest/docs/api/features/column-visibility.md

Returns a flat array of all visible columns, including any parent columns that are also visible.

```typescript
getVisibleFlatColumns: () => Column<TData>[]
```

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

### Row API: Get Can Select

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Returns a boolean indicating whether the row is selectable.

```typescript
getCanSelect: () => boolean
```

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

### Table Options - `initialState`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `initialState` option sets the default state for various table features like visibility, order, filtering, sorting, and pagination when the table is first initialized or reset.

```APIDOC
## Options - `initialState`

### `initialState`

```tsx
initialState?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>
```

Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.

> 🧠 Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
```

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

### Framework Table Core Functions

Source: https://tanstack.com/table/latest/docs/api/core/table.md

These are the primary functions used to create a table instance. The specific function to use depends on the framework adapter being employed (React, Solid, Qwik, Vue, Svelte).

```typescript
type useReactTable = <TData extends AnyData>(
  options: TableOptions<TData>
) => Table<TData>
```

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

### Get All Cells Method

Source: https://tanstack.com/table/latest/docs/api/core/row.md

Returns an array of all `Cell` objects associated with the current row.

```typescript
type getAllCells = () => Cell<TData>[]
```

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

### Table Options - `autoResetAll`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `autoResetAll` option provides a global override for all `autoReset...` feature options, allowing you to control automatic state resetting behavior across the table.

```APIDOC
## Options - `autoResetAll`

### `autoResetAll`

```tsx
autoResetAll?: boolean
```

Set this option to override any of the `autoReset...` feature options.
```

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

### Table Initial State Option

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Use `initialState` to provide initial values for various table states like visibility, column order, filters, sorting, and pagination. This state is used when resetting table states. The object does not need a stable reference as state is not reset when it changes.

```typescript
initialState?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>
```

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

### Get Flat Headers

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Returns a flattened array of all Header objects, including parent headers.

```typescript
type getFlatHeaders = () => Header<TData>[]
```

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

### Column API: getPinnedIndex

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Gets the index of a pinned column within its group (left or right).

```APIDOC
## getPinnedIndex

### Description
Returns the numeric pinned index of the column within a pinned column group.

### Method
```typescript
PinnedIndex: () => number
```
```

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

### Table Options for Pagination

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Configuration options to control and customize pagination behavior, including manual control, page/row counts, auto-reset, and state change callbacks.

```APIDOC
## Table Options for Pagination

### `manualPagination`

```typescript
manualPagination?: boolean
```

Enables manual pagination. If this option is set to `true`, the table will not automatically paginate rows using `getPaginationRowModel()` and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.

### `pageCount`

```typescript
pageCount?: number
```

When manually controlling pagination, you can supply a total `pageCount` value to the table if you know it. If you do not know how many pages there are, you can set this to `-1`. Alternatively, you can provide a `rowCount` value and the table will calculate the `pageCount` internally.

### `rowCount`

```typescript
rowCount?: number
```

When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. `pageCount` will be calculated internally from `rowCount` and `pageSize`.

### `autoResetPageIndex`

```typescript
autoResetPageIndex?: boolean
```

If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc.

> 🧠 Note: This option defaults to `false` if `manualPagination` is set to `true`

### `onPaginationChange`

```typescript
onPaginationChange?: OnChangeFn<PaginationState>
```

If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.pagination` option.

### `getPaginationRowModel`

```typescript
getPaginationRowModel?: (table: Table<TData>) => () => RowModel<TData>
```

Returns the row model after pagination has taken place, but no further.

Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
```

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

### Column Def Options

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Options that can be set on individual column definitions to control resizing behavior and size constraints.

```APIDOC
## Column Def Options

### `enableResizing`

```tsx
enableResizing?: boolean
```

Enables or disables column resizing for the column.

### `size`

```tsx
size?: number
```

The desired size for the column

### `minSize`

```tsx
minSize?: number
```

The minimum allowed size for the column

### `maxSize`

```tsx
maxSize?: number
```

The maximum allowed size for the column
```

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

### Get Center Leaf Columns API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns an array of all leaf columns that are unpinned (center).

```typescript
getCenterLeafColumns: () => Column<TData>[]
```

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

### Get Right Leaf Columns API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns an array of all leaf columns that are pinned to the right.

```typescript
getRightLeafColumns: () => Column<TData>[]
```

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

### Get Left Leaf Columns API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns an array of all leaf columns that are pinned to the left.

```typescript
getLeftLeafColumns: () => Column<TData>[]
```

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

### Table Options

Source: https://tanstack.com/table/latest/docs/api/features/expanding.md

Configuration options for controlling row expansion behavior.

```APIDOC
## Table Options

### `manualExpanding`

```tsx
manualExpanding?: boolean
```

Enables manual row expansion. If this is set to `true`, `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.

### `onExpandedChange`

```tsx
onExpandedChange?: OnChangeFn<ExpandedState>
```

This function is called when the `expanded` table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the `tableOptions.state.expanded` option.

### `autoResetExpanded`

```tsx
autoResetExpanded?: boolean
```

Enable this setting to automatically reset the expanded state of the table when expanding state changes.

### `enableExpanding`

```tsx
enableExpanding?: boolean
```

Enable/disable expanding for all rows.

### `getExpandedRowModel`

```tsx
getExpandedRowModel?: (table: Table<TData>) => () => RowModel<TData>
```

This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own.

### `getIsRowExpanded`

```tsx
getIsRowExpanded?: (row: Row<TData>) => boolean
```

If provided, allows you to override the default behavior of determining whether a row is currently expanded.

### `getRowCanExpand`

```tsx
getRowCanExpand?: (row: Row<TData>) => boolean
```

If provided, allows you to override the default behavior of determining whether a row can be expanded.

### `paginateExpandedRows`

```tsx
paginateExpandedRows?: boolean
```

If `true` expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages).

If `false` expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
```

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

### Row API: Get Can Multi Select

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Returns a boolean indicating whether the row can be multi-selected.

```typescript
getCanMultiSelect: () => boolean
```

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

### Define and Use Custom Aggregation Function

Source: https://tanstack.com/table/latest/docs/api/features/grouping.md

Demonstrates how to define a custom aggregation function and reference it in a column definition. This allows for custom aggregation logic beyond the built-in functions.

```tsx
declare module '@tanstack/table-core' {
  interface AggregationFns {
    myCustomAggregation: AggregationFn<unknown>
  }
}

const column = columnHelper.data('key', {
  aggregationFn: 'myCustomAggregation',
})

const table = useReactTable({
  columns: [column],
  aggregationFns: {
    myCustomAggregation: (columnId, leafRows, childRows) => {
      // return the aggregated value
    },
  },
})
```

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

### Row API: Get Is Some Selected

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Returns a boolean indicating if any of the row's sub-rows are selected.

```typescript
getIsSomeSelected: () => boolean
```

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

### Framework Table Hooks

Source: https://tanstack.com/table/latest/docs/api/core/table.md

These functions are used to create a table instance. The specific function to use depends on the framework adapter you are integrating with.

```APIDOC
## Framework Table Hooks

These functions are used to create a table. Which one you use depends on which framework adapter you are using.

### `useReactTable`

```tsx
type useReactTable = <TData extends AnyData>(
  options: TableOptions<TData>
) => Table<TData>
```

### `createSolidTable`

(Signature similar to `useReactTable` for SolidJS)

### `useQwikTable`

(Signature similar to `useReactTable` for Qwik)

### `useVueTable`

(Signature similar to `useReactTable` for Vue)

### `createSvelteTable`

(Signature similar to `useReactTable` for Svelte)
```

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

### Table Options - `columns`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `columns` option defines the structure and behavior of each column in the table, including data accessors and rendering logic.

```APIDOC
## Options - `columns`

### `columns`

```tsx
type columns = ColumnDef<TData>[]
```

The array of column defs to use for the table. See the [Column Def Guide](../../guide/column-defs.md) for more information on creating column definitions.
```

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

### Table API

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Methods available on the table instance for programmatically controlling column sizing state.

```APIDOC
## Table API

### `setColumnSizing`

```tsx
setColumnSizing: (updater: Updater<ColumnSizingState>) => void
```

Sets the column sizing state using an updater function or a value. This will trigger the underlying `onColumnSizingChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.

### `setColumnSizingInfo`

```tsx
setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
```

Sets the column sizing info state using an updater function or a value. This will trigger the underlying `onColumnSizingInfoChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.

### `resetColumnSizing`

```tsx
resetColumnSizing: (defaultState?: boolean) => void
```

Resets column sizing to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.
```

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

### Get Visible Leaf Columns

Source: https://tanstack.com/table/latest/docs/api/features/column-visibility.md

Returns a flat array containing only the visible leaf-node columns.

```typescript
getVisibleLeafColumns: () => Column<TData>[]
```

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

### Custom Filter Functions Table Option

Source: https://tanstack.com/table/latest/docs/api/features/global-filtering.md

Allows defining custom filter functions that can be referenced by key in a column's `filterFn` option. Includes an example of extending the FilterFns interface.

```typescript
declare module '@tanstack/table-core' {
  interface FilterFns {
    myCustomFilter: FilterFn<unknown>
  }
}

const column = columnHelper.data('key', {
  filterFn: 'myCustomFilter',
})

const table = useReactTable({
  columns: [column],
  filterFns: {
    myCustomFilter: (rows, columnIds, filterValue) => {
      // return the filtered rows
    },
  },
})
```

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

### Get Toggle All Columns Visibility Handler

Source: https://tanstack.com/table/latest/docs/api/features/column-visibility.md

Returns a handler function suitable for binding to an `input[type=checkbox]` element to toggle the visibility of all columns.

```typescript
getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)
```

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

### Table Options - `data`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `data` option is the core dataset for the table. It's an array that the table will process for display. Changes to this array's reference will trigger reprocessing.

```APIDOC
## Options - `data`

### `data`

```tsx
data: TData[]
```

The data for the table to display. This array should match the type you provided to `table.setRowType<...>`, but in theory could be an array of anything. It's common for each item in the array to be an object of key/values but this is not required. Columns can access this data via string/index or a functional accessor to return anything they want.

When the `data` option changes reference (compared via `Object.is`), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.

> 🧠 Make sure your `data` option is only changing when you want the table to reprocess. Providing an inline `[]` or constructing the data array as a new object every time you want to render the table will result in a _lot_ of unnecessary re-processing. This can easily go unnoticed in smaller tables, but you will likely notice it in larger tables.
```

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

### Get All Leaf Columns

Source: https://tanstack.com/table/latest/docs/api/core/table.md

Returns all leaf-node columns flattened to a single level, excluding parent columns.

```typescript
type getAllLeafColumns = () => Column<TData>[]
```

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

### Table Options for Sorting

Source: https://tanstack.com/table/latest/docs/api/features/sorting.md

Configure the global sorting behavior and features of the table using these options.

```APIDOC
## `sortingFns`

### Description
Allows defining custom sorting functions that can be referenced by key in a column's `sortingFn` option.

### Type
`Record<string, SortingFn>`

### Example
```typescript
declare module '@tanstack/table-core' {
  interface SortingFns {
    myCustomSorting: SortingFn<unknown>
  }
}

const column = columnHelper.data('key', {
  sortingFn: 'myCustomSorting',
})

const table = useReactTable({
  columns: [column],
  sortingFns: {
    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
      rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
  },
})
```
```

```APIDOC
## `manualSorting`

### Description
Enables manual sorting. If `true`, the data must be sorted externally before being passed to the table. Useful for server-side sorting.

### Type
`boolean`
```

```APIDOC
## `onSortingChange`

### Description
A function called with an `updaterFn` when `state.sorting` changes. This allows for external state management.

### Type
`OnChangeFn<SortingState>`
```

```APIDOC
## `enableSorting`

### Description
Enables or disables sorting for the entire table.

### Type
`boolean`
```

```APIDOC
## `enableSortingRemoval`

### Description
Enables or disables the ability to remove sorting from a column.
- If `true`: Sort order cycles through 'none' -> 'desc' -> 'asc' -> 'none'...
- If `false`: Sort order cycles through 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc'...

### Type
`boolean`
```

```APIDOC
## `enableMultiRemove`

### Description
Enables or disables the ability to remove multi-sorts.

### Type
`boolean`
```

```APIDOC
## `enableMultiSort`

### Description
Enables or disables multi-sorting for the table.

### Type
`boolean`
```

```APIDOC
## `sortDescFirst`

### Description
If `true`, all sorts will default to descending as their first toggle state.

### Type
`boolean`
```

```APIDOC
## `getSortedRowModel` (Option)

### Description
This option is used to provide a function that retrieves the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported `getSortedRowModel()` from your adapter to your table or implement your own.

### Type
`(table: Table<TData>) => () => RowModel<TData>`
```

```APIDOC
## `maxMultiSortColCount`

### Description
Sets a maximum number of columns that can be multi-sorted.

### Type
`number`
```

```APIDOC
## `isMultiSortEvent`

### Description
Pass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return `true` if the event should trigger a multi-sort.

### Type
`(e: unknown) => boolean`
```

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

### Column API Properties and Methods

Source: https://tanstack.com/table/latest/docs/api/core/column.md

This section outlines the core properties and methods available on each column object in TanStack Table. These include identifiers, hierarchy information, data access functions, and utility methods for column retrieval.

```APIDOC
## Column API

All column objects have the following properties:

### `id`

```tsx
id: string
```

The resolved unique identifier for the column resolved in this priority:

- A manual `id` property from the column def
- The accessor key from the column def
- The header string from the column def

### `depth`

```tsx
depth: number
```

The depth of the column (if grouped) relative to the root column def array.

### `accessorFn`

```tsx
accessorFn?: AccessorFn<TData>
```

The resolved accessor function to use when extracting the value for the column from each row. Will only be defined if the column def has a valid accessor key or function defined.

### `columnDef`

```tsx
columnDef: ColumnDef<TData>
```

The original column def used to create the column.

### `columns`

```tsx
type columns = ColumnDef<TData>[]
```

The child column (if the column is a group column). Will be an empty array if the column is not a group column.

### `parent`

```tsx
parent?: Column<TData>
```

The parent column for this column. Will be undefined if this is a root column.

### `getFlatColumns`

```tsx
type getFlatColumns = () => Column<TData>[]
```

Returns the flattened array of this column and all child/grand-child columns for this column.

### `getLeafColumns`

```tsx
type getLeafColumns = () => Column<TData>[]
```

Returns an array of all leaf-node columns for this column. If a column has no children, it is considered the only leaf-node column.
```

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

### Get Right Leaf Headers API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns a flat array of only the leaf-node headers that are pinned to the right.

```typescript
getRightLeafHeaders: () => Header<TData>[]
```

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

### Table Options - `state`

Source: https://tanstack.com/table/latest/docs/api/core/table.md

The `state` option allows you to control the table's internal state by providing an object that merges with and potentially overwrites the automatically managed state.

```APIDOC
## Options - `state`

### `state`

```tsx
state?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>
```

The `state` option can be used to optionally _control_ part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the `onStateChange` option.
```

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

### Get Center Leaf Headers API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns a flat array of only the leaf-node headers that are unpinned (center).

```typescript
getCenterLeafHeaders: () => Header<TData>[]
```

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

### Column Sizing State Interface

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Defines the structure for storing column sizing state, including the current sizes and information about the resizing process.

```typescript
export type ColumnSizingTableState = {
  columnSizing: ColumnSizing
  columnSizingInfo: ColumnSizingInfoState
}

export type ColumnSizing = Record<string, number>

export type ColumnSizingInfoState = {
  startOffset: null | number
  startSize: null | number
  deltaOffset: null | number
  deltaPercentage: null | number
  isResizingColumn: false | string
  columnSizingStart: [string, number][]
}
```

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

### Get Left Leaf Headers API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Returns a flat array of only the leaf-node headers that are pinned to the left.

```typescript
getLeftLeafHeaders: () => Header<TData>[]
```

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

### Table Options for Row Selection

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Configuration options to enable and customize row selection behavior within the table.

```APIDOC
## Table Options

### `enableRowSelection`

```typescript
enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
```

- Enables/disables row selection for all rows in the table OR
- A function that given a row, returns whether to enable/disable row selection for that row

### `enableMultiRowSelection`

```typescript
enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean)
```

- Enables/disables multiple row selection for all rows in the table OR
- A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren

### `enableSubRowSelection`

```typescript
enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean)
```

Enables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row.

(Use in combination with expanding or grouping features)

### `onRowSelectionChange`

```typescript
onRowSelectionChange?: OnChangeFn<RowSelectionState>
```

If provided, this function will be called with an `updaterFn` when `state.rowSelection` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
```

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

### resetHeaderSizeInfo

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Resets column sizing info to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.

```APIDOC
## resetHeaderSizeInfo

### Description
Resets column sizing info to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.

### Method
(Not specified, likely a function call)

### Parameters
#### Query Parameters
- **defaultState** (boolean) - Optional - If `true`, the default state for the table will be used instead of the initialValue provided to the table.

### Response
(Not specified, likely void)
```

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

### Get Center (Unpinned) Footer Groups API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Retrieves the footer groups that are not pinned and are in the center of the table.

```typescript
getCenterFooterGroups: () => HeaderGroup<TData>[]
```

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

### Get Pagination Row Model API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns the row model for the table after pagination filtering has been applied.

```typescript
getPaginationRowModel: () => RowModel<TData>
```

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

### Header API: getResizeHandler

Source: https://tanstack.com/table/latest/docs/api/features/column-sizing.md

Provides an event handler for initiating column resizing via mouse or touch events.

```typescript
getResizeHandler: () => (event: unknown) => void
```

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

### Get Center (Unpinned) Header Groups API

Source: https://tanstack.com/table/latest/docs/api/features/column-pinning.md

Retrieves the header groups that are not pinned and are in the center of the table.

```typescript
getCenterHeaderGroups: () => HeaderGroup<TData>[]
```

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

### Get Pre-Pagination Row Model API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Returns the row model for the table before any pagination filtering has been applied.

```typescript
getPrePaginationRowModel: () => RowModel<TData>
```

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

### Row API: Get Is Selected

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Returns a boolean indicating whether the specific row is currently selected.

```typescript
getIsSelected: () => boolean
```

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

### Defining Custom Filter Functions

Source: https://tanstack.com/table/latest/docs/api/features/column-filtering.md

Demonstrates how to define and use custom filter functions within the table options. This allows for reusable and complex filtering logic.

```typescript
declare module '@tanstack/[adapter]-table' {
  interface FilterFns {
    myCustomFilter: FilterFn<unknown>
  }
}

const column = columnHelper.data('key', {
  filterFn: 'myCustomFilter',
})

const table = useReactTable({
  columns: [column],
  filterFns: {
    myCustomFilter: (rows, columnIds, filterValue) => {
      // return the filtered rows
    },
  },
})
```

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

### First Page API

Source: https://tanstack.com/table/latest/docs/api/features/pagination.md

Sets the table's current page index to `0`, navigating to the first page.

```typescript
firstPage: () => void
```

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

### Get Selected Row Model API

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Retrieves the row model containing all currently selected rows.

```typescript
getSelectedRowModel: () => RowModel<TData>
```

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

### Header Properties

Source: https://tanstack.com/table/latest/docs/api/core/header.md

These are the core properties available on each header object.

```APIDOC
## Header API

All header objects have the following properties:

### `id`

```tsx
id: string
```

The unique identifier for the header.

### `index`

```tsx
index: number
```

The index for the header within the header group.

### `depth`

```tsx
depth: number
```

The depth of the header, zero-indexed based.

### `column`

```tsx
column: Column<TData>
```

The header's associated [Column](./column.md) object.

### `headerGroup`

```tsx
headerGroup: HeaderGroup<TData>
```

The header's associated [HeaderGroup](./header-group.md) object.

### `subHeaders`

```tsx
type subHeaders = Header<TData>[]
```

The header's hierarchical sub/child headers. Will be empty if the header's associated column is a leaf-column.

### `colSpan`

```tsx
colSpan: number
```

The col-span for the header.

### `rowSpan`

```tsx
rowSpan: number
```

The row-span for the header.

### `getLeafHeaders`

```tsx
type getLeafHeaders = () => Header<TData>[]
```

Returns the leaf headers hierarchically nested under this header.

### `isPlaceholder`

```tsx
isPlaceholder: boolean
```

A boolean denoting if the header is a placeholder header.

### `placeholderId`

```tsx
placeholderId?: string
```

If the header is a placeholder header, this will be a unique header ID that does not conflict with any other headers across the table.

### `getContext`

```tsx
getContext: () => {
  table: Table<TData>
  header: Header<TData, TValue>
  column: Column<TData, TValue>
}
```

Returns the rendering context (or props) for column-based components like headers, footers and filters. Use these props with your framework's `flexRender` utility to render these using the template of your choice:

```tsx
flexRender(header.column.columnDef.header, header.getContext())
```
```

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

### Header GetContext Method

Source: https://tanstack.com/table/latest/docs/api/core/header.md

A function that returns the rendering context for column-based components. This context includes the table, header, and column instances.

```typescript
getContext: () => {
  table: Table<TData>
  header: Header<TData, TValue>
  column: Column<TData, TValue>
}
```

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

### Get Pre Selected Row Model API

Source: https://tanstack.com/table/latest/docs/api/features/row-selection.md

Retrieves the row model containing rows that were pre-selected.

```typescript
getPreSelectedRowModel: () => RowModel<TData>
```