0
# TanStack Table Core
1

2
TanStack Table is a headless UI library for building powerful tables and datagrids in TypeScript/JavaScript. It provides a framework-agnostic core that works with React, Vue, Solid, Svelte, Angular, and other frameworks. The library offers comprehensive table functionality including sorting, filtering, grouping, pagination, row selection, column management, and virtualization support while maintaining complete control over markup and styling.
3

4
## Package Information
5

6
- **Package Name**: @tanstack/table-core
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tanstack/table-core`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  createTable, 
16
  getCoreRowModel,
17
  createColumnHelper,
18
  type Table,
19
  type ColumnDef 
20
} from "@tanstack/table-core";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const { 
27
  createTable, 
28
  getCoreRowModel, 
29
  createColumnHelper 
30
} = require("@tanstack/table-core");
31
```
32

33
## Basic Usage
34

35
```typescript
36
import { 
37
  createTable, 
38
  getCoreRowModel, 
39
  createColumnHelper,
40
  type ColumnDef
41
} from "@tanstack/table-core";
42

43
// Define your data type
44
type Person = {
45
  firstName: string;
46
  lastName: string;
47
  age: number;
48
  visits: number;
49
  status: string;
50
  progress: number;
51
};
52

53
// Create column helper
54
const columnHelper = createColumnHelper<Person>();
55

56
// Define columns
57
const columns: ColumnDef<Person, any>[] = [
58
  columnHelper.accessor('firstName', {
59
    header: () => 'First Name',
60
    cell: info => info.getValue(),
61
  }),
62
  columnHelper.accessor('lastName', {
63
    header: () => 'Last Name',
64
    cell: info => info.getValue(),
65
  }),
66
  columnHelper.accessor('age', {
67
    header: () => 'Age',
68
    cell: info => info.getValue(),
69
  }),
70
];
71

72
// Sample data
73
const data: Person[] = [
74
  {
75
    firstName: 'John',
76
    lastName: 'Doe', 
77
    age: 25,
78
    visits: 100,
79
    status: 'In Relationship',
80
    progress: 50,
81
  },
82
  // ... more data
83
];
84

85
// Create table instance
86
const table = createTable({
87
  data,
88
  columns,
89
  getCoreRowModel: getCoreRowModel(),
90
});
91

92
// Access table data
93
const headerGroups = table.getHeaderGroups();
94
const rowModel = table.getRowModel();
95
```
96

97
## Architecture
98

99
TanStack Table Core is built around several key architectural concepts:
100

101
- **Table Instance**: Central table object managing state and providing all table functionality
102
- **Column Definitions**: Declarative column configurations with accessor functions and render logic
103
- **Row Models**: Pluggable row processing pipelines for sorting, filtering, grouping, and pagination
104
- **Feature System**: Modular feature plugins that extend core functionality
105
- **State Management**: Controlled and uncontrolled state patterns for table configuration
106
- **Type Safety**: Full TypeScript integration with generic type preservation throughout the API
107

108
## Capabilities
109

110
### Table Creation and Management
111

112
Core table instance creation and lifecycle management. The foundation of all table functionality.
113

114
```typescript { .api }
115
function createTable<TData extends RowData>(
116
  options: TableOptionsResolved<TData>
117
): Table<TData>;
118
```
119

120
[Table Management](./table-management.md)
121

122
### Column Definition and Management
123

124
Powerful column definition system with support for accessor functions, display columns, and grouped columns.
125

126
```typescript { .api }
127
function createColumnHelper<TData extends RowData>(): ColumnHelper<TData>;
128

129
interface ColumnHelper<TData> {
130
  accessor<TAccessor extends AccessorFn<TData> | DeepKeys<TData>>(
131
    accessor: TAccessor,
132
    column: ColumnDef<TData, any>
133
  ): ColumnDef<TData, any>;
134
  display(column: DisplayColumnDef<TData>): DisplayColumnDef<TData, unknown>;
135
  group(column: GroupColumnDef<TData>): GroupColumnDef<TData, unknown>;
136
}
137
```
138

139
[Column System](./column-system.md)
140

141
### Row Model Utilities
142

143
Row processing pipelines that transform and filter table data through various operations.
144

145
```typescript { .api }
146
function getCoreRowModel<TData extends RowData>(): (
147
  table: Table<TData>
148
) => () => RowModel<TData>;
149

150
function getSortedRowModel<TData extends RowData>(): (
151
  table: Table<TData>
152
) => () => RowModel<TData>;
153

154
function getFilteredRowModel<TData extends RowData>(): (
155
  table: Table<TData>
156
) => () => RowModel<TData>;
157
```
158

159
[Row Models](./row-models.md)
160

161
### Sorting and Filtering
162

163
Comprehensive sorting and filtering capabilities with built-in functions and custom function support.
164

165
```typescript { .api }
166
interface SortingOptions<TData extends RowData> {
167
  onSortingChange?: OnChangeFn<SortingState>;
168
  enableSorting?: boolean;
169
  enableSortingRemoval?: boolean;
170
  enableMultiSort?: boolean;
171
  sortingFns?: Record<string, SortingFn<TData>>;
172
  isMultiSortEvent?: (e: unknown) => boolean;
173
  maxMultiSortColCount?: number;
174
  sortDescFirst?: boolean;
175
}
176
```
177

178
[Sorting and Filtering](./sorting-filtering.md)
179

180
### Column Features
181

182
Advanced column functionality including visibility control, ordering, pinning, and resizing.
183

184
```typescript { .api }
185
interface VisibilityOptions {
186
  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
187
  enableHiding?: boolean;
188
}
189

190
interface ColumnPinningOptions {
191
  onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
192
  enablePinning?: boolean;
193
}
194
```
195

196
[Column Features](./column-features.md)
197

198
### Row Features
199

200
Row-level functionality including selection, expansion, grouping, and pagination.
201

202
```typescript { .api }
203
interface RowSelectionOptions<TData extends RowData> {
204
  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
205
  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
206
  enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean);
207
  enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean);
208
}
209
```
210

211
[Row Features](./row-features.md)
212

213
### Built-in Functions
214

215
Pre-built sorting, filtering, and aggregation functions for common table operations.
216

217
```typescript { .api }
218
const sortingFns: {
219
  alphanumeric: SortingFn<any>;
220
  alphanumericCaseSensitive: SortingFn<any>;
221
  text: SortingFn<any>;
222
  textCaseSensitive: SortingFn<any>;
223
  datetime: SortingFn<any>;
224
  basic: SortingFn<any>;
225
};
226

227
const filterFns: {
228
  includesString: FilterFn<any>;
229
  includesStringSensitive: FilterFn<any>;
230
  equalsString: FilterFn<any>;
231
  arrIncludes: FilterFn<any>;
232
  equals: FilterFn<any>;
233
  inNumberRange: FilterFn<any>;
234
};
235
```
236

237
[Built-in Functions](./builtin-functions.md)
238

239
## Core Types
240

241
```typescript { .api }
242
interface Table<TData extends RowData> extends CoreInstance<TData>,
243
  HeadersInstance<TData>,
244
  VisibilityInstance<TData>,
245
  ColumnOrderInstance<TData>,
246
  ColumnPinningInstance<TData>,
247
  RowPinningInstance<TData>,
248
  ColumnFiltersInstance<TData>,
249
  GlobalFilterInstance<TData>,
250
  SortingInstance<TData>,
251
  GroupingInstance<TData>,
252
  ExpandedInstance<TData>,
253
  PaginationInstance<TData>,
254
  RowSelectionInstance<TData>,
255
  ColumnSizingInstance,
256
  GlobalFacetingInstance<TData> {}
257

258
interface TableOptions<TData extends RowData> extends CoreOptions<TData>,
259
  VisibilityOptions,
260
  ColumnOrderOptions,
261
  ColumnPinningOptions,
262
  RowPinningOptions<TData>,
263
  ColumnFiltersOptions<TData>,
264
  GlobalFilterOptions<TData>,
265
  SortingOptions<TData>,
266
  GroupingOptions,
267
  ExpandedOptions<TData>,
268
  PaginationOptions,
269
  RowSelectionOptions<TData>,
270
  ColumnSizingOptions,
271
  FacetedOptions<TData> {}
272

273
interface ColumnDef<TData extends RowData, TValue = unknown> extends 
274
  ColumnDefBase<TData, TValue>,
275
  VisibilityColumnDef,
276
  ColumnPinningColumnDef,
277
  ColumnFiltersColumnDef<TData>,
278
  GlobalFilterColumnDef,
279
  SortingColumnDef<TData>,
280
  GroupingColumnDef<TData, TValue>,
281
  ColumnSizingColumnDef {}
282

283
interface Row<TData extends RowData> extends CoreRow<TData>,
284
  VisibilityRow<TData>,
285
  ColumnPinningRow<TData>,
286
  RowPinningRow,
287
  ColumnFiltersRow<TData>,
288
  GroupingRow,
289
  RowSelectionRow,
290
  ExpandedRow {}
291

292
type RowData = Record<string, any>;
293

294
type Updater<T> = T | ((old: T) => T);
295

296
type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void;
297
```