@tanstack/react-table 8.0.0-alpha.2 → 8.0.0-alpha.22
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.
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -78
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/cjs/index.js +96 -12
- package/build/cjs/index.js.map +1 -1
- package/build/esm/index.js +40 -3663
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +28 -676
- package/build/types/index.d.ts +13 -7
- package/build/umd/index.development.js +50 -3665
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +4 -1
- package/src/index.tsx +104 -7
- package/build/cjs/aggregationTypes.js +0 -130
- package/build/cjs/aggregationTypes.js.map +0 -1
- package/build/cjs/core.js +0 -519
- package/build/cjs/core.js.map +0 -1
- package/build/cjs/createTable.js +0 -103
- package/build/cjs/createTable.js.map +0 -1
- package/build/cjs/features/ColumnSizing.js +0 -331
- package/build/cjs/features/ColumnSizing.js.map +0 -1
- package/build/cjs/features/Expanding.js +0 -234
- package/build/cjs/features/Expanding.js.map +0 -1
- package/build/cjs/features/Filters.js +0 -396
- package/build/cjs/features/Filters.js.map +0 -1
- package/build/cjs/features/Grouping.js +0 -228
- package/build/cjs/features/Grouping.js.map +0 -1
- package/build/cjs/features/Headers.js +0 -486
- package/build/cjs/features/Headers.js.map +0 -1
- package/build/cjs/features/Ordering.js +0 -83
- package/build/cjs/features/Ordering.js.map +0 -1
- package/build/cjs/features/Pinning.js +0 -163
- package/build/cjs/features/Pinning.js.map +0 -1
- package/build/cjs/features/Sorting.js +0 -269
- package/build/cjs/features/Sorting.js.map +0 -1
- package/build/cjs/features/Visibility.js +0 -160
- package/build/cjs/features/Visibility.js.map +0 -1
- package/build/cjs/filterTypes.js +0 -172
- package/build/cjs/filterTypes.js.map +0 -1
- package/build/cjs/sortTypes.js +0 -121
- package/build/cjs/sortTypes.js.map +0 -1
- package/build/cjs/utils/columnFilterRowsFn.js +0 -130
- package/build/cjs/utils/columnFilterRowsFn.js.map +0 -1
- package/build/cjs/utils/expandRowsFn.js +0 -38
- package/build/cjs/utils/expandRowsFn.js.map +0 -1
- package/build/cjs/utils/globalFilterRowsFn.js +0 -100
- package/build/cjs/utils/globalFilterRowsFn.js.map +0 -1
- package/build/cjs/utils/groupRowsFn.js +0 -154
- package/build/cjs/utils/groupRowsFn.js.map +0 -1
- package/build/cjs/utils/sortRowsFn.js +0 -93
- package/build/cjs/utils/sortRowsFn.js.map +0 -1
- package/build/cjs/utils.js +0 -143
- package/build/cjs/utils.js.map +0 -1
- package/build/types/aggregationTypes.d.ts +0 -22
- package/build/types/core.d.ts +0 -126
- package/build/types/createTable.d.ts +0 -35
- package/build/types/features/ColumnSizing.d.ts +0 -73
- package/build/types/features/Expanding.d.ts +0 -52
- package/build/types/features/Filters.d.ts +0 -93
- package/build/types/features/Grouping.d.ts +0 -82
- package/build/types/features/Headers.d.ts +0 -41
- package/build/types/features/Ordering.d.ts +0 -19
- package/build/types/features/Pinning.d.ts +0 -39
- package/build/types/features/Sorting.d.ts +0 -75
- package/build/types/features/Visibility.d.ts +0 -47
- package/build/types/filterTypes.d.ts +0 -50
- package/build/types/sortTypes.d.ts +0 -17
- package/build/types/types.d.ts +0 -124
- package/build/types/utils/columnFilterRowsFn.d.ts +0 -2
- package/build/types/utils/expandRowsFn.d.ts +0 -2
- package/build/types/utils/globalFilterRowsFn.d.ts +0 -2
- package/build/types/utils/groupRowsFn.d.ts +0 -2
- package/build/types/utils/sortRowsFn.d.ts +0 -2
- package/build/types/utils.d.ts +0 -24
- package/src/aggregationTypes.ts +0 -115
- package/src/core.tsx +0 -1232
- package/src/createTable.tsx +0 -181
- package/src/features/ColumnSizing.ts +0 -482
- package/src/features/Expanding.ts +0 -388
- package/src/features/Filters.ts +0 -707
- package/src/features/Grouping.ts +0 -451
- package/src/features/Headers.ts +0 -944
- package/src/features/Ordering.ts +0 -134
- package/src/features/Pinning.ts +0 -213
- package/src/features/Sorting.ts +0 -487
- package/src/features/Visibility.ts +0 -281
- package/src/features/withPagination.oldts +0 -208
- package/src/features/withRowSelection.oldts +0 -467
- package/src/filterTypes.ts +0 -251
- package/src/sortTypes.ts +0 -159
- package/src/types.ts +0 -314
- package/src/utils/columnFilterRowsFn.ts +0 -162
- package/src/utils/expandRowsFn.ts +0 -53
- package/src/utils/globalFilterRowsFn.ts +0 -129
- package/src/utils/groupRowsFn.ts +0 -196
- package/src/utils/sortRowsFn.ts +0 -115
- package/src/utils.tsx +0 -249
package/src/features/Ordering.ts
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { functionalUpdate, makeStateUpdater, memo } from '../utils'
|
|
2
|
-
|
|
3
|
-
import { ReactTable, OnChangeFn, Updater, Column } from '../types'
|
|
4
|
-
|
|
5
|
-
import * as Grouping from './Grouping'
|
|
6
|
-
|
|
7
|
-
export type ColumnOrderState = string[]
|
|
8
|
-
|
|
9
|
-
export type ColumnOrderTableState = {
|
|
10
|
-
columnOrder: string[]
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export type ColumnOrderOptions = {
|
|
14
|
-
onColumnOrderChange?: OnChangeFn<ColumnOrderState>
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export type ColumnOrderDefaultOptions = {
|
|
18
|
-
onColumnOrderChange: OnChangeFn<ColumnOrderState>
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export type ColumnOrderInstance<
|
|
22
|
-
TData,
|
|
23
|
-
TValue,
|
|
24
|
-
TFilterFns,
|
|
25
|
-
TSortingFns,
|
|
26
|
-
TAggregationFns
|
|
27
|
-
> = {
|
|
28
|
-
setColumnOrder: (updater: Updater<ColumnOrderState>) => void
|
|
29
|
-
resetColumnOrder: () => void
|
|
30
|
-
getOrderColumnsFn: () => (
|
|
31
|
-
columns: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
|
|
32
|
-
) => Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
export function getInitialState(): ColumnOrderTableState {
|
|
38
|
-
return {
|
|
39
|
-
columnOrder: [],
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export function getDefaultOptions<
|
|
44
|
-
TData,
|
|
45
|
-
TValue,
|
|
46
|
-
TFilterFns,
|
|
47
|
-
TSortingFns,
|
|
48
|
-
TAggregationFns
|
|
49
|
-
>(
|
|
50
|
-
instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
|
|
51
|
-
): ColumnOrderDefaultOptions {
|
|
52
|
-
return {
|
|
53
|
-
onColumnOrderChange: makeStateUpdater('columnOrder', instance),
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export function getInstance<
|
|
58
|
-
TData,
|
|
59
|
-
TValue,
|
|
60
|
-
TFilterFns,
|
|
61
|
-
TSortingFns,
|
|
62
|
-
TAggregationFns
|
|
63
|
-
>(
|
|
64
|
-
instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
|
|
65
|
-
): ColumnOrderInstance<
|
|
66
|
-
TData,
|
|
67
|
-
TValue,
|
|
68
|
-
TFilterFns,
|
|
69
|
-
TSortingFns,
|
|
70
|
-
TAggregationFns
|
|
71
|
-
> {
|
|
72
|
-
return {
|
|
73
|
-
setColumnOrder: updater =>
|
|
74
|
-
instance.options.onColumnOrderChange?.(
|
|
75
|
-
updater,
|
|
76
|
-
functionalUpdate(updater, instance.getState().columnOrder)
|
|
77
|
-
),
|
|
78
|
-
resetColumnOrder: () => {
|
|
79
|
-
instance.setColumnOrder(instance.initialState.columnOrder ?? [])
|
|
80
|
-
},
|
|
81
|
-
getOrderColumnsFn: memo(
|
|
82
|
-
() => [
|
|
83
|
-
instance.getState().columnOrder,
|
|
84
|
-
instance.getState().grouping,
|
|
85
|
-
instance.options.groupedColumnMode,
|
|
86
|
-
],
|
|
87
|
-
(columnOrder, grouping, groupedColumnMode) => columns => {
|
|
88
|
-
// Sort grouped columns to the start of the column list
|
|
89
|
-
// before the headers are built
|
|
90
|
-
let orderedColumns: Column<
|
|
91
|
-
TData,
|
|
92
|
-
TValue,
|
|
93
|
-
TFilterFns,
|
|
94
|
-
TSortingFns,
|
|
95
|
-
TAggregationFns
|
|
96
|
-
>[] = []
|
|
97
|
-
|
|
98
|
-
// If there is no order, return the normal columns
|
|
99
|
-
if (!columnOrder?.length) {
|
|
100
|
-
orderedColumns = columns
|
|
101
|
-
} else {
|
|
102
|
-
const columnOrderCopy = [...columnOrder]
|
|
103
|
-
|
|
104
|
-
// If there is an order, make a copy of the columns
|
|
105
|
-
const columnsCopy = [...columns]
|
|
106
|
-
|
|
107
|
-
// And make a new ordered array of the columns
|
|
108
|
-
|
|
109
|
-
// Loop over the columns and place them in order into the new array
|
|
110
|
-
while (columnsCopy.length && columnOrderCopy.length) {
|
|
111
|
-
const targetColumnId = columnOrderCopy.shift()
|
|
112
|
-
const foundIndex = columnsCopy.findIndex(
|
|
113
|
-
d => d.id === targetColumnId
|
|
114
|
-
)
|
|
115
|
-
if (foundIndex > -1) {
|
|
116
|
-
orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// If there are any columns left, add them to the end
|
|
121
|
-
orderedColumns = [...orderedColumns, ...columnsCopy]
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
return Grouping.orderColumns(
|
|
125
|
-
orderedColumns,
|
|
126
|
-
grouping,
|
|
127
|
-
groupedColumnMode
|
|
128
|
-
)
|
|
129
|
-
},
|
|
130
|
-
'getOrderColumnsFn',
|
|
131
|
-
instance.options.debug
|
|
132
|
-
),
|
|
133
|
-
}
|
|
134
|
-
}
|
package/src/features/Pinning.ts
DELETED
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
import { OnChangeFn, Updater, ReactTable, Column } from '../types'
|
|
2
|
-
import { functionalUpdate, makeStateUpdater } from '../utils'
|
|
3
|
-
|
|
4
|
-
type ColumnPinningPosition = 'left' | 'right' | 'both'
|
|
5
|
-
|
|
6
|
-
export type ColumnPinningState = {
|
|
7
|
-
left?: string[]
|
|
8
|
-
right?: string[]
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export type ColumnPinningTableState = {
|
|
12
|
-
columnPinning: ColumnPinningState
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export type ColumnPinningOptions = {
|
|
16
|
-
onColumnPinningChange?: OnChangeFn<ColumnPinningState>
|
|
17
|
-
enablePinning?: boolean
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export type ColumnPinningDefaultOptions = {
|
|
21
|
-
onColumnPinningChange: OnChangeFn<ColumnPinningState>
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export type ColumnPinningColumnDef = {
|
|
25
|
-
enablePinning?: boolean
|
|
26
|
-
defaultCanPin?: boolean
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export type ColumnPinningColumn = {
|
|
30
|
-
getCanPin: () => boolean
|
|
31
|
-
getPinnedIndex: () => number
|
|
32
|
-
getIsPinned: () => false | ColumnPinningPosition
|
|
33
|
-
pin: (position: ColumnPinningPosition) => void
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export type ColumnPinningInstance<
|
|
37
|
-
_TData,
|
|
38
|
-
_TValue,
|
|
39
|
-
_TFilterFns,
|
|
40
|
-
_TSortingFns,
|
|
41
|
-
_TAggregationFns
|
|
42
|
-
> = {
|
|
43
|
-
setColumnPinning: (updater: Updater<ColumnPinningState>) => void
|
|
44
|
-
resetColumnPinning: () => void
|
|
45
|
-
pinColumn: (columnId: string, position: ColumnPinningPosition) => void
|
|
46
|
-
getColumnCanPin: (columnId: string) => boolean
|
|
47
|
-
getColumnIsPinned: (columnId: string) => false | ColumnPinningPosition
|
|
48
|
-
getColumnPinnedIndex: (columnId: string) => number
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
//
|
|
52
|
-
|
|
53
|
-
export function getInitialState(): ColumnPinningTableState {
|
|
54
|
-
return {
|
|
55
|
-
columnPinning: {
|
|
56
|
-
left: [],
|
|
57
|
-
right: [],
|
|
58
|
-
},
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export function getDefaultOptions<
|
|
63
|
-
TData,
|
|
64
|
-
TValue,
|
|
65
|
-
TFilterFns,
|
|
66
|
-
TSortingFns,
|
|
67
|
-
TAggregationFns
|
|
68
|
-
>(
|
|
69
|
-
instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
|
|
70
|
-
): ColumnPinningDefaultOptions {
|
|
71
|
-
return {
|
|
72
|
-
onColumnPinningChange: makeStateUpdater('columnPinning', instance),
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export function createColumn<
|
|
77
|
-
TData,
|
|
78
|
-
TValue,
|
|
79
|
-
TFilterFns,
|
|
80
|
-
TSortingFns,
|
|
81
|
-
TAggregationFns
|
|
82
|
-
>(
|
|
83
|
-
column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
|
|
84
|
-
instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
|
|
85
|
-
): ColumnPinningColumn {
|
|
86
|
-
return {
|
|
87
|
-
getCanPin: () => instance.getColumnCanPin(column.id),
|
|
88
|
-
getPinnedIndex: () => instance.getColumnPinnedIndex(column.id),
|
|
89
|
-
getIsPinned: () => instance.getColumnIsPinned(column.id),
|
|
90
|
-
pin: position => instance.pinColumn(column.id, position),
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export function getInstance<
|
|
95
|
-
TData,
|
|
96
|
-
TValue,
|
|
97
|
-
TFilterFns,
|
|
98
|
-
TSortingFns,
|
|
99
|
-
TAggregationFns
|
|
100
|
-
>(
|
|
101
|
-
instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
|
|
102
|
-
): ColumnPinningInstance<
|
|
103
|
-
TData,
|
|
104
|
-
TValue,
|
|
105
|
-
TFilterFns,
|
|
106
|
-
TSortingFns,
|
|
107
|
-
TAggregationFns
|
|
108
|
-
> {
|
|
109
|
-
return {
|
|
110
|
-
setColumnPinning: updater =>
|
|
111
|
-
instance.options.onColumnPinningChange?.(
|
|
112
|
-
updater,
|
|
113
|
-
functionalUpdate(updater, instance.getState().columnPinning)
|
|
114
|
-
),
|
|
115
|
-
|
|
116
|
-
resetColumnPinning: () =>
|
|
117
|
-
instance.setColumnPinning(
|
|
118
|
-
instance.options.initialState?.columnPinning ?? {}
|
|
119
|
-
),
|
|
120
|
-
|
|
121
|
-
pinColumn: (columnId, position) => {
|
|
122
|
-
const column = instance.getColumn(columnId)
|
|
123
|
-
|
|
124
|
-
const columnIds = column
|
|
125
|
-
?.getLeafColumns()
|
|
126
|
-
.map(d => d.id)
|
|
127
|
-
.filter(Boolean) as string[]
|
|
128
|
-
|
|
129
|
-
instance.setColumnPinning(old => {
|
|
130
|
-
if (position === 'right') {
|
|
131
|
-
return {
|
|
132
|
-
left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
|
|
133
|
-
right: [
|
|
134
|
-
...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
|
|
135
|
-
...columnIds,
|
|
136
|
-
],
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
if (position === 'left') {
|
|
141
|
-
return {
|
|
142
|
-
left: [
|
|
143
|
-
...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
|
|
144
|
-
...columnIds,
|
|
145
|
-
],
|
|
146
|
-
right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
return {
|
|
151
|
-
left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
|
|
152
|
-
right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
|
|
153
|
-
}
|
|
154
|
-
})
|
|
155
|
-
},
|
|
156
|
-
|
|
157
|
-
getColumnCanPin: columnId => {
|
|
158
|
-
const column = instance.getColumn(columnId)
|
|
159
|
-
|
|
160
|
-
if (!column) {
|
|
161
|
-
throw new Error()
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
const leafColumns = column.getLeafColumns()
|
|
165
|
-
|
|
166
|
-
return leafColumns.some(
|
|
167
|
-
d =>
|
|
168
|
-
d.enablePinning ??
|
|
169
|
-
instance.options.enablePinning ??
|
|
170
|
-
d.defaultCanPin ??
|
|
171
|
-
!!d.accessorFn
|
|
172
|
-
)
|
|
173
|
-
},
|
|
174
|
-
|
|
175
|
-
getColumnIsPinned: columnId => {
|
|
176
|
-
const column = instance.getColumn(columnId)
|
|
177
|
-
|
|
178
|
-
if (!column) {
|
|
179
|
-
throw new Error()
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const leafColumnIds = column.getLeafColumns().map(d => d.id)
|
|
183
|
-
|
|
184
|
-
const { left, right } = instance.getState().columnPinning
|
|
185
|
-
|
|
186
|
-
const isLeft = leafColumnIds.some(d => left?.includes(d))
|
|
187
|
-
const isRight = leafColumnIds.some(d => right?.includes(d))
|
|
188
|
-
|
|
189
|
-
if (isLeft && isRight) {
|
|
190
|
-
return 'both'
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
return isLeft ? 'left' : isRight ? 'right' : false
|
|
194
|
-
},
|
|
195
|
-
|
|
196
|
-
getColumnPinnedIndex: columnId => {
|
|
197
|
-
const position = instance.getColumnIsPinned(columnId)
|
|
198
|
-
|
|
199
|
-
if (position === 'both') {
|
|
200
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
201
|
-
console.warn(
|
|
202
|
-
`Column ${columnId} has leaf columns that are pinned on both sides`
|
|
203
|
-
)
|
|
204
|
-
}
|
|
205
|
-
throw new Error()
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
return position
|
|
209
|
-
? instance.getState().columnPinning?.[position]?.indexOf(columnId) ?? -1
|
|
210
|
-
: 0
|
|
211
|
-
},
|
|
212
|
-
}
|
|
213
|
-
}
|