@tanstack/react-table 8.0.0-alpha.1 → 8.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/build/cjs/core.js +118 -59
  2. package/build/cjs/core.js.map +1 -1
  3. package/build/cjs/createTable.js +11 -6
  4. package/build/cjs/createTable.js.map +1 -1
  5. package/build/cjs/features/ColumnSizing.js +317 -0
  6. package/build/cjs/features/ColumnSizing.js.map +1 -0
  7. package/build/cjs/features/Expanding.js +23 -2
  8. package/build/cjs/features/Expanding.js.map +1 -1
  9. package/build/cjs/features/Filters.js +54 -5
  10. package/build/cjs/features/Filters.js.map +1 -1
  11. package/build/cjs/features/Grouping.js +23 -2
  12. package/build/cjs/features/Grouping.js.map +1 -1
  13. package/build/cjs/features/Headers.js +88 -22
  14. package/build/cjs/features/Headers.js.map +1 -1
  15. package/build/cjs/features/Ordering.js +4 -1
  16. package/build/cjs/features/Ordering.js.map +1 -1
  17. package/build/cjs/features/Pagination.js +198 -0
  18. package/build/cjs/features/Pagination.js.map +1 -0
  19. package/build/cjs/features/Pinning.js +0 -14
  20. package/build/cjs/features/Pinning.js.map +1 -1
  21. package/build/cjs/features/RowSelection.js +541 -0
  22. package/build/cjs/features/RowSelection.js.map +1 -0
  23. package/build/cjs/features/Sorting.js +76 -18
  24. package/build/cjs/features/Sorting.js.map +1 -1
  25. package/build/cjs/features/Visibility.js +8 -2
  26. package/build/cjs/features/Visibility.js.map +1 -1
  27. package/build/cjs/index.js +2 -0
  28. package/build/cjs/index.js.map +1 -1
  29. package/build/cjs/sortTypes.js +1 -0
  30. package/build/cjs/sortTypes.js.map +1 -1
  31. package/build/cjs/utils/columnFilterRowsFn.js +3 -2
  32. package/build/cjs/utils/columnFilterRowsFn.js.map +1 -1
  33. package/build/cjs/utils/expandRowsFn.js +2 -2
  34. package/build/cjs/utils/expandRowsFn.js.map +1 -1
  35. package/build/cjs/utils/globalFilterRowsFn.js +3 -2
  36. package/build/cjs/utils/globalFilterRowsFn.js.map +1 -1
  37. package/build/cjs/utils/groupRowsFn.js +4 -3
  38. package/build/cjs/utils/groupRowsFn.js.map +1 -1
  39. package/build/cjs/utils/paginateRowsFn.js +44 -0
  40. package/build/cjs/utils/paginateRowsFn.js.map +1 -0
  41. package/build/cjs/utils/sortRowsFn.js +3 -2
  42. package/build/cjs/utils/sortRowsFn.js.map +1 -1
  43. package/build/cjs/utils.js +6 -3
  44. package/build/cjs/utils.js.map +1 -1
  45. package/build/esm/index.js +1613 -225
  46. package/build/esm/index.js.map +1 -1
  47. package/build/stats-html.html +1 -1
  48. package/build/stats-react.json +363 -217
  49. package/build/types/core.d.ts +14 -25
  50. package/build/types/createTable.d.ts +21 -3
  51. package/build/types/features/ColumnSizing.d.ts +67 -0
  52. package/build/types/features/Expanding.d.ts +2 -1
  53. package/build/types/features/Filters.d.ts +7 -2
  54. package/build/types/features/Grouping.d.ts +2 -2
  55. package/build/types/features/Ordering.d.ts +1 -1
  56. package/build/types/features/Pagination.d.ts +44 -0
  57. package/build/types/features/Pinning.d.ts +3 -3
  58. package/build/types/features/RowSelection.d.ts +66 -0
  59. package/build/types/features/Sorting.d.ts +5 -2
  60. package/build/types/index.d.ts +1 -0
  61. package/build/types/sortTypes.d.ts +5 -4
  62. package/build/types/types.d.ts +13 -8
  63. package/build/types/utils/columnFilterRowsFn.d.ts +2 -2
  64. package/build/types/utils/expandRowsFn.d.ts +2 -2
  65. package/build/types/utils/globalFilterRowsFn.d.ts +2 -2
  66. package/build/types/utils/groupRowsFn.d.ts +2 -2
  67. package/build/types/utils/paginateRowsFn.d.ts +2 -0
  68. package/build/types/utils/sortRowsFn.d.ts +2 -2
  69. package/build/types/utils.d.ts +7 -3
  70. package/build/umd/index.development.js +1613 -224
  71. package/build/umd/index.development.js.map +1 -1
  72. package/build/umd/index.production.js +1 -1
  73. package/build/umd/index.production.js.map +1 -1
  74. package/package.json +1 -1
  75. package/src/core.tsx +252 -265
  76. package/src/createTable.tsx +69 -9
  77. package/src/features/ColumnSizing.ts +453 -0
  78. package/src/features/Expanding.ts +27 -11
  79. package/src/features/Filters.ts +75 -20
  80. package/src/features/Grouping.ts +27 -12
  81. package/src/features/Headers.ts +55 -50
  82. package/src/features/Ordering.ts +2 -3
  83. package/src/features/Pagination.ts +327 -0
  84. package/src/features/Pinning.ts +3 -16
  85. package/src/features/RowSelection.ts +831 -0
  86. package/src/features/Sorting.ts +82 -22
  87. package/src/features/Visibility.ts +2 -4
  88. package/src/index.tsx +1 -0
  89. package/src/sortTypes.ts +1 -1
  90. package/src/types.ts +55 -9
  91. package/src/utils/columnFilterRowsFn.ts +5 -12
  92. package/src/utils/expandRowsFn.ts +2 -5
  93. package/src/utils/globalFilterRowsFn.ts +3 -10
  94. package/src/utils/groupRowsFn.ts +3 -5
  95. package/src/utils/paginateRowsFn.ts +34 -0
  96. package/src/utils/sortRowsFn.ts +5 -5
  97. package/src/utils.tsx +20 -6
  98. package/src/features/withColumnResizing.oldts +0 -281
  99. package/src/features/withPagination.oldts +0 -208
  100. package/src/features/withRowSelection.oldts +0 -467
@@ -1,467 +0,0 @@
1
- import React, { MouseEvent, TouchEvent } from 'react'
2
-
3
- import { useLazyMemo, useMountedLayoutEffect, makeStateUpdater } from '../utils'
4
-
5
- import {
6
- withRowSelection as name,
7
- withColumnVisibility,
8
- withColumnFilters,
9
- withGlobalFilter,
10
- withGrouping,
11
- withSorting,
12
- withExpanding,
13
- withPagination,
14
- } from '../Constants'
15
- import {
16
- ReduceRow,
17
- Row,
18
- RowId,
19
- Column,
20
- TableState,
21
- MakeInstance,
22
- GetLeafColumns,
23
- GetDefaultOptions,
24
- } from '../types'
25
-
26
- const getDefaultOptions: GetDefaultOptions = options => {
27
- return {
28
- onRowSelectionChange: React.useCallback(
29
- makeStateUpdater('rowSelection'),
30
- []
31
- ),
32
- selectSubRows: true,
33
- selectGroupingRows: false,
34
- manualRowSelectedKey: 'isSelected',
35
- isAdditiveSelectEvent: (e: MouseEvent | TouchEvent) => !!e.metaKey,
36
- isInclusiveSelectEvent: (e: MouseEvent | TouchEvent) => !!e.shiftKey,
37
- ...options,
38
- initialState: {
39
- rowSelection: {},
40
- ...options.initialState,
41
- },
42
- }
43
- }
44
-
45
- const extendInstance: MakeInstance = instance => {
46
- const rowSelectionResetDeps = [instance.options.data]
47
- React.useMemo(() => {
48
- if (instance.options.autoResetRowSelection) {
49
- instance.state.rowSelection =
50
- instance.options.initialState?.rowSelection ?? {}
51
- }
52
- // eslint-disable-next-line react-hooks/exhaustive-deps
53
- }, rowSelectionResetDeps)
54
-
55
- useMountedLayoutEffect(() => {
56
- if (instance.options.autoResetRowSelection) {
57
- instance.resetRowSelection?.()
58
- }
59
- }, rowSelectionResetDeps)
60
-
61
- instance.setRowSelection = React.useCallback(
62
- updater => instance.options.onRowSelectionChange?.(updater, instance),
63
- [instance]
64
- )
65
-
66
- instance.resetRowSelection = React.useCallback(
67
- () =>
68
- instance.setRowSelection?.(
69
- instance.options.initialState?.rowSelection ?? {}
70
- ),
71
- [instance]
72
- )
73
-
74
- instance.toggleAllRowsSelected = React.useCallback(
75
- value =>
76
- instance.setRowSelection?.(old => {
77
- const {
78
- getIsAllRowsSelected,
79
- rowsById,
80
- nonGroupedRowsById = rowsById,
81
- } = instance
82
-
83
- value = typeof value !== 'undefined' ? value : !getIsAllRowsSelected?.()
84
-
85
- // Only remove/add the rows that are visible on the screen
86
- // Leave all the other rows that are selected alone.
87
- const rowSelection = Object.assign({}, old)
88
-
89
- if (value) {
90
- Object.keys(nonGroupedRowsById).forEach(rowId => {
91
- rowSelection[rowId] = true
92
- })
93
- } else {
94
- Object.keys(nonGroupedRowsById).forEach(rowId => {
95
- delete rowSelection[rowId]
96
- })
97
- }
98
-
99
- return rowSelection
100
- }),
101
- [instance]
102
- )
103
-
104
- instance.toggleAllPageRowsSelected = React.useCallback(
105
- value =>
106
- instance.setRowSelection?.(old => {
107
- const {
108
- options: { selectSubRows },
109
- getIsAllPageRowsSelected,
110
- rowsById,
111
- getPageRows,
112
- } = instance
113
-
114
- const selectAll =
115
- typeof value !== 'undefined' ? value : !getIsAllPageRowsSelected?.()
116
-
117
- const rowSelection: TableState['rowSelection'] = { ...old }
118
-
119
- const handleRowById = (id: RowId) => {
120
- const row = rowsById[id]
121
-
122
- if (!row.getIsGrouped?.()) {
123
- if (selectAll) {
124
- rowSelection[id] = true
125
- } else {
126
- delete rowSelection[id]
127
- }
128
- }
129
-
130
- if (selectSubRows && row.subRows) {
131
- row.subRows.forEach(subRow => handleRowById(subRow.id))
132
- }
133
- }
134
-
135
- getPageRows?.().forEach(row => handleRowById(row.id))
136
-
137
- return rowSelection
138
- }),
139
- [instance]
140
- )
141
-
142
- instance.toggleRowSelected = React.useCallback(
143
- (id, value) =>
144
- instance.setRowSelection?.(old => {
145
- const {
146
- rowsById,
147
- options: { selectSubRows, selectGroupingRows },
148
- } = instance
149
-
150
- // Join the ids of deep rows
151
- // to make a key, then manage all of the keys
152
- // in a flat object
153
- const row = rowsById[id]
154
- const isSelected = row.getIsSelected?.()
155
- value = typeof value !== 'undefined' ? value : !isSelected
156
-
157
- if (isSelected === value) {
158
- return old
159
- }
160
-
161
- const selectedRowIds = { ...old }
162
-
163
- selectRowById(selectedRowIds, id, value, {
164
- rowsById,
165
- selectGroupingRows: selectGroupingRows!,
166
- selectSubRows: selectSubRows!,
167
- })
168
-
169
- return selectedRowIds
170
- }),
171
- [instance]
172
- )
173
-
174
- instance.addRowSelectionRange = React.useCallback(
175
- rowId => {
176
- const {
177
- rows,
178
- rowsById,
179
- options: { selectGroupingRows, selectSubRows },
180
- } = instance
181
-
182
- const findSelectedRow = (rows: Row[]) => {
183
- let found
184
- rows.find(d => {
185
- if (d.getIsSelected?.()) {
186
- found = d
187
- return true
188
- }
189
- const subFound = findSelectedRow(d.subRows || [])
190
- if (subFound) {
191
- found = subFound
192
- return true
193
- }
194
- return false
195
- })
196
- return found
197
- }
198
-
199
- const firstRow = findSelectedRow(rows) || rows[0]
200
- const lastRow = rowsById[rowId]
201
-
202
- let include = false
203
- const selectedRowIds = {}
204
-
205
- const addRow = (row: Row) => {
206
- selectRowById(selectedRowIds, row.id, true, {
207
- rowsById,
208
- selectGroupingRows: selectGroupingRows!,
209
- selectSubRows: selectSubRows!,
210
- })
211
- }
212
-
213
- instance.rows.forEach(row => {
214
- const isFirstRow = row.id === firstRow.id
215
- const isLastRow = row.id === lastRow.id
216
-
217
- if (isFirstRow || isLastRow) {
218
- if (!include) {
219
- include = true
220
- } else if (include) {
221
- addRow(row)
222
- include = false
223
- }
224
- }
225
-
226
- if (include) {
227
- addRow(row)
228
- }
229
- })
230
-
231
- instance.setRowSelection?.(selectedRowIds)
232
- },
233
- [instance]
234
- )
235
-
236
- instance.getSelectedFlatRows = React.useCallback(() => {
237
- return instance.flatRows.filter(
238
- row => !row.getIsGrouped?.() && row.getIsSelected?.()
239
- )
240
- }, [instance])
241
-
242
- instance.getIsAllRowsSelected = useLazyMemo(() => {
243
- let isAllRowsSelected = Boolean(
244
- Object.keys(instance.nonGroupedRowsById).length &&
245
- Object.keys(instance.state.rowSelection ?? {}).length
246
- )
247
-
248
- if (isAllRowsSelected) {
249
- if (
250
- Object.keys(instance.nonGroupedRowsById).some(
251
- id => !instance.state.rowSelection?.[id]
252
- )
253
- ) {
254
- isAllRowsSelected = false
255
- }
256
- }
257
-
258
- return isAllRowsSelected
259
- }, [instance.nonGroupedRowsById, instance.state.rowSelection])
260
-
261
- const pageRows = instance.getPageRows?.()
262
-
263
- instance.getIsAllPageRowsSelected = useLazyMemo(() => {
264
- let isAllPageRowsSelected = instance.getIsAllPageRowsSelected?.() ?? false
265
-
266
- if (!isAllPageRowsSelected) {
267
- if (pageRows?.length && pageRows.some(row => !row.getIsSelected?.())) {
268
- isAllPageRowsSelected = false
269
- }
270
- }
271
-
272
- return isAllPageRowsSelected
273
- }, [instance, instance.state.rowSelection])
274
-
275
- instance.getIsSomeRowsSelected = useLazyMemo(() => {
276
- return (
277
- !instance.getIsAllRowsSelected?.() &&
278
- Object.keys(instance.state.rowSelection ?? {}).length
279
- )
280
- }, [instance.nonGroupedRowsById, instance.state.rowSelection])
281
-
282
- instance.getIsSomePageRowsSelected = useLazyMemo(() => {
283
- return instance.getIsAllPageRowsSelected?.()
284
- ? false
285
- : pageRows?.length
286
- ? pageRows.reduce(
287
- (count, row) => count + (row.getIsSelected?.() ?? 0 ? 1 : 0),
288
- 0
289
- )
290
- : false
291
- }, [pageRows, instance.state.rowSelection])
292
-
293
- instance.getToggleAllRowsSelectedProps = props => {
294
- const isSomeRowsSelected = instance.getIsSomeRowsSelected?.()
295
- const isAllRowsSelected = instance.getIsAllRowsSelected?.()
296
-
297
- return {
298
- onChange: (e: MouseEvent | TouchEvent) => {
299
- instance.toggleAllRowsSelected?.((e.target as HTMLInputElement).checked)
300
- },
301
- checked: isAllRowsSelected,
302
- title: 'Toggle All Rows Selected',
303
- indeterminate: isSomeRowsSelected,
304
- ...props,
305
- }
306
- }
307
-
308
- instance.getToggleAllPageRowsSelectedProps = props => {
309
- const isSomePageRowsSelected = instance.getIsSomePageRowsSelected?.()
310
- const isAllPageRowsSelected = instance.getIsAllPageRowsSelected?.()
311
-
312
- return {
313
- onChange: (e: MouseEvent | TouchEvent) => {
314
- instance.toggleAllPageRowsSelected?.(
315
- (e.target as HTMLInputElement).checked
316
- )
317
- },
318
- checked: isAllPageRowsSelected,
319
- title: 'Toggle All Current Page Rows Selected',
320
- indeterminate: isSomePageRowsSelected,
321
- ...props,
322
- }
323
- }
324
-
325
- return instance
326
- }
327
-
328
- const getLeafColumns: GetLeafColumns = orderedColumns => {
329
- return React.useMemo(() => {
330
- return [
331
- orderedColumns.find(d => d.isRowSelectionColumn),
332
- ...orderedColumns.filter(d => d && !d.isRowSelectionColumn),
333
- ].filter(Boolean) as Column[]
334
- }, [orderedColumns])
335
- }
336
-
337
- const reduceRow: ReduceRow = (row, { instance }) => {
338
- row.getIsSelected = () =>
339
- instance.options.selectSubRows
340
- ? getRowIsSelected(
341
- row,
342
- instance.state.rowSelection ?? {},
343
- instance.options?.manualRowSelectedKey
344
- )
345
- : !!instance.state.rowSelection?.[row.id]
346
-
347
- row.getIsSomeSelected = () => row.getIsSelected?.() === null
348
-
349
- row.toggleSelected = value => instance.toggleRowSelected?.(row.id, value)
350
-
351
- row.getToggleRowSelectedProps = ({ forInput = false, ...props } = {}) => {
352
- const checked = row.getIsSelected?.()
353
-
354
- return {
355
- onChange: (e: Event) =>
356
- row.toggleSelected?.((e.target as HTMLInputElement).checked),
357
- checked,
358
- title: 'Toggle Row Selected',
359
- indeterminate: row.getIsSomeSelected?.(),
360
- ...props,
361
- onClick: forInput
362
- ? (e: Event) => e.stopPropagation()
363
- : (e: Event) => {
364
- if (instance.options.isAdditiveSelectEvent?.(e)) {
365
- row.toggleSelected?.()
366
- } else if (instance.options.isInclusiveSelectEvent?.(e)) {
367
- instance.addRowSelectionRange?.(row.id)
368
- } else {
369
- instance.setRowSelection?.({})
370
- row.toggleSelected?.()
371
- }
372
-
373
- if (props.onClick) props.onClick(e)
374
- },
375
- }
376
- }
377
-
378
- return row
379
- }
380
-
381
- const selectRowById = (
382
- selectedRowIds: Record<RowId, boolean>,
383
- id: RowId,
384
- value: boolean,
385
- {
386
- rowsById,
387
- selectGroupingRows,
388
- selectSubRows,
389
- }: {
390
- rowsById: Record<RowId, Row>
391
- selectGroupingRows: boolean
392
- selectSubRows: boolean
393
- }
394
- ) => {
395
- const row = rowsById[id]
396
-
397
- if (!row.getIsGrouped?.() || (row.getIsGrouped?.() && selectGroupingRows)) {
398
- if (value) {
399
- selectedRowIds[id] = true
400
- } else {
401
- delete selectedRowIds[id]
402
- }
403
- }
404
-
405
- if (selectSubRows && row.subRows) {
406
- row.subRows.forEach(row =>
407
- selectRowById(selectedRowIds, row.id, value, {
408
- rowsById,
409
- selectGroupingRows,
410
- selectSubRows,
411
- })
412
- )
413
- }
414
- }
415
-
416
- export function getRowIsSelected(
417
- row: Row,
418
- selection: Record<RowId, boolean>,
419
- manualRowSelectedKey?: string
420
- ) {
421
- if (
422
- selection[row.id] ||
423
- (manualRowSelectedKey && row.original[manualRowSelectedKey])
424
- ) {
425
- return true
426
- }
427
-
428
- if (row.subRows && row.subRows.length) {
429
- let allChildrenSelected = true
430
- let someSelected = false
431
-
432
- row.subRows.forEach((subRow: Row) => {
433
- // Bail out early if we know both of these
434
- if (someSelected && !allChildrenSelected) {
435
- return
436
- }
437
-
438
- if (getRowIsSelected(subRow, selection, manualRowSelectedKey)) {
439
- someSelected = true
440
- } else {
441
- allChildrenSelected = false
442
- }
443
- })
444
- return allChildrenSelected ? true : someSelected ? 'some' : false
445
- }
446
-
447
- return false
448
- }
449
-
450
- export const withRowSelection = {
451
- name,
452
- after: [
453
- withColumnVisibility,
454
- withColumnFilters,
455
- withGlobalFilter,
456
- withGrouping,
457
- withSorting,
458
- withExpanding,
459
- withPagination,
460
- ],
461
- plugs: {
462
- getDefaultOptions,
463
- extendInstance,
464
- getLeafColumns,
465
- reduceRow,
466
- },
467
- }