0
# React Table
1

2
React Table v7 is a headless, hook-based React library for building powerful data tables and datagrids. It provides extensive functionality including sorting, filtering, pagination, row selection, column resizing, and more through a composable plugin architecture.
3

4
## Package Information
5

6
- **Package Name**: react-table
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install react-table`
10

11
## Core Imports
12

13
```javascript
14
import { useTable } from "react-table";
15
```
16

17
For plugin hooks:
18

19
```javascript
20
import {
21
  useTable,
22
  useSortBy,
23
  useFilters,
24
  useGlobalFilter,
25
  useGroupBy,
26
  usePagination,
27
  useRowSelect,
28
  useExpanded,
29
  useColumnOrder,
30
  useResizeColumns
31
} from "react-table";
32
```
33

34
For default functions:
35

36
```javascript
37
import {
38
  useTable,
39
  useGroupBy,
40
  defaultGroupByFn,
41
  defaultOrderByFn
42
} from "react-table";
43
```
44

45
CommonJS:
46

47
```javascript
48
const { useTable, useSortBy, useFilters } = require("react-table");
49
```
50

51
## Basic Usage
52

53
```javascript
54
import React from 'react';
55
import { useTable } from 'react-table';
56

57
function BasicTable({ columns, data }) {
58
  const {
59
    getTableProps,
60
    getTableBodyProps,
61
    headerGroups,
62
    rows,
63
    prepareRow,
64
  } = useTable({
65
    columns,
66
    data,
67
  });
68

69
  return (
70
    <table {...getTableProps()}>
71
      <thead>
72
        {headerGroups.map(headerGroup => (
73
          <tr {...headerGroup.getHeaderGroupProps()}>
74
            {headerGroup.headers.map(column => (
75
              <th {...column.getHeaderProps()}>
76
                {column.render('Header')}
77
              </th>
78
            ))}
79
          </tr>
80
        ))}
81
      </thead>
82
      <tbody {...getTableBodyProps()}>
83
        {rows.map(row => {
84
          prepareRow(row);
85
          return (
86
            <tr {...row.getRowProps()}>
87
              {row.cells.map(cell => (
88
                <td {...cell.getCellProps()}>
89
                  {cell.render('Cell')}
90
                </td>
91
              ))}
92
            </tr>
93
          );
94
        })}
95
      </tbody>
96
    </table>
97
  );
98
}
99
```
100

101
## Architecture
102

103
React Table v7 is built around several key design principles:
104

105
- **Headless**: No UI components, only data logic and utilities
106
- **Hook-based**: Built with React hooks for modern React applications
107
- **Plugin Architecture**: Extensible through composable plugin hooks
108
- **Type-safe**: Full TypeScript support with intelligent type inference
109
- **Performance Optimized**: Uses memoization and selective updates for optimal rendering
110

111
### Core Components
112

113
- **useTable Hook**: The foundational hook that creates the table instance
114
- **Plugin Hooks**: Optional hooks that extend table functionality (useSortBy, useFilters, etc.)
115
- **Table Instance**: The object returned by useTable containing all table state and methods
116
- **Row/Column/Cell Objects**: Structured data objects with rendering utilities
117

118
## Capabilities
119

120
### Core Table Functionality
121

122
Essential table creation and management functionality. Every React Table implementation starts here.
123

124
```javascript { .api }
125
function useTable(
126
  props: TableOptions,
127
  ...plugins: PluginHook[]
128
): TableInstance;
129

130
interface TableOptions {
131
  columns: Column[];
132
  data: any[];
133
  initialState?: Partial<TableState>;
134
  defaultColumn?: Partial<Column>;
135
  getSubRows?: (row: any, index: number) => any[];
136
  getRowId?: (row: any, index: number, parent?: Row) => string;
137
  stateReducer?: (
138
    newState: TableState,
139
    action: ActionType,
140
    previousState: TableState
141
  ) => TableState;
142
  useControlledState?: (state: TableState) => TableState;
143
}
144
```
145

146
[Core Table](./core-table.md)
147

148
### Data Filtering
149

150
Column-level and global filtering capabilities for searching and filtering table data.
151

152
```javascript { .api }
153
function useFilters(hooks: Hooks): void;
154
function useGlobalFilter(hooks: Hooks): void;
155

156
interface FilterInstance {
157
  setFilter: (columnId: string, filterValue: any) => void;
158
  setAllFilters: (filters: Filter[]) => void;
159
  setGlobalFilter: (filterValue: any) => void;
160
}
161
```
162

163
[Data Filtering](./filtering.md)
164

165
### Data Sorting
166

167
Single and multi-column sorting functionality with customizable sort types.
168

169
```javascript { .api }
170
function useSortBy(hooks: Hooks): void;
171

172
interface SortByInstance {
173
  setSortBy: (sortBy: SortingRule[]) => void;
174
  toggleSortBy: (columnId: string, desc?: boolean, multi?: boolean) => void;
175
}
176
```
177

178
[Data Sorting](./sorting.md)
179

180
### Pagination
181

182
Built-in pagination functionality for large datasets.
183

184
```javascript { .api }
185
function usePagination(hooks: Hooks): void;
186

187
interface PaginationInstance {
188
  canPreviousPage: boolean;
189
  canNextPage: boolean;
190
  pageOptions: number[];
191
  pageCount: number;
192
  gotoPage: (pageIndex: number) => void;
193
  previousPage: () => void;
194
  nextPage: () => void;
195
  setPageSize: (pageSize: number) => void;
196
}
197
```
198

199
[Pagination](./pagination.md)
200

201
### Data Grouping
202

203
Row grouping and aggregation capabilities for hierarchical data display.
204

205
```javascript { .api }
206
function useGroupBy(hooks: Hooks): void;
207
function defaultGroupByFn(rows: Row[], columnId: string): Row[];
208

209
interface GroupByInstance {
210
  toggleGroupBy: (columnId: string, value?: boolean) => void;
211
  setGroupBy: (groupBy: string[]) => void;
212
  preGroupedRows: Row[];
213
  groupedRows: Row[];
214
}
215
```
216

217
[Data Grouping](./grouping.md)
218

219
### Row Features
220

221
Row expansion, selection, and state management capabilities.
222

223
```javascript { .api }
224
function useExpanded(hooks: Hooks): void;
225
function useRowSelect(hooks: Hooks): void;
226
function useRowState(hooks: Hooks): void;
227

228
interface RowInstance {
229
  isExpanded: boolean;
230
  canExpand: boolean;
231
  isSelected: boolean;
232
  toggleRowExpanded: (expanded?: boolean) => void;
233
  toggleRowSelected: (selected?: boolean) => void;
234
}
235
```
236

237
[Row Features](./row-features.md)
238

239
### Column Management
240

241
Column ordering, resizing, and visibility control.
242

243
```javascript { .api }
244
function useColumnOrder(hooks: Hooks): void;
245
function useResizeColumns(hooks: Hooks): void;
246

247
interface ColumnInstance {
248
  canResize: boolean;
249
  isResizing: boolean;
250
  getResizerProps: () => object;
251
}
252
```
253

254
[Column Management](./column-management.md)
255

256
### Layout Plugins
257

258
Specialized layout systems for different table rendering approaches.
259

260
```javascript { .api }
261
function useAbsoluteLayout(hooks: Hooks): void;
262
function useBlockLayout(hooks: Hooks): void;
263
function useFlexLayout(hooks: Hooks): void;
264
function useGridLayout(hooks: Hooks): void;
265
```
266

267
[Layout Systems](./layout.md)
268

269
### Utilities and Helpers
270

271
Built-in utilities, renderers, and helper functions for common table operations.
272

273
```javascript { .api }
274
const actions: ActionTypes;
275
const defaultColumn: Column;
276
function flexRender(component: Renderer, props: any): React.ReactElement;
277
function makeRenderer(component: Renderer): Function;
278
function useAsyncDebounce<T>(fn: T, wait: number): T;
279
function useGetLatest<T>(obj: T): () => T;
280
```
281

282
[Utilities](./utilities.md)
283

284
### Built-in Types and Functions
285

286
Pre-built filter types, sort types, and aggregation functions for common data operations.
287

288
```javascript { .api }
289
interface FilterTypes {
290
  text: FilterFunction;
291
  exactText: FilterFunction;
292
  includes: FilterFunction;
293
  between: FilterFunction;
294
}
295

296
interface SortTypes {
297
  alphanumeric: SortFunction;
298
  datetime: SortFunction;
299
  number: SortFunction;
300
  string: SortFunction;
301
}
302

303
interface AggregationTypes {
304
  sum: AggregationFunction;
305
  min: AggregationFunction;
306
  max: AggregationFunction;
307
  average: AggregationFunction;
308
  count: AggregationFunction;
309
}
310
```
311

312
[Built-in Types](./built-in-types.md)
313

314
## Types
315

316
```javascript { .api }
317
interface TableInstance {
318
  // State
319
  state: TableState;
320
  dispatch: (action: ActionType) => void;
321
  
322
  // Columns
323
  columns: Column[];
324
  allColumns: Column[];
325
  visibleColumns: Column[];
326
  headerGroups: HeaderGroup[];
327
  footerGroups: HeaderGroup[];
328
  headers: Header[];
329
  flatHeaders: Header[];
330
  
331
  // Rows
332
  rows: Row[];
333
  flatRows: Row[];
334
  rowsById: Record<string, Row>;
335
  
336
  // Methods
337
  prepareRow: (row: Row) => void;
338
  getTableProps: PropGetter;
339
  getTableBodyProps: PropGetter;
340
}
341

342
interface Column {
343
  Header?: Renderer;
344
  Footer?: Renderer;
345
  Cell?: Renderer;
346
  accessor?: string | ((row: any) => any);
347
  id?: string;
348
  width?: number;
349
  minWidth?: number;
350
  maxWidth?: number;
351
  disableSortBy?: boolean;
352
  disableFilters?: boolean;
353
  disableGroupBy?: boolean;
354
}
355

356
interface Row {
357
  id: string;
358
  index: number;
359
  original: any;
360
  cells: Cell[];
361
  values: Record<string, any>;
362
  subRows?: Row[];
363
  getRowProps: PropGetter;
364
}
365

366
interface Cell {
367
  column: Column;
368
  row: Row;
369
  value: any;
370
  getCellProps: PropGetter;
371
  render: (type: string) => React.ReactElement;
372
}
373

374
type PropGetter = (props?: any) => object;
375
type Renderer = React.ComponentType | React.ReactElement | string;
376
```