@tanstack/react-table 0.0.1-alpha.0

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 (49) hide show
  1. package/dist/react-table.development.js +3406 -0
  2. package/dist/react-table.development.js.map +1 -0
  3. package/dist/react-table.production.min.js +2 -0
  4. package/dist/react-table.production.min.js.map +1 -0
  5. package/lib/index.js +65 -0
  6. package/package.json +122 -0
  7. package/src/.DS_Store +0 -0
  8. package/src/aggregationTypes.ts +115 -0
  9. package/src/core.tsx +1194 -0
  10. package/src/createTable.tsx +181 -0
  11. package/src/features/Expanding.ts +388 -0
  12. package/src/features/Filters.ts +707 -0
  13. package/src/features/Grouping.ts +451 -0
  14. package/src/features/Headers.ts +907 -0
  15. package/src/features/Ordering.ts +134 -0
  16. package/src/features/Pinning.ts +213 -0
  17. package/src/features/Sorting.ts +487 -0
  18. package/src/features/Visibility.ts +281 -0
  19. package/src/features/notest/useAbsoluteLayout.test.js +152 -0
  20. package/src/features/notest/useBlockLayout.test.js +158 -0
  21. package/src/features/notest/useColumnOrder.test.js +186 -0
  22. package/src/features/notest/useExpanded.test.js +125 -0
  23. package/src/features/notest/useFilters.test.js +393 -0
  24. package/src/features/notest/useFiltersAndRowSelect.test.js +256 -0
  25. package/src/features/notest/useFlexLayout.test.js +152 -0
  26. package/src/features/notest/useGroupBy.test.js +259 -0
  27. package/src/features/notest/usePagination.test.js +231 -0
  28. package/src/features/notest/useResizeColumns.test.js +229 -0
  29. package/src/features/notest/useRowSelect.test.js +250 -0
  30. package/src/features/notest/useRowState.test.js +178 -0
  31. package/src/features/tests/Visibility.test.tsx +225 -0
  32. package/src/features/tests/__snapshots__/Visibility.test.tsx.snap +390 -0
  33. package/src/features/tests/withSorting.notest.tsx +341 -0
  34. package/src/features/withColumnResizing.ts +281 -0
  35. package/src/features/withPagination.ts +208 -0
  36. package/src/features/withRowSelection.ts +467 -0
  37. package/src/filterTypes.ts +251 -0
  38. package/src/index.tsx +7 -0
  39. package/src/sortTypes.ts +159 -0
  40. package/src/test-utils/makeTestData.ts +41 -0
  41. package/src/tests/__snapshots__/core.test.tsx.snap +148 -0
  42. package/src/tests/core.test.tsx +241 -0
  43. package/src/types.ts +285 -0
  44. package/src/utils/columnFilterRowsFn.ts +162 -0
  45. package/src/utils/expandRowsFn.ts +53 -0
  46. package/src/utils/globalFilterRowsFn.ts +129 -0
  47. package/src/utils/groupRowsFn.ts +196 -0
  48. package/src/utils/sortRowsFn.ts +115 -0
  49. package/src/utils.tsx +243 -0
package/src/features/tests/__snapshots__/Visibility.test.tsx.snap ADDED
@@ -0,0 +1,390 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`useTable can toggle column visibility: 0 - after toggling all off 1`] = `
4
+ {
5
+ "footers": [
6
+ [],
7
+ [],
8
+ [],
9
+ ],
10
+ "headers": [
11
+ [],
12
+ [],
13
+ [],
14
+ ],
15
+ "rows": [
16
+ [],
17
+ [],
18
+ [],
19
+ ],
20
+ }
21
+ `;
22
+
23
+ exports[`useTable can toggle column visibility: 1 - after toggling all on 1`] = `
24
+ {
25
+ "footers": [
26
+ [
27
+ [
28
+ "firstName",
29
+ "1",
30
+ ],
31
+ [
32
+ "lastName",
33
+ "1",
34
+ ],
35
+ [
36
+ "age",
37
+ "1",
38
+ ],
39
+ [
40
+ "visits",
41
+ "1",
42
+ ],
43
+ [
44
+ "status",
45
+ "1",
46
+ ],
47
+ [
48
+ "progress",
49
+ "1",
50
+ ],
51
+ ],
52
+ [
53
+ [
54
+ "",
55
+ "1",
56
+ ],
57
+ [
58
+ "",
59
+ "1",
60
+ ],
61
+ [
62
+ "",
63
+ "1",
64
+ ],
65
+ [
66
+ "More Info",
67
+ "3",
68
+ ],
69
+ ],
70
+ [
71
+ [
72
+ "Name",
73
+ "2",
74
+ ],
75
+ [
76
+ "Info",
77
+ "4",
78
+ ],
79
+ ],
80
+ ],
81
+ "headers": [
82
+ [
83
+ [
84
+ "Name",
85
+ "2",
86
+ ],
87
+ [
88
+ "Info",
89
+ "4",
90
+ ],
91
+ ],
92
+ [
93
+ [
94
+ "",
95
+ "1",
96
+ ],
97
+ [
98
+ "",
99
+ "1",
100
+ ],
101
+ [
102
+ "",
103
+ "1",
104
+ ],
105
+ [
106
+ "More Info",
107
+ "3",
108
+ ],
109
+ ],
110
+ [
111
+ [
112
+ "firstName",
113
+ "1",
114
+ ],
115
+ [
116
+ "<span>Last Name</span>",
117
+ "1",
118
+ ],
119
+ [
120
+ "Age",
121
+ "1",
122
+ ],
123
+ [
124
+ "<span>Visits</span>",
125
+ "1",
126
+ ],
127
+ [
128
+ "Status",
129
+ "1",
130
+ ],
131
+ [
132
+ "Profile Progress",
133
+ "1",
134
+ ],
135
+ ],
136
+ ],
137
+ "rows": [
138
+ [
139
+ "tanner",
140
+ "linsley",
141
+ "29",
142
+ "100",
143
+ "In Relationship",
144
+ "50",
145
+ ],
146
+ [
147
+ "derek",
148
+ "perkins",
149
+ "40",
150
+ "40",
151
+ "Single",
152
+ "80",
153
+ ],
154
+ [
155
+ "joe",
156
+ "bergevin",
157
+ "45",
158
+ "20",
159
+ "Complicated",
160
+ "10",
161
+ ],
162
+ ],
163
+ }
164
+ `;
165
+
166
+ exports[`useTable can toggle column visibility: 2 - after toggling firstName off 1`] = `
167
+ {
168
+ "footers": [
169
+ [
170
+ [
171
+ "lastName",
172
+ "1",
173
+ ],
174
+ [
175
+ "age",
176
+ "1",
177
+ ],
178
+ [
179
+ "visits",
180
+ "1",
181
+ ],
182
+ [
183
+ "status",
184
+ "1",
185
+ ],
186
+ [
187
+ "progress",
188
+ "1",
189
+ ],
190
+ ],
191
+ [
192
+ [
193
+ "",
194
+ "1",
195
+ ],
196
+ [
197
+ "",
198
+ "1",
199
+ ],
200
+ [
201
+ "More Info",
202
+ "3",
203
+ ],
204
+ ],
205
+ [
206
+ [
207
+ "Name",
208
+ "1",
209
+ ],
210
+ [
211
+ "Info",
212
+ "4",
213
+ ],
214
+ ],
215
+ ],
216
+ "headers": [
217
+ [
218
+ [
219
+ "Name",
220
+ "1",
221
+ ],
222
+ [
223
+ "Info",
224
+ "4",
225
+ ],
226
+ ],
227
+ [
228
+ [
229
+ "",
230
+ "1",
231
+ ],
232
+ [
233
+ "",
234
+ "1",
235
+ ],
236
+ [
237
+ "More Info",
238
+ "3",
239
+ ],
240
+ ],
241
+ [
242
+ [
243
+ "<span>Last Name</span>",
244
+ "1",
245
+ ],
246
+ [
247
+ "Age",
248
+ "1",
249
+ ],
250
+ [
251
+ "<span>Visits</span>",
252
+ "1",
253
+ ],
254
+ [
255
+ "Status",
256
+ "1",
257
+ ],
258
+ [
259
+ "Profile Progress",
260
+ "1",
261
+ ],
262
+ ],
263
+ ],
264
+ "rows": [
265
+ [
266
+ "linsley",
267
+ "29",
268
+ "100",
269
+ "In Relationship",
270
+ "50",
271
+ ],
272
+ [
273
+ "perkins",
274
+ "40",
275
+ "40",
276
+ "Single",
277
+ "80",
278
+ ],
279
+ [
280
+ "bergevin",
281
+ "45",
282
+ "20",
283
+ "Complicated",
284
+ "10",
285
+ ],
286
+ ],
287
+ }
288
+ `;
289
+
290
+ exports[`useTable can toggle column visibility: 3 - after toggling More Info off 1`] = `
291
+ {
292
+ "footers": [
293
+ [
294
+ [
295
+ "firstName",
296
+ "1",
297
+ ],
298
+ [
299
+ "lastName",
300
+ "1",
301
+ ],
302
+ [
303
+ "age",
304
+ "1",
305
+ ],
306
+ ],
307
+ [
308
+ [
309
+ "",
310
+ "1",
311
+ ],
312
+ [
313
+ "",
314
+ "1",
315
+ ],
316
+ [
317
+ "",
318
+ "1",
319
+ ],
320
+ ],
321
+ [
322
+ [
323
+ "Name",
324
+ "2",
325
+ ],
326
+ [
327
+ "Info",
328
+ "1",
329
+ ],
330
+ ],
331
+ ],
332
+ "headers": [
333
+ [
334
+ [
335
+ "Name",
336
+ "2",
337
+ ],
338
+ [
339
+ "Info",
340
+ "1",
341
+ ],
342
+ ],
343
+ [
344
+ [
345
+ "",
346
+ "1",
347
+ ],
348
+ [
349
+ "",
350
+ "1",
351
+ ],
352
+ [
353
+ "",
354
+ "1",
355
+ ],
356
+ ],
357
+ [
358
+ [
359
+ "firstName",
360
+ "1",
361
+ ],
362
+ [
363
+ "<span>Last Name</span>",
364
+ "1",
365
+ ],
366
+ [
367
+ "Age",
368
+ "1",
369
+ ],
370
+ ],
371
+ ],
372
+ "rows": [
373
+ [
374
+ "tanner",
375
+ "linsley",
376
+ "29",
377
+ ],
378
+ [
379
+ "derek",
380
+ "perkins",
381
+ "40",
382
+ ],
383
+ [
384
+ "joe",
385
+ "bergevin",
386
+ "45",
387
+ ],
388
+ ],
389
+ }
390
+ `;
package/src/features/tests/withSorting.notest.tsx ADDED
@@ -0,0 +1,341 @@
1
+ import React from 'react'
2
+ import { renderHook, act } from '@testing-library/react-hooks'
3
+ import { getHeaderIds, getRowValues } from '../../test-utils'
4
+ import { useTable } from '../../core/useTable'
5
+ import { noop } from '../../utils'
6
+ import { withSorting } from '../withSorting'
7
+ import type { Column, TableState } from '../../types'
8
+
9
+ const data = [
10
+ {
11
+ firstName: 'tanner',
12
+ lastName: 'linsley',
13
+ age: 29,
14
+ visits: 100,
15
+ status: 'In Relationship',
16
+ progress: 80,
17
+ },
18
+ {
19
+ firstName: 'derek',
20
+ lastName: 'perkins',
21
+ age: 40,
22
+ visits: 40,
23
+ status: 'Single',
24
+ progress: 80,
25
+ },
26
+ {
27
+ firstName: 'joe',
28
+ lastName: 'bergevin',
29
+ age: 45,
30
+ visits: 20,
31
+ status: 'Complicated',
32
+ progress: 10,
33
+ },
34
+ ]
35
+
36
+ const columns: Column[] = [
37
+ {
38
+ Header: 'Name',
39
+ columns: [
40
+ {
41
+ Header: 'First Name',
42
+ accessor: 'firstName',
43
+ },
44
+ {
45
+ Header: 'Last Name',
46
+ accessor: 'lastName',
47
+ },
48
+ ],
49
+ },
50
+ {
51
+ Header: 'Info',
52
+ columns: [
53
+ {
54
+ Header: 'Age',
55
+ accessor: 'age',
56
+ },
57
+ {
58
+ Header: 'Visits',
59
+ accessor: 'visits',
60
+ },
61
+ {
62
+ Header: 'Status',
63
+ accessor: 'status',
64
+ },
65
+ {
66
+ Header: 'Profile Progress',
67
+ accessor: 'progress',
68
+ },
69
+ ],
70
+ },
71
+ ]
72
+
73
+ describe('withSorting', () => {
74
+ it('renders a sortable table', () => {
75
+ const { result } = renderHook(
76
+ options => {
77
+ const instance = useTable(options, [withCore, withSorting])
78
+
79
+ return instance
80
+ },
81
+ {
82
+ initialProps: {
83
+ data,
84
+ columns,
85
+ },
86
+ }
87
+ )
88
+
89
+ expect(getHeaderIds(result.current)).toEqual([
90
+ ['Name', 'Info'],
91
+ ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
92
+ ])
93
+
94
+ expect(getRowValues(result.current)).toEqual([
95
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
96
+ ['derek', 'perkins', 40, 40, 'Single', 80],
97
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
98
+ ])
99
+
100
+ act(() => {
101
+ result.current.flatHeaders
102
+ .find(d => d.id === 'firstName')
103
+ ?.getToggleSortingProps?.()
104
+ .onClick({
105
+ persist: noop,
106
+ })
107
+ })
108
+
109
+ expect(getRowValues(result.current)).toEqual([
110
+ ['derek', 'perkins', 40, 40, 'Single', 80],
111
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
112
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
113
+ ])
114
+
115
+ act(() => {
116
+ result.current.flatHeaders
117
+ .find(d => d.id === 'firstName')
118
+ ?.getToggleSortingProps?.()
119
+ .onClick({
120
+ persist: noop,
121
+ })
122
+ })
123
+
124
+ expect(getRowValues(result.current)).toEqual([
125
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
126
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
127
+ ['derek', 'perkins', 40, 40, 'Single', 80],
128
+ ])
129
+
130
+ act(() => {
131
+ result.current.flatHeaders
132
+ .find(d => d.id === 'progress')
133
+ ?.getToggleSortingProps?.()
134
+ .onClick({
135
+ persist: noop,
136
+ })
137
+ })
138
+
139
+ expect(getRowValues(result.current)).toEqual([
140
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
141
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
142
+ ['derek', 'perkins', 40, 40, 'Single', 80],
143
+ ])
144
+
145
+ act(() => {
146
+ result.current.flatHeaders
147
+ .find(d => d.id === 'firstName')
148
+ ?.getToggleSortingProps?.()
149
+ .onClick({
150
+ persist: noop,
151
+ shiftKey: true,
152
+ })
153
+ })
154
+
155
+ expect(getRowValues(result.current)).toEqual([
156
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
157
+ ['derek', 'perkins', 40, 40, 'Single', 80],
158
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
159
+ ])
160
+ })
161
+
162
+ it('renders a controlled sorted table', () => {
163
+ const { result, rerender } = renderHook(
164
+ options => {
165
+ const instance = useTable(options, [withSorting])
166
+
167
+ return instance
168
+ },
169
+ {
170
+ initialProps: {
171
+ data,
172
+ columns,
173
+ state: {},
174
+ },
175
+ }
176
+ )
177
+
178
+ expect(getHeaderIds(result.current)).toEqual([
179
+ ['Name', 'Info'],
180
+ ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
181
+ ])
182
+
183
+ expect(getRowValues(result.current)).toEqual([
184
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
185
+ ['derek', 'perkins', 40, 40, 'Single', 80],
186
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
187
+ ])
188
+
189
+ rerender({
190
+ data,
191
+ columns,
192
+ state: { sorting: [{ id: 'firstName', desc: false }] },
193
+ })
194
+
195
+ expect(getRowValues(result.current)).toEqual([
196
+ ['derek', 'perkins', 40, 40, 'Single', 80],
197
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
198
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
199
+ ])
200
+
201
+ rerender({
202
+ data,
203
+ columns,
204
+ state: { sorting: [{ id: 'firstName', desc: true }] },
205
+ })
206
+
207
+ expect(getRowValues(result.current)).toEqual([
208
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
209
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
210
+ ['derek', 'perkins', 40, 40, 'Single', 80],
211
+ ])
212
+
213
+ rerender({
214
+ data,
215
+ columns,
216
+ state: { sorting: [{ id: 'progress', desc: false }] },
217
+ })
218
+
219
+ expect(getRowValues(result.current)).toEqual([
220
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
221
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
222
+ ['derek', 'perkins', 40, 40, 'Single', 80],
223
+ ])
224
+
225
+ rerender({
226
+ data,
227
+ columns,
228
+ state: {
229
+ sorting: [
230
+ { id: 'progress', desc: false },
231
+ { id: 'firstName', desc: false },
232
+ ],
233
+ },
234
+ })
235
+
236
+ expect(getRowValues(result.current)).toEqual([
237
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
238
+ ['derek', 'perkins', 40, 40, 'Single', 80],
239
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
240
+ ])
241
+ })
242
+
243
+ it('renders a hoisted state sorted table', () => {
244
+ const { result } = renderHook(
245
+ options => {
246
+ const [sorting, setSorting] = React.useState<TableState['sorting']>([])
247
+
248
+ const instance = useTable(
249
+ {
250
+ ...options,
251
+ state: {
252
+ sorting,
253
+ },
254
+ onSortingChange: setSorting,
255
+ },
256
+ [withSorting]
257
+ )
258
+
259
+ return instance
260
+ },
261
+ {
262
+ initialProps: {
263
+ data,
264
+ columns,
265
+ },
266
+ }
267
+ )
268
+
269
+ expect(getHeaderIds(result.current)).toEqual([
270
+ ['Name', 'Info'],
271
+ ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
272
+ ])
273
+
274
+ expect(getRowValues(result.current)).toEqual([
275
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
276
+ ['derek', 'perkins', 40, 40, 'Single', 80],
277
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
278
+ ])
279
+
280
+ act(() => {
281
+ result.current.flatHeaders
282
+ .find(d => d.id === 'firstName')
283
+ ?.getToggleSortingProps?.()
284
+ .onClick({
285
+ persist: noop,
286
+ })
287
+ })
288
+
289
+ expect(getRowValues(result.current)).toEqual([
290
+ ['derek', 'perkins', 40, 40, 'Single', 80],
291
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
292
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
293
+ ])
294
+
295
+ act(() => {
296
+ result.current.flatHeaders
297
+ .find(d => d.id === 'firstName')
298
+ ?.getToggleSortingProps?.()
299
+ .onClick({
300
+ persist: noop,
301
+ })
302
+ })
303
+
304
+ expect(getRowValues(result.current)).toEqual([
305
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
306
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
307
+ ['derek', 'perkins', 40, 40, 'Single', 80],
308
+ ])
309
+
310
+ act(() => {
311
+ result.current.flatHeaders
312
+ .find(d => d.id === 'progress')
313
+ ?.getToggleSortingProps?.()
314
+ .onClick({
315
+ persist: noop,
316
+ })
317
+ })
318
+
319
+ expect(getRowValues(result.current)).toEqual([
320
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
321
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
322
+ ['derek', 'perkins', 40, 40, 'Single', 80],
323
+ ])
324
+
325
+ act(() => {
326
+ result.current.flatHeaders
327
+ .find(d => d.id === 'firstName')
328
+ ?.getToggleSortingProps?.()
329
+ .onClick({
330
+ persist: noop,
331
+ shiftKey: true,
332
+ })
333
+ })
334
+
335
+ expect(getRowValues(result.current)).toEqual([
336
+ ['joe', 'bergevin', 45, 20, 'Complicated', 10],
337
+ ['derek', 'perkins', 40, 40, 'Single', 80],
338
+ ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
339
+ ])
340
+ })
341
+ })