material-react-table 2.1.0 → 2.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +14 -4
- package/dist/index.esm.js +2360 -2324
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2350 -2311
- package/dist/index.js.map +1 -1
- package/package.json +19 -19
- package/src/body/MRT_TableBody.tsx +30 -125
- package/src/body/MRT_TableBodyCell.tsx +3 -3
- package/src/body/MRT_TableBodyRow.tsx +9 -5
- package/src/hooks/index.ts +3 -0
- package/src/hooks/useMRT_ColumnVirtualizer.ts +125 -0
- package/src/hooks/useMRT_DisplayColumns.tsx +2 -0
- package/src/hooks/useMRT_RowVirtualizer.ts +64 -0
- package/src/hooks/useMRT_Rows.ts +94 -0
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +4 -5
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -1
- package/src/table/MRT_Table.tsx +17 -107
- package/src/types.ts +1 -0
@@ -40,14 +40,13 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
40
40
|
enableHiding,
|
41
41
|
localization,
|
42
42
|
},
|
43
|
-
toggleAllColumnsVisible,
|
44
43
|
} = table;
|
45
44
|
const { columnOrder, columnPinning, density } = getState();
|
46
45
|
|
47
|
-
const
|
46
|
+
const handleToggleAllColumns = (value?: boolean) => {
|
48
47
|
getAllLeafColumns()
|
49
48
|
.filter((col) => col.columnDef.enableHiding !== false)
|
50
|
-
.forEach((col) => col.toggleVisibility(
|
49
|
+
.forEach((col) => col.toggleVisibility(value));
|
51
50
|
};
|
52
51
|
|
53
52
|
const allColumns = useMemo(() => {
|
@@ -99,7 +98,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
99
98
|
{enableHiding && (
|
100
99
|
<Button
|
101
100
|
disabled={!getIsSomeColumnsVisible()}
|
102
|
-
onClick={
|
101
|
+
onClick={() => handleToggleAllColumns(false)}
|
103
102
|
>
|
104
103
|
{localization.hideAll}
|
105
104
|
</Button>
|
@@ -126,7 +125,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
126
125
|
{enableHiding && (
|
127
126
|
<Button
|
128
127
|
disabled={getIsAllColumnsVisible()}
|
129
|
-
onClick={() =>
|
128
|
+
onClick={() => handleToggleAllColumns(true)}
|
130
129
|
>
|
131
130
|
{localization.showAll}
|
132
131
|
</Button>
|
package/src/table/MRT_Table.tsx
CHANGED
@@ -1,17 +1,10 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
type Range,
|
4
|
-
type Virtualizer,
|
5
|
-
useVirtualizer,
|
6
|
-
} from '@tanstack/react-virtual';
|
1
|
+
import { useMemo } from 'react';
|
7
2
|
import Table, { type TableProps } from '@mui/material/Table';
|
8
3
|
import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
|
9
|
-
import {
|
10
|
-
extraIndexRangeExtractor,
|
11
|
-
parseFromValuesOrFunc,
|
12
|
-
} from '../column.utils';
|
4
|
+
import { parseFromValuesOrFunc } from '../column.utils';
|
13
5
|
import { MRT_TableFooter } from '../footer/MRT_TableFooter';
|
14
6
|
import { MRT_TableHead } from '../head/MRT_TableHead';
|
7
|
+
import { useMRT_ColumnVirtualizer } from '../hooks/useMRT_ColumnVirtualizer';
|
15
8
|
import { parseCSSVarId } from '../style.utils';
|
16
9
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
17
10
|
|
@@ -27,11 +20,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
27
20
|
getFlatHeaders,
|
28
21
|
getState,
|
29
22
|
options: {
|
30
|
-
columnVirtualizerInstanceRef,
|
31
|
-
columnVirtualizerOptions,
|
32
23
|
columns,
|
33
|
-
enableColumnPinning,
|
34
|
-
enableColumnVirtualization,
|
35
24
|
enableStickyHeader,
|
36
25
|
enableTableFooter,
|
37
26
|
enableTableHead,
|
@@ -39,27 +28,15 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
39
28
|
memoMode,
|
40
29
|
muiTableProps,
|
41
30
|
},
|
42
|
-
refs: { tableContainerRef },
|
43
31
|
} = table;
|
44
|
-
const {
|
45
|
-
|
46
|
-
columnSizing,
|
47
|
-
columnSizingInfo,
|
48
|
-
columnVisibility,
|
49
|
-
draggingColumn,
|
50
|
-
isFullScreen,
|
51
|
-
} = getState();
|
32
|
+
const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
|
33
|
+
getState();
|
52
34
|
|
53
35
|
const tableProps = {
|
54
36
|
...parseFromValuesOrFunc(muiTableProps, { table }),
|
55
37
|
...rest,
|
56
38
|
};
|
57
39
|
|
58
|
-
const columnVirtualizerProps = parseFromValuesOrFunc(
|
59
|
-
columnVirtualizerOptions,
|
60
|
-
{ table },
|
61
|
-
);
|
62
|
-
|
63
40
|
const columnSizeVars = useMemo(() => {
|
64
41
|
const headers = getFlatHeaders();
|
65
42
|
const colSizes: { [key: string]: number } = {};
|
@@ -74,93 +51,26 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
74
51
|
return colSizes;
|
75
52
|
}, [columns, columnSizing, columnSizingInfo, columnVisibility]);
|
76
53
|
|
77
|
-
|
78
|
-
const averageColumnWidth = useMemo(() => {
|
79
|
-
if (!enableColumnVirtualization) return 0;
|
80
|
-
const columnsWidths =
|
81
|
-
table
|
82
|
-
.getRowModel()
|
83
|
-
.rows[0]?.getCenterVisibleCells()
|
84
|
-
?.slice(0, 16)
|
85
|
-
?.map((cell) => cell.column.getSize() * 1.2) ?? [];
|
86
|
-
return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
|
87
|
-
}, [table.getRowModel().rows, columnPinning, columnVisibility]);
|
88
|
-
|
89
|
-
const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
|
90
|
-
() =>
|
91
|
-
enableColumnVirtualization && enableColumnPinning
|
92
|
-
? [
|
93
|
-
table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
|
94
|
-
table
|
95
|
-
.getRightLeafColumns()
|
96
|
-
.map(
|
97
|
-
(c) =>
|
98
|
-
table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
|
99
|
-
),
|
100
|
-
]
|
101
|
-
: [[], []],
|
102
|
-
[columnPinning, enableColumnVirtualization, enableColumnPinning],
|
103
|
-
);
|
104
|
-
|
105
|
-
const draggingColumnIndex = table
|
106
|
-
.getVisibleLeafColumns()
|
107
|
-
.findIndex((c) => c.id === draggingColumn?.id);
|
54
|
+
const columnVirtualizer = useMRT_ColumnVirtualizer(table);
|
108
55
|
|
109
|
-
const columnVirtualizer
|
110
|
-
| Virtualizer<HTMLDivElement, HTMLTableCellElement>
|
111
|
-
| undefined = enableColumnVirtualization
|
112
|
-
? useVirtualizer({
|
113
|
-
count: table.getVisibleLeafColumns().length,
|
114
|
-
estimateSize: () => averageColumnWidth,
|
115
|
-
getScrollElement: () => tableContainerRef.current,
|
116
|
-
horizontal: true,
|
117
|
-
overscan: 3,
|
118
|
-
rangeExtractor: useCallback(
|
119
|
-
(range: Range) => {
|
120
|
-
const newIndexs = extraIndexRangeExtractor(
|
121
|
-
range,
|
122
|
-
draggingColumnIndex,
|
123
|
-
);
|
124
|
-
return [
|
125
|
-
...new Set([
|
126
|
-
...leftPinnedIndexes,
|
127
|
-
...newIndexs,
|
128
|
-
...rightPinnedIndexes,
|
129
|
-
]),
|
130
|
-
];
|
131
|
-
},
|
132
|
-
[leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
|
133
|
-
),
|
134
|
-
...columnVirtualizerProps,
|
135
|
-
})
|
136
|
-
: undefined;
|
137
|
-
|
138
|
-
if (columnVirtualizerInstanceRef && columnVirtualizer) {
|
139
|
-
columnVirtualizerInstanceRef.current = columnVirtualizer;
|
140
|
-
}
|
56
|
+
const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
|
141
57
|
|
142
58
|
const virtualColumns = columnVirtualizer
|
143
59
|
? columnVirtualizer.getVirtualItems()
|
144
60
|
: undefined;
|
145
61
|
|
146
|
-
|
147
|
-
let virtualPaddingRight: number | undefined;
|
148
|
-
|
149
|
-
if (columnVirtualizer && virtualColumns?.length) {
|
150
|
-
virtualPaddingLeft = virtualColumns[leftPinnedIndexes.length]?.start ?? 0;
|
151
|
-
virtualPaddingRight =
|
152
|
-
columnVirtualizer.getTotalSize() -
|
153
|
-
(virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]
|
154
|
-
?.end ?? 0);
|
155
|
-
}
|
156
|
-
|
157
|
-
const props = {
|
62
|
+
const commonTableGroupProps = {
|
158
63
|
table,
|
159
64
|
virtualColumns,
|
160
65
|
virtualPaddingLeft,
|
161
66
|
virtualPaddingRight,
|
162
67
|
};
|
163
68
|
|
69
|
+
const commonTableBodyProps = {
|
70
|
+
...commonTableGroupProps,
|
71
|
+
columnVirtualizer,
|
72
|
+
};
|
73
|
+
|
164
74
|
return (
|
165
75
|
<Table
|
166
76
|
stickyHeader={enableStickyHeader || isFullScreen}
|
@@ -172,13 +82,13 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
172
82
|
...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
|
173
83
|
})}
|
174
84
|
>
|
175
|
-
{enableTableHead && <MRT_TableHead {...
|
85
|
+
{enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
|
176
86
|
{memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
|
177
|
-
<Memo_MRT_TableBody
|
87
|
+
<Memo_MRT_TableBody {...commonTableBodyProps} />
|
178
88
|
) : (
|
179
|
-
<MRT_TableBody
|
89
|
+
<MRT_TableBody {...commonTableBodyProps} />
|
180
90
|
)}
|
181
|
-
{enableTableFooter && <MRT_TableFooter {...
|
91
|
+
{enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
|
182
92
|
</Table>
|
183
93
|
);
|
184
94
|
};
|
package/src/types.ts
CHANGED
@@ -579,6 +579,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
|
|
579
579
|
table: MRT_TableInstance<TData>;
|
580
580
|
}) => ReactNode[];
|
581
581
|
sortingFn?: MRT_SortingFn<TData>;
|
582
|
+
visibleInShowHideMenu?: boolean;
|
582
583
|
};
|
583
584
|
|
584
585
|
export type MRT_DisplayColumnDef<
|