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
```