material-react-table 2.0.6 → 2.2.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.
- package/dist/index.d.ts +13 -4
- package/dist/index.esm.js +2331 -2282
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2362 -2310
- package/dist/index.js.map +1 -1
- package/locales/fr/index.esm.js +1 -1
- package/locales/fr/index.js +1 -1
- package/{dist/types/locales/he.d.ts → locales/he/index.d.ts} +2 -1
- package/locales/he/index.esm.d.ts +3 -0
- package/locales/he/index.esm.js +93 -0
- package/locales/he/index.js +97 -0
- package/locales/he/package.json +6 -0
- package/package.json +24 -24
- package/src/body/MRT_TableBody.tsx +16 -123
- package/src/body/MRT_TableBodyCell.tsx +11 -10
- package/src/body/MRT_TableBodyRow.tsx +9 -5
- package/src/head/MRT_TableHeadCell.tsx +4 -1
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +18 -9
- 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/hooks/useMRT_TableOptions.ts +8 -0
- package/src/inputs/MRT_EditCellTextField.tsx +3 -1
- package/src/inputs/MRT_FilterTextField.tsx +1 -1
- package/src/locales/fr.ts +1 -1
- package/src/table/MRT_Table.tsx +17 -107
- package/dist/types/MaterialReactTable.d.ts +0 -7
- package/dist/types/aggregationFns.d.ts +0 -11
- package/dist/types/body/MRT_TableBody.d.ts +0 -13
- package/dist/types/body/MRT_TableBodyCell.d.ts +0 -15
- package/dist/types/body/MRT_TableBodyCellValue.d.ts +0 -8
- package/dist/types/body/MRT_TableBodyRow.d.ts +0 -18
- package/dist/types/body/MRT_TableBodyRowGrabHandle.d.ts +0 -10
- package/dist/types/body/MRT_TableBodyRowPinButton.d.ts +0 -8
- package/dist/types/body/MRT_TableDetailPanel.d.ts +0 -13
- package/dist/types/body/index.d.ts +0 -7
- package/dist/types/buttons/MRT_ColumnPinningButtons.d.ts +0 -8
- package/dist/types/buttons/MRT_CopyButton.d.ts +0 -8
- package/dist/types/buttons/MRT_EditActionButtons.d.ts +0 -9
- package/dist/types/buttons/MRT_ExpandAllButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ExpandButton.d.ts +0 -8
- package/dist/types/buttons/MRT_GrabHandleButton.d.ts +0 -12
- package/dist/types/buttons/MRT_RowPinButton.d.ts +0 -10
- package/dist/types/buttons/MRT_ShowHideColumnsButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ToggleDensePaddingButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ToggleFiltersButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ToggleFullScreenButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ToggleGlobalFilterButton.d.ts +0 -7
- package/dist/types/buttons/MRT_ToggleRowActionMenuButton.d.ts +0 -9
- package/dist/types/buttons/index.d.ts +0 -13
- package/dist/types/column.utils.d.ts +0 -127
- package/dist/types/filterFns.d.ts +0 -69
- package/dist/types/footer/MRT_TableFooter.d.ts +0 -11
- package/dist/types/footer/MRT_TableFooterCell.d.ts +0 -8
- package/dist/types/footer/MRT_TableFooterRow.d.ts +0 -12
- package/dist/types/footer/index.d.ts +0 -3
- package/dist/types/head/MRT_TableHead.d.ts +0 -11
- package/dist/types/head/MRT_TableHeadCell.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadCellColumnActionsButton.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadCellFilterContainer.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadCellFilterLabel.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadCellGrabHandle.d.ts +0 -10
- package/dist/types/head/MRT_TableHeadCellResizeHandle.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadCellSortLabel.d.ts +0 -8
- package/dist/types/head/MRT_TableHeadRow.d.ts +0 -12
- package/dist/types/head/index.d.ts +0 -9
- package/dist/types/hooks/index.d.ts +0 -4
- package/dist/types/hooks/useMRT_DisplayColumns.d.ts +0 -9
- package/dist/types/hooks/useMRT_Effects.d.ts +0 -2
- package/dist/types/hooks/useMRT_TableInstance.d.ts +0 -2
- package/dist/types/hooks/useMRT_TableOptions.d.ts +0 -22
- package/dist/types/icons.d.ts +0 -36
- package/dist/types/index.d.ts +0 -18
- package/dist/types/inputs/MRT_EditCellTextField.d.ts +0 -8
- package/dist/types/inputs/MRT_FilterCheckbox.d.ts +0 -8
- package/dist/types/inputs/MRT_FilterRangeFields.d.ts +0 -8
- package/dist/types/inputs/MRT_FilterRangeSlider.d.ts +0 -8
- package/dist/types/inputs/MRT_FilterTextField.d.ts +0 -9
- package/dist/types/inputs/MRT_GlobalFilterTextField.d.ts +0 -7
- package/dist/types/inputs/MRT_SelectCheckbox.d.ts +0 -9
- package/dist/types/inputs/index.d.ts +0 -7
- package/dist/types/locales/am.d.ts +0 -2
- package/dist/types/locales/ar.d.ts +0 -2
- package/dist/types/locales/az.d.ts +0 -2
- package/dist/types/locales/bg.d.ts +0 -2
- package/dist/types/locales/cs.d.ts +0 -2
- package/dist/types/locales/da.d.ts +0 -2
- package/dist/types/locales/de.d.ts +0 -2
- package/dist/types/locales/en.d.ts +0 -2
- package/dist/types/locales/es.d.ts +0 -2
- package/dist/types/locales/et.d.ts +0 -2
- package/dist/types/locales/fa.d.ts +0 -2
- package/dist/types/locales/fi.d.ts +0 -2
- package/dist/types/locales/fr.d.ts +0 -2
- package/dist/types/locales/hu.d.ts +0 -2
- package/dist/types/locales/hy.d.ts +0 -2
- package/dist/types/locales/id.d.ts +0 -2
- package/dist/types/locales/it.d.ts +0 -2
- package/dist/types/locales/ja.d.ts +0 -2
- package/dist/types/locales/ko.d.ts +0 -2
- package/dist/types/locales/nl.d.ts +0 -2
- package/dist/types/locales/no.d.ts +0 -2
- package/dist/types/locales/np.d.ts +0 -2
- package/dist/types/locales/pl.d.ts +0 -2
- package/dist/types/locales/pt-BR.d.ts +0 -2
- package/dist/types/locales/pt.d.ts +0 -2
- package/dist/types/locales/ro.d.ts +0 -2
- package/dist/types/locales/ru.d.ts +0 -2
- package/dist/types/locales/sk.d.ts +0 -2
- package/dist/types/locales/sr-Cyrl-RS.d.ts +0 -2
- package/dist/types/locales/sr-Latn-RS.d.ts +0 -2
- package/dist/types/locales/sv.d.ts +0 -2
- package/dist/types/locales/tr.d.ts +0 -2
- package/dist/types/locales/uk.d.ts +0 -2
- package/dist/types/locales/vi.d.ts +0 -2
- package/dist/types/locales/zh-Hans.d.ts +0 -2
- package/dist/types/locales/zh-Hant.d.ts +0 -2
- package/dist/types/menus/MRT_ColumnActionMenu.d.ts +0 -20
- package/dist/types/menus/MRT_FilterOptionMenu.d.ts +0 -13
- package/dist/types/menus/MRT_RowActionMenu.d.ts +0 -12
- package/dist/types/menus/MRT_ShowHideColumnsMenu.d.ts +0 -10
- package/dist/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +0 -12
- package/dist/types/menus/index.d.ts +0 -5
- package/dist/types/modals/MRT_EditRowModal.d.ts +0 -8
- package/dist/types/modals/index.d.ts +0 -1
- package/dist/types/sortingFns.d.ts +0 -12
- package/dist/types/style.utils.d.ts +0 -32
- package/dist/types/table/MRT_Table.d.ts +0 -7
- package/dist/types/table/MRT_TableContainer.d.ts +0 -7
- package/dist/types/table/MRT_TableLoadingOverlay.d.ts +0 -7
- package/dist/types/table/MRT_TablePaper.d.ts +0 -7
- package/dist/types/table/index.d.ts +0 -5
- package/dist/types/toolbar/MRT_BottomToolbar.d.ts +0 -7
- package/dist/types/toolbar/MRT_LinearProgressBar.d.ts +0 -8
- package/dist/types/toolbar/MRT_TablePagination.d.ts +0 -15
- package/dist/types/toolbar/MRT_ToolbarAlertBanner.d.ts +0 -8
- package/dist/types/toolbar/MRT_ToolbarDropZone.d.ts +0 -7
- package/dist/types/toolbar/MRT_ToolbarInternalButtons.d.ts +0 -7
- package/dist/types/toolbar/MRT_TopToolbar.d.ts +0 -6
- package/dist/types/toolbar/index.d.ts +0 -7
- package/dist/types/types.d.ts +0 -854
- package/dist/types/useMaterialReactTable.d.ts +0 -2
|
@@ -19,12 +19,21 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
|
|
|
19
19
|
}: Props<TData>) => {
|
|
20
20
|
const {
|
|
21
21
|
getState,
|
|
22
|
-
options: { columnResizeMode },
|
|
22
|
+
options: { columnResizeDirection, columnResizeMode },
|
|
23
23
|
setColumnSizingInfo,
|
|
24
24
|
} = table;
|
|
25
25
|
const { density } = getState();
|
|
26
26
|
const { column } = header;
|
|
27
27
|
|
|
28
|
+
const mx =
|
|
29
|
+
density === 'compact'
|
|
30
|
+
? '-8px'
|
|
31
|
+
: density === 'comfortable'
|
|
32
|
+
? '-16px'
|
|
33
|
+
: '-24px';
|
|
34
|
+
|
|
35
|
+
const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
|
|
36
|
+
|
|
28
37
|
return (
|
|
29
38
|
<Box
|
|
30
39
|
className="Mui-TableHeadCell-ResizeHandle-Wrapper"
|
|
@@ -40,7 +49,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
|
|
|
40
49
|
style={{
|
|
41
50
|
transform:
|
|
42
51
|
column.getIsResizing() && columnResizeMode === 'onEnd'
|
|
43
|
-
? `translateX(${
|
|
52
|
+
? `translateX(${
|
|
53
|
+
(columnResizeDirection === 'rtl' ? -1 : 1) *
|
|
54
|
+
(getState().columnSizingInfo.deltaOffset ?? 0)
|
|
55
|
+
}px)`
|
|
44
56
|
: undefined,
|
|
45
57
|
}}
|
|
46
58
|
sx={(theme) => ({
|
|
@@ -50,15 +62,12 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
|
|
|
50
62
|
header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
|
|
51
63
|
},
|
|
52
64
|
cursor: 'col-resize',
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
: density === 'comfortable'
|
|
57
|
-
? '-16px'
|
|
58
|
-
: '-24px',
|
|
65
|
+
left: columnResizeDirection === 'rtl' ? lr : undefined,
|
|
66
|
+
ml: columnResizeDirection === 'rtl' ? mx : undefined,
|
|
67
|
+
mr: columnResizeDirection === 'ltr' ? mx : undefined,
|
|
59
68
|
position: 'absolute',
|
|
60
69
|
px: '4px',
|
|
61
|
-
right:
|
|
70
|
+
right: columnResizeDirection === 'ltr' ? lr : undefined,
|
|
62
71
|
})}
|
|
63
72
|
>
|
|
64
73
|
<Divider
|
package/src/hooks/index.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
export * from './useMRT_ColumnVirtualizer';
|
|
1
2
|
export * from './useMRT_DisplayColumns';
|
|
2
3
|
export * from './useMRT_Effects';
|
|
4
|
+
export * from './useMRT_RowVirtualizer';
|
|
5
|
+
export * from './useMRT_Rows';
|
|
3
6
|
export * from './useMRT_TableInstance';
|
|
4
7
|
export * from './useMRT_TableOptions';
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { useCallback, useMemo } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
type Range,
|
|
4
|
+
type Virtualizer,
|
|
5
|
+
useVirtualizer,
|
|
6
|
+
} from '@tanstack/react-virtual';
|
|
7
|
+
import {
|
|
8
|
+
extraIndexRangeExtractor,
|
|
9
|
+
parseFromValuesOrFunc,
|
|
10
|
+
} from '../column.utils';
|
|
11
|
+
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
12
|
+
|
|
13
|
+
export const useMRT_ColumnVirtualizer = <
|
|
14
|
+
TData extends MRT_RowData,
|
|
15
|
+
TScrollElement extends Element | Window = HTMLDivElement,
|
|
16
|
+
TItemElement extends Element = HTMLTableCellElement,
|
|
17
|
+
>(
|
|
18
|
+
table: MRT_TableInstance<TData>,
|
|
19
|
+
):
|
|
20
|
+
| (Virtualizer<TScrollElement, TItemElement> & {
|
|
21
|
+
virtualPaddingLeft?: number;
|
|
22
|
+
virtualPaddingRight?: number;
|
|
23
|
+
})
|
|
24
|
+
| undefined => {
|
|
25
|
+
const {
|
|
26
|
+
getState,
|
|
27
|
+
options: {
|
|
28
|
+
columnVirtualizerInstanceRef,
|
|
29
|
+
columnVirtualizerOptions,
|
|
30
|
+
enableColumnPinning,
|
|
31
|
+
enableColumnVirtualization,
|
|
32
|
+
},
|
|
33
|
+
refs: { tableContainerRef },
|
|
34
|
+
} = table;
|
|
35
|
+
const { columnPinning, columnVisibility, draggingColumn } = getState();
|
|
36
|
+
|
|
37
|
+
const columnVirtualizerProps = parseFromValuesOrFunc(
|
|
38
|
+
columnVirtualizerOptions,
|
|
39
|
+
{
|
|
40
|
+
table,
|
|
41
|
+
},
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
|
|
45
|
+
() =>
|
|
46
|
+
enableColumnVirtualization && enableColumnPinning
|
|
47
|
+
? [
|
|
48
|
+
table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
|
|
49
|
+
table
|
|
50
|
+
.getRightLeafColumns()
|
|
51
|
+
.map(
|
|
52
|
+
(c) =>
|
|
53
|
+
table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
|
|
54
|
+
),
|
|
55
|
+
]
|
|
56
|
+
: [[], []],
|
|
57
|
+
[columnPinning, enableColumnVirtualization, enableColumnPinning],
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
//get first 16 column widths and average them if calc is needed
|
|
61
|
+
const averageColumnWidth = useMemo(() => {
|
|
62
|
+
if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize)
|
|
63
|
+
return 0;
|
|
64
|
+
const columnsWidths =
|
|
65
|
+
table
|
|
66
|
+
.getRowModel()
|
|
67
|
+
.rows[0]?.getCenterVisibleCells()
|
|
68
|
+
?.slice(0, 16)
|
|
69
|
+
?.map((cell) => cell.column.getSize() * 1.2) ?? [];
|
|
70
|
+
return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
|
|
71
|
+
}, [table.getRowModel().rows, columnPinning, columnVisibility]);
|
|
72
|
+
|
|
73
|
+
const draggingColumnIndex = table
|
|
74
|
+
.getVisibleLeafColumns()
|
|
75
|
+
.findIndex((c) => c.id === draggingColumn?.id);
|
|
76
|
+
|
|
77
|
+
const columnVirtualizer = enableColumnVirtualization
|
|
78
|
+
? (useVirtualizer({
|
|
79
|
+
count: table.getVisibleLeafColumns().length,
|
|
80
|
+
estimateSize: () => averageColumnWidth,
|
|
81
|
+
getScrollElement: () => tableContainerRef.current,
|
|
82
|
+
horizontal: true,
|
|
83
|
+
overscan: 3,
|
|
84
|
+
rangeExtractor: useCallback(
|
|
85
|
+
(range: Range) => {
|
|
86
|
+
const newIndexes = extraIndexRangeExtractor(
|
|
87
|
+
range,
|
|
88
|
+
draggingColumnIndex,
|
|
89
|
+
);
|
|
90
|
+
return [
|
|
91
|
+
...new Set([
|
|
92
|
+
...leftPinnedIndexes,
|
|
93
|
+
...newIndexes,
|
|
94
|
+
...rightPinnedIndexes,
|
|
95
|
+
]),
|
|
96
|
+
];
|
|
97
|
+
},
|
|
98
|
+
[leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
|
|
99
|
+
),
|
|
100
|
+
...columnVirtualizerProps,
|
|
101
|
+
}) as unknown as Virtualizer<TScrollElement, TItemElement>)
|
|
102
|
+
: undefined;
|
|
103
|
+
|
|
104
|
+
if (columnVirtualizerInstanceRef && columnVirtualizer) {
|
|
105
|
+
//@ts-ignore
|
|
106
|
+
columnVirtualizerInstanceRef.current = columnVirtualizer;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const virtualColumns = columnVirtualizer
|
|
110
|
+
? columnVirtualizer.getVirtualItems()
|
|
111
|
+
: undefined;
|
|
112
|
+
|
|
113
|
+
if (columnVirtualizer && virtualColumns?.length) {
|
|
114
|
+
// @ts-ignore
|
|
115
|
+
columnVirtualizer.virtualPaddingLeft =
|
|
116
|
+
virtualColumns[leftPinnedIndexes!.length]?.start ?? 0;
|
|
117
|
+
// @ts-ignore
|
|
118
|
+
columnVirtualizer.virtualPaddingRight =
|
|
119
|
+
columnVirtualizer.getTotalSize() -
|
|
120
|
+
(virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes!.length]
|
|
121
|
+
?.end ?? 0);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
return columnVirtualizer as any;
|
|
125
|
+
};
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
type MRT_Row,
|
|
17
17
|
type MRT_RowData,
|
|
18
18
|
} from '../types';
|
|
19
|
+
import { MRT_DefaultDisplayColumn } from '.';
|
|
19
20
|
|
|
20
21
|
interface Params<TData extends MRT_RowData> {
|
|
21
22
|
columnOrder: MRT_ColumnOrderState;
|
|
@@ -217,6 +218,7 @@ function makeSpacerColumn<TData extends MRT_RowData>(
|
|
|
217
218
|
if (order.includes(id)) {
|
|
218
219
|
return {
|
|
219
220
|
...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
|
|
221
|
+
...MRT_DefaultDisplayColumn,
|
|
220
222
|
muiTableBodyCellProps: blankColProps,
|
|
221
223
|
muiTableFooterCellProps: blankColProps,
|
|
222
224
|
muiTableHeadCellProps: blankColProps,
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
type Range,
|
|
4
|
+
type Virtualizer,
|
|
5
|
+
useVirtualizer,
|
|
6
|
+
} from '@tanstack/react-virtual';
|
|
7
|
+
import {
|
|
8
|
+
extraIndexRangeExtractor,
|
|
9
|
+
parseFromValuesOrFunc,
|
|
10
|
+
} from '../column.utils';
|
|
11
|
+
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
12
|
+
|
|
13
|
+
export const useMRT_RowVirtualizer = <
|
|
14
|
+
TData extends MRT_RowData,
|
|
15
|
+
TScrollElement extends Element | Window = HTMLDivElement,
|
|
16
|
+
TItemElement extends Element = HTMLTableRowElement,
|
|
17
|
+
>(
|
|
18
|
+
table: MRT_TableInstance<TData>,
|
|
19
|
+
): Virtualizer<TScrollElement, TItemElement> | undefined => {
|
|
20
|
+
const {
|
|
21
|
+
getRowModel,
|
|
22
|
+
getState,
|
|
23
|
+
options: {
|
|
24
|
+
enableRowVirtualization,
|
|
25
|
+
rowVirtualizerInstanceRef,
|
|
26
|
+
rowVirtualizerOptions,
|
|
27
|
+
},
|
|
28
|
+
refs: { tableContainerRef },
|
|
29
|
+
} = table;
|
|
30
|
+
const { density, draggingRow } = getState();
|
|
31
|
+
|
|
32
|
+
const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
|
|
33
|
+
table,
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
const rowVirtualizer = enableRowVirtualization
|
|
37
|
+
? (useVirtualizer({
|
|
38
|
+
count: getRowModel().rows.length,
|
|
39
|
+
estimateSize: () =>
|
|
40
|
+
density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
|
|
41
|
+
getScrollElement: () => tableContainerRef.current,
|
|
42
|
+
measureElement:
|
|
43
|
+
typeof window !== 'undefined' &&
|
|
44
|
+
navigator.userAgent.indexOf('Firefox') === -1
|
|
45
|
+
? (element) => element?.getBoundingClientRect().height
|
|
46
|
+
: undefined,
|
|
47
|
+
overscan: 4,
|
|
48
|
+
rangeExtractor: useCallback(
|
|
49
|
+
(range: Range) => {
|
|
50
|
+
return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
|
|
51
|
+
},
|
|
52
|
+
[draggingRow],
|
|
53
|
+
),
|
|
54
|
+
...rowVirtualizerProps,
|
|
55
|
+
}) as unknown as Virtualizer<TScrollElement, TItemElement>)
|
|
56
|
+
: undefined;
|
|
57
|
+
|
|
58
|
+
if (rowVirtualizerInstanceRef && rowVirtualizer) {
|
|
59
|
+
//@ts-ignore
|
|
60
|
+
rowVirtualizerInstanceRef.current = rowVirtualizer;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return rowVirtualizer;
|
|
64
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { getCanRankRows } from '../column.utils';
|
|
3
|
+
import { rankGlobalFuzzy } from '../sortingFns';
|
|
4
|
+
import {
|
|
5
|
+
type MRT_Row,
|
|
6
|
+
type MRT_RowData,
|
|
7
|
+
type MRT_TableInstance,
|
|
8
|
+
} from '../types';
|
|
9
|
+
|
|
10
|
+
export const useMRT_Rows = <TData extends MRT_RowData>(
|
|
11
|
+
table: MRT_TableInstance<TData>,
|
|
12
|
+
): MRT_Row<TData>[] => {
|
|
13
|
+
const {
|
|
14
|
+
getBottomRows,
|
|
15
|
+
getCenterRows,
|
|
16
|
+
getPrePaginationRowModel,
|
|
17
|
+
getRowModel,
|
|
18
|
+
getState,
|
|
19
|
+
getTopRows,
|
|
20
|
+
options: {
|
|
21
|
+
enableGlobalFilterRankedResults,
|
|
22
|
+
enablePagination,
|
|
23
|
+
enableRowPinning,
|
|
24
|
+
manualExpanding,
|
|
25
|
+
manualFiltering,
|
|
26
|
+
manualGrouping,
|
|
27
|
+
manualPagination,
|
|
28
|
+
manualSorting,
|
|
29
|
+
rowPinningDisplayMode,
|
|
30
|
+
},
|
|
31
|
+
} = table;
|
|
32
|
+
const { expanded, globalFilter, pagination, rowPinning, sorting } =
|
|
33
|
+
getState();
|
|
34
|
+
|
|
35
|
+
const shouldRankRows = useMemo(
|
|
36
|
+
() =>
|
|
37
|
+
getCanRankRows(table) &&
|
|
38
|
+
!Object.values(sorting).some(Boolean) &&
|
|
39
|
+
globalFilter,
|
|
40
|
+
[
|
|
41
|
+
enableGlobalFilterRankedResults,
|
|
42
|
+
expanded,
|
|
43
|
+
globalFilter,
|
|
44
|
+
manualExpanding,
|
|
45
|
+
manualFiltering,
|
|
46
|
+
manualGrouping,
|
|
47
|
+
manualSorting,
|
|
48
|
+
sorting,
|
|
49
|
+
],
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
const pinnedRowIds = useMemo(
|
|
53
|
+
() =>
|
|
54
|
+
getRowModel()
|
|
55
|
+
.rows.filter((row) => row.getIsPinned())
|
|
56
|
+
.map((r) => r.id),
|
|
57
|
+
[rowPinning, table.getRowModel().rows],
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
const rows = useMemo(() => {
|
|
61
|
+
let rows: MRT_Row<TData>[] = [];
|
|
62
|
+
if (!shouldRankRows) {
|
|
63
|
+
rows =
|
|
64
|
+
!enableRowPinning || rowPinningDisplayMode?.includes('sticky')
|
|
65
|
+
? getRowModel().rows
|
|
66
|
+
: getCenterRows();
|
|
67
|
+
} else {
|
|
68
|
+
rows = getPrePaginationRowModel().rows.sort((a, b) =>
|
|
69
|
+
rankGlobalFuzzy(a, b),
|
|
70
|
+
);
|
|
71
|
+
if (enablePagination && !manualPagination) {
|
|
72
|
+
const start = pagination.pageIndex * pagination.pageSize;
|
|
73
|
+
rows = rows.slice(start, start + pagination.pageSize);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
|
|
77
|
+
rows = [
|
|
78
|
+
...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
|
|
79
|
+
...rows,
|
|
80
|
+
...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
|
|
81
|
+
];
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return rows;
|
|
85
|
+
}, [
|
|
86
|
+
shouldRankRows,
|
|
87
|
+
shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
|
|
88
|
+
pagination.pageIndex,
|
|
89
|
+
pagination.pageSize,
|
|
90
|
+
rowPinning,
|
|
91
|
+
]);
|
|
92
|
+
|
|
93
|
+
return rows;
|
|
94
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
+
import { useTheme } from '@mui/material';
|
|
2
3
|
import { MRT_AggregationFns } from '../aggregationFns';
|
|
3
4
|
import { MRT_FilterFns } from '../filterFns';
|
|
4
5
|
import { MRT_Default_Icons } from '../icons';
|
|
@@ -38,6 +39,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
|
38
39
|
aggregationFns,
|
|
39
40
|
autoResetExpanded = false,
|
|
40
41
|
columnFilterDisplayMode = 'subheader',
|
|
42
|
+
columnResizeDirection,
|
|
41
43
|
columnResizeMode = 'onChange',
|
|
42
44
|
createDisplayMode = 'modal',
|
|
43
45
|
defaultColumn,
|
|
@@ -92,6 +94,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
|
92
94
|
sortingFns,
|
|
93
95
|
...rest
|
|
94
96
|
}: MRT_TableOptions<TData>) => {
|
|
97
|
+
const theme = useTheme();
|
|
95
98
|
const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
|
|
96
99
|
const _localization = useMemo(
|
|
97
100
|
() => ({
|
|
@@ -118,6 +121,10 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
|
118
121
|
[defaultDisplayColumn],
|
|
119
122
|
);
|
|
120
123
|
|
|
124
|
+
if (!columnResizeDirection) {
|
|
125
|
+
columnResizeDirection = theme.direction || 'ltr';
|
|
126
|
+
}
|
|
127
|
+
|
|
121
128
|
layoutMode =
|
|
122
129
|
layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
|
|
123
130
|
if (
|
|
@@ -146,6 +153,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
|
146
153
|
aggregationFns: _aggregationFns,
|
|
147
154
|
autoResetExpanded,
|
|
148
155
|
columnFilterDisplayMode,
|
|
156
|
+
columnResizeDirection,
|
|
149
157
|
columnResizeMode,
|
|
150
158
|
createDisplayMode,
|
|
151
159
|
defaultColumn: _defaultColumn,
|
|
@@ -127,7 +127,9 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
|
|
|
127
127
|
variant="standard"
|
|
128
128
|
{...textFieldProps}
|
|
129
129
|
InputProps={{
|
|
130
|
-
|
|
130
|
+
...(textFieldProps.variant !== 'outlined'
|
|
131
|
+
? { disableUnderline: editDisplayMode === 'table' }
|
|
132
|
+
: {}),
|
|
131
133
|
...textFieldProps.InputProps,
|
|
132
134
|
sx: (theme) => ({
|
|
133
135
|
mb: 0,
|
|
@@ -290,7 +290,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
|
|
|
290
290
|
whiteSpace: 'nowrap',
|
|
291
291
|
},
|
|
292
292
|
},
|
|
293
|
-
InputProps: endAdornment //hack because mui looks for
|
|
293
|
+
InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
|
|
294
294
|
? { endAdornment, startAdornment }
|
|
295
295
|
: { startAdornment },
|
|
296
296
|
fullWidth: true,
|
package/src/locales/fr.ts
CHANGED
|
@@ -51,7 +51,7 @@ export const MRT_Localization_FR: MRT_Localization = {
|
|
|
51
51
|
groupByColumn: 'Grouper par {column}',
|
|
52
52
|
groupedBy: 'Groupé par ',
|
|
53
53
|
hideAll: 'Cacher tout',
|
|
54
|
-
hideColumn: 'Cacher {column}
|
|
54
|
+
hideColumn: 'Cacher colonne {column}',
|
|
55
55
|
max: 'Max',
|
|
56
56
|
min: 'Min',
|
|
57
57
|
move: 'Déplacer',
|
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
|
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions, type Xor } from './types';
|
|
2
|
-
type TableInstanceProp<TData extends MRT_RowData> = {
|
|
3
|
-
table: MRT_TableInstance<TData>;
|
|
4
|
-
};
|
|
5
|
-
type Props<TData extends MRT_RowData> = Xor<TableInstanceProp<TData>, MRT_TableOptions<TData>>;
|
|
6
|
-
export declare const MaterialReactTable: <TData extends MRT_RowData>(props: Props<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export declare const MRT_AggregationFns: {
|
|
2
|
-
sum: import("@tanstack/react-table").AggregationFn<any>;
|
|
3
|
-
min: import("@tanstack/react-table").AggregationFn<any>;
|
|
4
|
-
max: import("@tanstack/react-table").AggregationFn<any>;
|
|
5
|
-
extent: import("@tanstack/react-table").AggregationFn<any>;
|
|
6
|
-
mean: import("@tanstack/react-table").AggregationFn<any>;
|
|
7
|
-
median: import("@tanstack/react-table").AggregationFn<any>;
|
|
8
|
-
unique: import("@tanstack/react-table").AggregationFn<any>;
|
|
9
|
-
uniqueCount: import("@tanstack/react-table").AggregationFn<any>;
|
|
10
|
-
count: import("@tanstack/react-table").AggregationFn<any>;
|
|
11
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
|
|
2
|
-
import { type TableBodyProps } from '@mui/material/TableBody';
|
|
3
|
-
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
4
|
-
interface Props<TData extends MRT_RowData> extends TableBodyProps {
|
|
5
|
-
columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
|
|
6
|
-
table: MRT_TableInstance<TData>;
|
|
7
|
-
virtualColumns?: VirtualItem[];
|
|
8
|
-
virtualPaddingLeft?: number;
|
|
9
|
-
virtualPaddingRight?: number;
|
|
10
|
-
}
|
|
11
|
-
export declare const MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export declare const Memo_MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import { type TableCellProps } from '@mui/material/TableCell';
|
|
3
|
-
import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
4
|
-
interface Props<TData extends MRT_RowData> extends TableCellProps {
|
|
5
|
-
cell: MRT_Cell<TData>;
|
|
6
|
-
measureElement?: (element: HTMLTableCellElement) => void;
|
|
7
|
-
numRows?: number;
|
|
8
|
-
rowIndex: number;
|
|
9
|
-
rowRef: RefObject<HTMLTableRowElement>;
|
|
10
|
-
table: MRT_TableInstance<TData>;
|
|
11
|
-
virtualIndex?: number;
|
|
12
|
-
}
|
|
13
|
-
export declare const MRT_TableBodyCell: <TData extends MRT_RowData>({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare const Memo_MRT_TableBodyCell: <TData extends MRT_RowData>({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
3
|
-
interface Props<TData extends MRT_RowData> {
|
|
4
|
-
cell: MRT_Cell<TData>;
|
|
5
|
-
table: MRT_TableInstance<TData>;
|
|
6
|
-
}
|
|
7
|
-
export declare const MRT_TableBodyCellValue: <TData extends MRT_RowData>({ cell, table, }: Props<TData>) => ReactNode;
|
|
8
|
-
export {};
|