material-react-table 2.0.0-beta.3 → 2.0.0-beta.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.js +415 -408
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/body/MRT_TableBody.d.ts +4 -3
- package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +5 -5
- package/dist/cjs/types/body/MRT_TableBodyRowGrabHandle.d.ts +3 -2
- package/dist/cjs/types/body/MRT_TableBodyRowPinButton.d.ts +3 -2
- package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts +3 -2
- package/dist/cjs/types/buttons/MRT_ColumnPinningButtons.d.ts +3 -2
- package/dist/cjs/types/buttons/MRT_CopyButton.d.ts +3 -4
- package/dist/cjs/types/buttons/MRT_EditActionButtons.d.ts +3 -2
- package/dist/cjs/types/buttons/MRT_ExpandAllButton.d.ts +3 -2
- package/dist/cjs/types/buttons/MRT_ExpandButton.d.ts +2 -1
- package/dist/cjs/types/buttons/MRT_GrabHandleButton.d.ts +2 -2
- package/dist/cjs/types/buttons/MRT_RowPinButton.d.ts +3 -2
- package/dist/cjs/types/buttons/MRT_ToggleRowActionMenuButton.d.ts +3 -2
- package/dist/cjs/types/footer/MRT_TableFooter.d.ts +3 -2
- package/dist/cjs/types/footer/MRT_TableFooterCell.d.ts +3 -2
- package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHead.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCell.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellColumnActionsButton.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellFilterContainer.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellFilterLabel.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellGrabHandle.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellResizeHandle.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadCellSortLabel.d.ts +3 -2
- package/dist/cjs/types/head/MRT_TableHeadRow.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_EditCellTextField.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_FilterCheckbox.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_FilterRangeFields.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_FilterRangeSlider.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_FilterTextField.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_GlobalFilterTextField.d.ts +3 -2
- package/dist/cjs/types/inputs/MRT_SelectCheckbox.d.ts +3 -2
- package/dist/cjs/types/menus/MRT_ColumnActionMenu.d.ts +3 -2
- package/dist/cjs/types/menus/MRT_FilterOptionMenu.d.ts +3 -2
- package/dist/cjs/types/menus/MRT_RowActionMenu.d.ts +3 -2
- package/dist/cjs/types/menus/MRT_ShowHideColumnsMenu.d.ts +3 -2
- package/dist/cjs/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -2
- package/dist/cjs/types/modals/MRT_EditRowModal.d.ts +3 -2
- package/dist/cjs/types/table/MRT_Table.d.ts +3 -2
- package/dist/cjs/types/table/MRT_TableContainer.d.ts +3 -2
- package/dist/cjs/types/table/MRT_TableLoadingOverlay.d.ts +7 -0
- package/dist/cjs/types/table/MRT_TablePaper.d.ts +3 -2
- package/dist/cjs/types/table/index.d.ts +1 -0
- package/dist/cjs/types/toolbar/MRT_BottomToolbar.d.ts +3 -2
- package/dist/cjs/types/toolbar/MRT_LinearProgressBar.d.ts +3 -2
- package/dist/cjs/types/toolbar/MRT_TablePagination.d.ts +6 -2
- package/dist/cjs/types/toolbar/MRT_ToolbarAlertBanner.d.ts +3 -2
- package/dist/cjs/types/toolbar/MRT_ToolbarDropZone.d.ts +3 -2
- package/dist/cjs/types/toolbar/MRT_ToolbarInternalButtons.d.ts +3 -2
- package/dist/cjs/types/toolbar/MRT_TopToolbar.d.ts +1 -2
- package/dist/cjs/types/types.d.ts +3 -3
- package/dist/esm/material-react-table.esm.js +413 -406
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/body/MRT_TableBody.d.ts +4 -3
- package/dist/esm/types/body/MRT_TableBodyCell.d.ts +5 -5
- package/dist/esm/types/body/MRT_TableBodyRowGrabHandle.d.ts +3 -2
- package/dist/esm/types/body/MRT_TableBodyRowPinButton.d.ts +3 -2
- package/dist/esm/types/body/MRT_TableDetailPanel.d.ts +3 -2
- package/dist/esm/types/buttons/MRT_ColumnPinningButtons.d.ts +3 -2
- package/dist/esm/types/buttons/MRT_CopyButton.d.ts +3 -4
- package/dist/esm/types/buttons/MRT_EditActionButtons.d.ts +3 -2
- package/dist/esm/types/buttons/MRT_ExpandAllButton.d.ts +3 -2
- package/dist/esm/types/buttons/MRT_ExpandButton.d.ts +2 -1
- package/dist/esm/types/buttons/MRT_GrabHandleButton.d.ts +2 -2
- package/dist/esm/types/buttons/MRT_RowPinButton.d.ts +3 -2
- package/dist/esm/types/buttons/MRT_ToggleRowActionMenuButton.d.ts +3 -2
- package/dist/esm/types/footer/MRT_TableFooter.d.ts +3 -2
- package/dist/esm/types/footer/MRT_TableFooterCell.d.ts +3 -2
- package/dist/esm/types/footer/MRT_TableFooterRow.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHead.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCell.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellColumnActionsButton.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellFilterContainer.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellFilterLabel.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellGrabHandle.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellResizeHandle.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadCellSortLabel.d.ts +3 -2
- package/dist/esm/types/head/MRT_TableHeadRow.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_EditCellTextField.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_FilterCheckbox.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_FilterRangeFields.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_FilterRangeSlider.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_FilterTextField.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_GlobalFilterTextField.d.ts +3 -2
- package/dist/esm/types/inputs/MRT_SelectCheckbox.d.ts +3 -2
- package/dist/esm/types/menus/MRT_ColumnActionMenu.d.ts +3 -2
- package/dist/esm/types/menus/MRT_FilterOptionMenu.d.ts +3 -2
- package/dist/esm/types/menus/MRT_RowActionMenu.d.ts +3 -2
- package/dist/esm/types/menus/MRT_ShowHideColumnsMenu.d.ts +3 -2
- package/dist/esm/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -2
- package/dist/esm/types/modals/MRT_EditRowModal.d.ts +3 -2
- package/dist/esm/types/table/MRT_Table.d.ts +3 -2
- package/dist/esm/types/table/MRT_TableContainer.d.ts +3 -2
- package/dist/esm/types/table/MRT_TableLoadingOverlay.d.ts +7 -0
- package/dist/esm/types/table/MRT_TablePaper.d.ts +3 -2
- package/dist/esm/types/table/index.d.ts +1 -0
- package/dist/esm/types/toolbar/MRT_BottomToolbar.d.ts +3 -2
- package/dist/esm/types/toolbar/MRT_LinearProgressBar.d.ts +3 -2
- package/dist/esm/types/toolbar/MRT_TablePagination.d.ts +6 -2
- package/dist/esm/types/toolbar/MRT_ToolbarAlertBanner.d.ts +3 -2
- package/dist/esm/types/toolbar/MRT_ToolbarDropZone.d.ts +3 -2
- package/dist/esm/types/toolbar/MRT_ToolbarInternalButtons.d.ts +3 -2
- package/dist/esm/types/toolbar/MRT_TopToolbar.d.ts +1 -2
- package/dist/esm/types/types.d.ts +3 -3
- package/dist/index.d.ts +130 -119
- package/package.json +1 -1
- package/src/body/MRT_TableBody.tsx +8 -4
- package/src/body/MRT_TableBodyCell.tsx +60 -61
- package/src/body/MRT_TableBodyRow.tsx +3 -3
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +10 -5
- package/src/body/MRT_TableBodyRowPinButton.tsx +12 -5
- package/src/body/MRT_TableDetailPanel.tsx +11 -7
- package/src/buttons/MRT_ColumnPinningButtons.tsx +12 -3
- package/src/buttons/MRT_CopyButton.tsx +6 -8
- package/src/buttons/MRT_EditActionButtons.tsx +9 -3
- package/src/buttons/MRT_ExpandAllButton.tsx +9 -5
- package/src/buttons/MRT_ExpandButton.tsx +2 -2
- package/src/buttons/MRT_GrabHandleButton.tsx +8 -5
- package/src/buttons/MRT_RowPinButton.tsx +8 -4
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +7 -3
- package/src/column.utils.ts +1 -1
- package/src/footer/MRT_TableFooter.tsx +9 -5
- package/src/footer/MRT_TableFooterCell.tsx +12 -12
- package/src/footer/MRT_TableFooterRow.tsx +10 -6
- package/src/head/MRT_TableHead.tsx +8 -4
- package/src/head/MRT_TableHeadCell.tsx +93 -84
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +5 -3
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +4 -2
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +8 -4
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +4 -1
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +7 -4
- package/src/head/MRT_TableHeadCellSortLabel.tsx +28 -12
- package/src/head/MRT_TableHeadRow.tsx +10 -6
- package/src/hooks/useMRT_DisplayColumns.tsx +1 -0
- package/src/inputs/MRT_EditCellTextField.tsx +15 -1
- package/src/inputs/MRT_FilterCheckbox.tsx +4 -2
- package/src/inputs/MRT_FilterRangeFields.tsx +13 -3
- package/src/inputs/MRT_FilterRangeSlider.tsx +4 -2
- package/src/inputs/MRT_FilterTextField.tsx +3 -1
- package/src/inputs/MRT_GlobalFilterTextField.tsx +9 -5
- package/src/inputs/MRT_SelectCheckbox.tsx +8 -4
- package/src/menus/MRT_ColumnActionMenu.tsx +4 -2
- package/src/menus/MRT_FilterOptionMenu.tsx +4 -2
- package/src/menus/MRT_RowActionMenu.tsx +4 -2
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +4 -2
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +6 -3
- package/src/modals/MRT_EditRowModal.tsx +5 -3
- package/src/table/MRT_Table.tsx +25 -31
- package/src/table/MRT_TableContainer.tsx +15 -44
- package/src/table/MRT_TableLoadingOverlay.tsx +53 -0
- package/src/table/MRT_TablePaper.tsx +7 -3
- package/src/table/index.ts +1 -0
- package/src/toolbar/MRT_BottomToolbar.tsx +9 -7
- package/src/toolbar/MRT_LinearProgressBar.tsx +14 -8
- package/src/toolbar/MRT_TablePagination.tsx +18 -8
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +9 -5
- package/src/toolbar/MRT_ToolbarDropZone.tsx +6 -2
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +8 -4
- package/src/toolbar/MRT_TopToolbar.tsx +5 -8
- package/src/types.ts +5 -5
package/src/table/MRT_Table.tsx
CHANGED
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
type Virtualizer,
|
5
5
|
useVirtualizer,
|
6
6
|
} from '@tanstack/react-virtual';
|
7
|
-
import Table from '@mui/material/Table';
|
7
|
+
import Table, { type TableProps } from '@mui/material/Table';
|
8
8
|
import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
|
9
9
|
import {
|
10
10
|
extraIndexRangeExtractor,
|
@@ -15,12 +15,13 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
|
|
15
15
|
import { MRT_TableHead } from '../head/MRT_TableHead';
|
16
16
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
17
17
|
|
18
|
-
interface Props<TData extends MRT_RowData> {
|
18
|
+
interface Props<TData extends MRT_RowData> extends TableProps {
|
19
19
|
table: MRT_TableInstance<TData>;
|
20
20
|
}
|
21
21
|
|
22
22
|
export const MRT_Table = <TData extends MRT_RowData>({
|
23
23
|
table,
|
24
|
+
...rest
|
24
25
|
}: Props<TData>) => {
|
25
26
|
const {
|
26
27
|
getFlatHeaders,
|
@@ -30,7 +31,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
30
31
|
columnVirtualizerOptions,
|
31
32
|
columns,
|
32
33
|
enableColumnPinning,
|
33
|
-
enableColumnResizing,
|
34
34
|
enableColumnVirtualization,
|
35
35
|
enableStickyHeader,
|
36
36
|
enableTableFooter,
|
@@ -50,7 +50,10 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
50
50
|
isFullScreen,
|
51
51
|
} = getState();
|
52
52
|
|
53
|
-
const tableProps =
|
53
|
+
const tableProps = {
|
54
|
+
...parseFromValuesOrFunc(muiTableProps, { table }),
|
55
|
+
...rest,
|
56
|
+
};
|
54
57
|
|
55
58
|
const columnVirtualizerProps = parseFromValuesOrFunc(
|
56
59
|
columnVirtualizerOptions,
|
@@ -157,32 +160,23 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
157
160
|
};
|
158
161
|
|
159
162
|
return (
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
columnVirtualizer={columnVirtualizer}
|
179
|
-
{...props}
|
180
|
-
/>
|
181
|
-
) : (
|
182
|
-
<MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
|
183
|
-
)}
|
184
|
-
{enableTableFooter && <MRT_TableFooter {...props} />}
|
185
|
-
</Table>
|
186
|
-
</>
|
163
|
+
<Table
|
164
|
+
stickyHeader={enableStickyHeader || isFullScreen}
|
165
|
+
{...tableProps}
|
166
|
+
style={{ ...columnSizeVars, ...tableProps?.style }}
|
167
|
+
sx={(theme) => ({
|
168
|
+
borderCollapse: 'separate',
|
169
|
+
display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
|
170
|
+
...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
|
171
|
+
})}
|
172
|
+
>
|
173
|
+
{enableTableHead && <MRT_TableHead {...props} />}
|
174
|
+
{memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
|
175
|
+
<Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
|
176
|
+
) : (
|
177
|
+
<MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
|
178
|
+
)}
|
179
|
+
{enableTableFooter && <MRT_TableFooter {...props} />}
|
180
|
+
</Table>
|
187
181
|
);
|
188
182
|
};
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { useEffect, useLayoutEffect, useState } from 'react';
|
2
|
-
import
|
3
|
-
|
4
|
-
|
5
|
-
import { alpha, lighten } from '@mui/material/styles';
|
2
|
+
import TableContainer, {
|
3
|
+
type TableContainerProps,
|
4
|
+
} from '@mui/material/TableContainer';
|
6
5
|
import { MRT_Table } from './MRT_Table';
|
6
|
+
import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
|
7
7
|
import { parseFromValuesOrFunc } from '../column.utils';
|
8
8
|
import { MRT_EditRowModal } from '../modals';
|
9
9
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
@@ -11,12 +11,13 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
11
11
|
const useIsomorphicLayoutEffect =
|
12
12
|
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
13
13
|
|
14
|
-
interface Props<TData extends MRT_RowData> {
|
14
|
+
interface Props<TData extends MRT_RowData> extends TableContainerProps {
|
15
15
|
table: MRT_TableInstance<TData>;
|
16
16
|
}
|
17
17
|
|
18
18
|
export const MRT_TableContainer = <TData extends MRT_RowData>({
|
19
19
|
table,
|
20
|
+
...rest
|
20
21
|
}: Props<TData>) => {
|
21
22
|
const {
|
22
23
|
getState,
|
@@ -24,8 +25,6 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
24
25
|
createDisplayMode,
|
25
26
|
editDisplayMode,
|
26
27
|
enableStickyHeader,
|
27
|
-
localization,
|
28
|
-
muiCircularProgressProps,
|
29
28
|
muiTableContainerProps,
|
30
29
|
},
|
31
30
|
refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
|
@@ -39,18 +38,16 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
39
38
|
} = getState();
|
40
39
|
|
41
40
|
const loading =
|
42
|
-
(isLoading || showLoadingOverlay)
|
41
|
+
showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
43
42
|
|
44
43
|
const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
|
45
44
|
|
46
|
-
const tableContainerProps =
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
{ table },
|
53
|
-
);
|
45
|
+
const tableContainerProps = {
|
46
|
+
...parseFromValuesOrFunc(muiTableContainerProps, {
|
47
|
+
table,
|
48
|
+
}),
|
49
|
+
...rest,
|
50
|
+
};
|
54
51
|
|
55
52
|
useIsomorphicLayoutEffect(() => {
|
56
53
|
const topToolbarHeight =
|
@@ -72,7 +69,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
72
69
|
return (
|
73
70
|
<TableContainer
|
74
71
|
aria-busy={loading}
|
75
|
-
aria-describedby=
|
72
|
+
aria-describedby={loading ? 'mrt-progress' : undefined}
|
76
73
|
{...tableContainerProps}
|
77
74
|
ref={(node: HTMLDivElement) => {
|
78
75
|
if (node) {
|
@@ -99,33 +96,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
99
96
|
...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
|
100
97
|
})}
|
101
98
|
>
|
102
|
-
{loading ?
|
103
|
-
<Box
|
104
|
-
sx={(theme) => ({
|
105
|
-
alignItems: 'center',
|
106
|
-
backgroundColor: alpha(
|
107
|
-
lighten(theme.palette.background.paper, 0.05),
|
108
|
-
0.5,
|
109
|
-
),
|
110
|
-
bottom: 0,
|
111
|
-
display: 'flex',
|
112
|
-
justifyContent: 'center',
|
113
|
-
left: 0,
|
114
|
-
maxHeight: '100vh',
|
115
|
-
position: 'absolute',
|
116
|
-
right: 0,
|
117
|
-
top: 0,
|
118
|
-
width: '100%',
|
119
|
-
zIndex: 2,
|
120
|
-
})}
|
121
|
-
>
|
122
|
-
<CircularProgress
|
123
|
-
aria-label={localization.noRecordsToDisplay}
|
124
|
-
id="mrt-progress"
|
125
|
-
{...circularProgressProps}
|
126
|
-
/>
|
127
|
-
</Box>
|
128
|
-
) : null}
|
99
|
+
{loading ? <MRT_TableLoadingOverlay table={table} /> : null}
|
129
100
|
<MRT_Table table={table} />
|
130
101
|
{(createModalOpen || editModalOpen) && (
|
131
102
|
<MRT_EditRowModal open table={table} />
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import Box from '@mui/material/Box';
|
2
|
+
import CircularProgress, {
|
3
|
+
type CircularProgressProps,
|
4
|
+
} from '@mui/material/CircularProgress';
|
5
|
+
import { alpha, lighten } from '@mui/material/styles';
|
6
|
+
import { parseFromValuesOrFunc } from '../column.utils';
|
7
|
+
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
8
|
+
|
9
|
+
interface Props<TData extends MRT_RowData> extends CircularProgressProps {
|
10
|
+
table: MRT_TableInstance<TData>;
|
11
|
+
}
|
12
|
+
|
13
|
+
export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
|
14
|
+
table,
|
15
|
+
...rest
|
16
|
+
}: Props<TData>) => {
|
17
|
+
const {
|
18
|
+
options: { localization, muiCircularProgressProps },
|
19
|
+
} = table;
|
20
|
+
|
21
|
+
const circularProgressProps = {
|
22
|
+
...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
|
23
|
+
...rest,
|
24
|
+
};
|
25
|
+
|
26
|
+
return (
|
27
|
+
<Box
|
28
|
+
sx={(theme) => ({
|
29
|
+
alignItems: 'center',
|
30
|
+
backgroundColor: alpha(
|
31
|
+
lighten(theme.palette.background.paper, 0.05),
|
32
|
+
0.5,
|
33
|
+
),
|
34
|
+
bottom: 0,
|
35
|
+
display: 'flex',
|
36
|
+
justifyContent: 'center',
|
37
|
+
left: 0,
|
38
|
+
maxHeight: '100vh',
|
39
|
+
position: 'absolute',
|
40
|
+
right: 0,
|
41
|
+
top: 0,
|
42
|
+
width: '100%',
|
43
|
+
zIndex: 2,
|
44
|
+
})}
|
45
|
+
>
|
46
|
+
<CircularProgress
|
47
|
+
aria-label={localization.noRecordsToDisplay}
|
48
|
+
id="mrt-progress"
|
49
|
+
{...circularProgressProps}
|
50
|
+
/>
|
51
|
+
</Box>
|
52
|
+
);
|
53
|
+
};
|
@@ -1,16 +1,17 @@
|
|
1
|
-
import Paper from '@mui/material/Paper';
|
1
|
+
import Paper, { type PaperProps } from '@mui/material/Paper';
|
2
2
|
import { MRT_TableContainer } from './MRT_TableContainer';
|
3
3
|
import { parseFromValuesOrFunc } from '../column.utils';
|
4
4
|
import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
|
5
5
|
import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
|
6
6
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
7
7
|
|
8
|
-
interface Props<TData extends MRT_RowData> {
|
8
|
+
interface Props<TData extends MRT_RowData> extends PaperProps {
|
9
9
|
table: MRT_TableInstance<TData>;
|
10
10
|
}
|
11
11
|
|
12
12
|
export const MRT_TablePaper = <TData extends MRT_RowData>({
|
13
13
|
table,
|
14
|
+
...rest
|
14
15
|
}: Props<TData>) => {
|
15
16
|
const {
|
16
17
|
getState,
|
@@ -25,7 +26,10 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
|
|
25
26
|
} = table;
|
26
27
|
const { isFullScreen } = getState();
|
27
28
|
|
28
|
-
const tablePaperProps =
|
29
|
+
const tablePaperProps = {
|
30
|
+
...parseFromValuesOrFunc(muiTablePaperProps, { table }),
|
31
|
+
...rest,
|
32
|
+
};
|
29
33
|
|
30
34
|
return (
|
31
35
|
<Paper
|
package/src/table/index.ts
CHANGED
@@ -1,5 +1,4 @@
|
|
1
|
-
import Box from '@mui/material/Box';
|
2
|
-
import Toolbar from '@mui/material/Toolbar';
|
1
|
+
import Box, { type BoxProps } from '@mui/material/Box';
|
3
2
|
import { alpha } from '@mui/material/styles';
|
4
3
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
5
4
|
import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
|
@@ -10,12 +9,13 @@ import { commonToolbarStyles } from './MRT_TopToolbar';
|
|
10
9
|
import { parseFromValuesOrFunc } from '../column.utils';
|
11
10
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
12
11
|
|
13
|
-
interface Props<TData extends MRT_RowData> {
|
12
|
+
interface Props<TData extends MRT_RowData> extends BoxProps {
|
14
13
|
table: MRT_TableInstance<TData>;
|
15
14
|
}
|
16
15
|
|
17
16
|
export const MRT_BottomToolbar = <TData extends MRT_RowData>({
|
18
17
|
table,
|
18
|
+
...rest
|
19
19
|
}: Props<TData>) => {
|
20
20
|
const {
|
21
21
|
getState,
|
@@ -33,13 +33,15 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
|
|
33
33
|
|
34
34
|
const isMobile = useMediaQuery('(max-width:720px)');
|
35
35
|
|
36
|
-
const toolbarProps =
|
36
|
+
const toolbarProps = {
|
37
|
+
...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
|
38
|
+
...rest,
|
39
|
+
};
|
37
40
|
|
38
41
|
const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
|
39
42
|
|
40
43
|
return (
|
41
|
-
<
|
42
|
-
variant="dense"
|
44
|
+
<Box
|
43
45
|
{...toolbarProps}
|
44
46
|
ref={(node: HTMLDivElement) => {
|
45
47
|
if (node) {
|
@@ -103,6 +105,6 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
|
|
103
105
|
)}
|
104
106
|
</Box>
|
105
107
|
</Box>
|
106
|
-
</
|
108
|
+
</Box>
|
107
109
|
);
|
108
110
|
};
|
@@ -1,9 +1,11 @@
|
|
1
1
|
import Collapse from '@mui/material/Collapse';
|
2
|
-
import LinearProgress
|
2
|
+
import LinearProgress, {
|
3
|
+
type LinearProgressProps,
|
4
|
+
} from '@mui/material/LinearProgress';
|
3
5
|
import { parseFromValuesOrFunc } from '../column.utils';
|
4
6
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
5
7
|
|
6
|
-
interface Props<TData extends MRT_RowData> {
|
8
|
+
interface Props<TData extends MRT_RowData> extends LinearProgressProps {
|
7
9
|
isTopToolbar: boolean;
|
8
10
|
table: MRT_TableInstance<TData>;
|
9
11
|
}
|
@@ -11,21 +13,25 @@ interface Props<TData extends MRT_RowData> {
|
|
11
13
|
export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
|
12
14
|
isTopToolbar,
|
13
15
|
table,
|
16
|
+
...rest
|
14
17
|
}: Props<TData>) => {
|
15
18
|
const {
|
16
19
|
getState,
|
17
20
|
options: { muiLinearProgressProps },
|
18
21
|
} = table;
|
19
|
-
const { showProgressBars } = getState();
|
22
|
+
const { isSaving, showProgressBars } = getState();
|
20
23
|
|
21
|
-
const linearProgressProps =
|
22
|
-
|
23
|
-
|
24
|
-
|
24
|
+
const linearProgressProps = {
|
25
|
+
...parseFromValuesOrFunc(muiLinearProgressProps, {
|
26
|
+
isTopToolbar,
|
27
|
+
table,
|
28
|
+
}),
|
29
|
+
...rest,
|
30
|
+
};
|
25
31
|
|
26
32
|
return (
|
27
33
|
<Collapse
|
28
|
-
in={showProgressBars}
|
34
|
+
in={showProgressBars !== false && (showProgressBars || isSaving)}
|
29
35
|
mountOnEnter
|
30
36
|
sx={{
|
31
37
|
bottom: isTopToolbar ? 0 : undefined,
|
@@ -11,7 +11,13 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
11
11
|
|
12
12
|
const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
|
13
13
|
|
14
|
-
interface Props<TData extends MRT_RowData>
|
14
|
+
interface Props<TData extends MRT_RowData>
|
15
|
+
extends Partial<
|
16
|
+
PaginationProps & {
|
17
|
+
rowsPerPageOptions?: number[];
|
18
|
+
showRowsPerPage?: boolean;
|
19
|
+
}
|
20
|
+
> {
|
15
21
|
position?: 'bottom' | 'top';
|
16
22
|
table: MRT_TableInstance<TData>;
|
17
23
|
}
|
@@ -19,6 +25,7 @@ interface Props<TData extends MRT_RowData> {
|
|
19
25
|
export const MRT_TablePagination = <TData extends MRT_RowData>({
|
20
26
|
position = 'bottom',
|
21
27
|
table,
|
28
|
+
...rest
|
22
29
|
}: Props<TData>) => {
|
23
30
|
const {
|
24
31
|
getPrePaginationRowModel,
|
@@ -39,9 +46,12 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
39
46
|
showGlobalFilter,
|
40
47
|
} = getState();
|
41
48
|
|
42
|
-
const paginationProps =
|
43
|
-
|
44
|
-
|
49
|
+
const paginationProps = {
|
50
|
+
...parseFromValuesOrFunc(muiPaginationProps, {
|
51
|
+
table,
|
52
|
+
}),
|
53
|
+
...rest,
|
54
|
+
};
|
45
55
|
|
46
56
|
const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
|
47
57
|
const numberOfPages = Math.ceil(totalRowCount / pageSize);
|
@@ -54,7 +64,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
54
64
|
showFirstButton = showFirstLastPageButtons,
|
55
65
|
showLastButton = showFirstLastPageButtons,
|
56
66
|
showRowsPerPage = true,
|
57
|
-
...
|
67
|
+
..._rest
|
58
68
|
} = paginationProps ?? {};
|
59
69
|
|
60
70
|
return (
|
@@ -73,7 +83,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
73
83
|
? '3rem'
|
74
84
|
: undefined,
|
75
85
|
position: 'relative',
|
76
|
-
px: '
|
86
|
+
px: '8px',
|
77
87
|
py: '12px',
|
78
88
|
zIndex: 2,
|
79
89
|
}}
|
@@ -119,13 +129,13 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
119
129
|
)}
|
120
130
|
showFirstButton={showFirstButton}
|
121
131
|
showLastButton={showLastButton}
|
122
|
-
{...
|
132
|
+
{..._rest}
|
123
133
|
/>
|
124
134
|
) : paginationDisplayMode === 'default' ? (
|
125
135
|
<>
|
126
136
|
<Typography
|
127
137
|
align="center"
|
128
|
-
sx={{ mb: 0, minWidth: '
|
138
|
+
sx={{ mb: 0, minWidth: '8ch', mx: '4px' }}
|
129
139
|
variant="body2"
|
130
140
|
>{`${
|
131
141
|
lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Fragment } from 'react';
|
2
|
-
import Alert from '@mui/material/Alert';
|
2
|
+
import Alert, { type AlertProps } from '@mui/material/Alert';
|
3
3
|
import AlertTitle from '@mui/material/AlertTitle';
|
4
4
|
import Box from '@mui/material/Box';
|
5
5
|
import Chip from '@mui/material/Chip';
|
@@ -9,7 +9,7 @@ import { parseFromValuesOrFunc } from '../column.utils';
|
|
9
9
|
import { MRT_SelectCheckbox } from '../inputs';
|
10
10
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
11
11
|
|
12
|
-
interface Props<TData extends MRT_RowData> {
|
12
|
+
interface Props<TData extends MRT_RowData> extends AlertProps {
|
13
13
|
stackAlertBanner?: boolean;
|
14
14
|
table: MRT_TableInstance<TData>;
|
15
15
|
}
|
@@ -17,6 +17,7 @@ interface Props<TData extends MRT_RowData> {
|
|
17
17
|
export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
|
18
18
|
stackAlertBanner,
|
19
19
|
table,
|
20
|
+
...rest
|
20
21
|
}: Props<TData>) => {
|
21
22
|
const {
|
22
23
|
getPrePaginationRowModel,
|
@@ -36,9 +37,12 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
|
|
36
37
|
} = table;
|
37
38
|
const { density, grouping, showAlertBanner } = getState();
|
38
39
|
|
39
|
-
const alertProps =
|
40
|
-
|
41
|
-
|
40
|
+
const alertProps = {
|
41
|
+
...parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
|
42
|
+
table,
|
43
|
+
}),
|
44
|
+
...rest,
|
45
|
+
};
|
42
46
|
|
43
47
|
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
|
44
48
|
table,
|
@@ -1,16 +1,18 @@
|
|
1
1
|
import { type DragEvent, useEffect } from 'react';
|
2
|
-
import Box from '@mui/material/Box';
|
2
|
+
import Box, { type BoxProps } from '@mui/material/Box';
|
3
3
|
import Fade from '@mui/material/Fade';
|
4
4
|
import Typography from '@mui/material/Typography';
|
5
5
|
import { alpha } from '@mui/material/styles';
|
6
|
+
import { parseFromValuesOrFunc } from '../column.utils';
|
6
7
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
7
8
|
|
8
|
-
interface Props<TData extends MRT_RowData> {
|
9
|
+
interface Props<TData extends MRT_RowData> extends BoxProps {
|
9
10
|
table: MRT_TableInstance<TData>;
|
10
11
|
}
|
11
12
|
|
12
13
|
export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
|
13
14
|
table,
|
15
|
+
...rest
|
14
16
|
}: Props<TData>) => {
|
15
17
|
const {
|
16
18
|
getState,
|
@@ -42,6 +44,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
|
|
42
44
|
<Box
|
43
45
|
className="Mui-ToolbarDropZone"
|
44
46
|
onDragEnter={handleDragEnter}
|
47
|
+
{...rest}
|
45
48
|
sx={(theme) => ({
|
46
49
|
alignItems: 'center',
|
47
50
|
backdropFilter: 'blur(4px)',
|
@@ -57,6 +60,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
|
|
57
60
|
position: 'absolute',
|
58
61
|
width: '100%',
|
59
62
|
zIndex: 4,
|
63
|
+
...(parseFromValuesOrFunc(rest?.sx, theme) as any),
|
60
64
|
})}
|
61
65
|
>
|
62
66
|
<Typography fontStyle="italic">
|
@@ -1,17 +1,19 @@
|
|
1
|
-
import Box from '@mui/material/Box';
|
1
|
+
import Box, { type BoxProps } from '@mui/material/Box';
|
2
2
|
import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
|
3
3
|
import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
|
4
4
|
import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
|
5
5
|
import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
|
6
6
|
import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
|
7
|
+
import { parseFromValuesOrFunc } from '../column.utils';
|
7
8
|
import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
8
9
|
|
9
|
-
interface Props<TData extends MRT_RowData> {
|
10
|
+
interface Props<TData extends MRT_RowData> extends BoxProps {
|
10
11
|
table: MRT_TableInstance<TData>;
|
11
12
|
}
|
12
13
|
|
13
14
|
export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
|
14
15
|
table,
|
16
|
+
...rest
|
15
17
|
}: Props<TData>) => {
|
16
18
|
const {
|
17
19
|
options: {
|
@@ -31,11 +33,13 @@ export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
|
|
31
33
|
|
32
34
|
return (
|
33
35
|
<Box
|
34
|
-
|
36
|
+
{...rest}
|
37
|
+
sx={(theme) => ({
|
35
38
|
alignItems: 'center',
|
36
39
|
display: 'flex',
|
37
40
|
zIndex: 3,
|
38
|
-
|
41
|
+
...(parseFromValuesOrFunc(rest?.sx, theme) as any),
|
42
|
+
})}
|
39
43
|
>
|
40
44
|
{renderToolbarInternalActions?.({
|
41
45
|
table,
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import Box from '@mui/material/Box';
|
2
|
-
import Toolbar from '@mui/material/Toolbar';
|
3
2
|
import { lighten } from '@mui/material/styles';
|
4
3
|
import { type Theme } from '@mui/material/styles';
|
5
4
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
@@ -15,12 +14,11 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
|
|
15
14
|
export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
|
16
15
|
alignItems: 'flex-start',
|
17
16
|
backgroundColor: lighten(theme.palette.background.default, 0.05),
|
18
|
-
backgroundImage: 'none',
|
19
17
|
display: 'grid',
|
20
18
|
flexWrap: 'wrap-reverse',
|
21
19
|
minHeight: '3.5rem',
|
22
20
|
overflow: 'hidden',
|
23
|
-
|
21
|
+
position: 'relative',
|
24
22
|
transition: 'all 150ms ease-in-out',
|
25
23
|
zIndex: 1,
|
26
24
|
});
|
@@ -58,8 +56,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
|
|
58
56
|
isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
|
59
57
|
|
60
58
|
return (
|
61
|
-
<
|
62
|
-
variant="dense"
|
59
|
+
<Box
|
63
60
|
{...toolbarProps}
|
64
61
|
ref={(ref: HTMLDivElement) => {
|
65
62
|
topToolbarRef.current = ref;
|
@@ -69,9 +66,9 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
|
|
69
66
|
}
|
70
67
|
}}
|
71
68
|
sx={(theme) => ({
|
72
|
-
position: isFullScreen ? 'sticky' : undefined,
|
73
|
-
top: isFullScreen ? '0' : undefined,
|
74
69
|
...commonToolbarStyles({ theme }),
|
70
|
+
position: isFullScreen ? 'sticky' : 'relative',
|
71
|
+
top: isFullScreen ? '0' : undefined,
|
75
72
|
...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
|
76
73
|
})}
|
77
74
|
>
|
@@ -126,6 +123,6 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
|
|
126
123
|
<MRT_TablePagination position="top" table={table} />
|
127
124
|
)}
|
128
125
|
<MRT_LinearProgressBar isTopToolbar table={table} />
|
129
|
-
</
|
126
|
+
</Box>
|
130
127
|
);
|
131
128
|
};
|
package/src/types.ts
CHANGED
@@ -42,6 +42,7 @@ import {
|
|
42
42
|
} from '@tanstack/react-virtual';
|
43
43
|
import { type AlertProps } from '@mui/material/Alert';
|
44
44
|
import { type AutocompleteProps } from '@mui/material/Autocomplete';
|
45
|
+
import { type BoxProps } from '@mui/material/Box';
|
45
46
|
import { type ButtonProps } from '@mui/material/Button';
|
46
47
|
import { type CheckboxProps } from '@mui/material/Checkbox';
|
47
48
|
import { type ChipProps } from '@mui/material/Chip';
|
@@ -62,7 +63,6 @@ import { type TableFooterProps } from '@mui/material/TableFooter';
|
|
62
63
|
import { type TableHeadProps } from '@mui/material/TableHead';
|
63
64
|
import { type TableRowProps } from '@mui/material/TableRow';
|
64
65
|
import { type TextFieldProps } from '@mui/material/TextField';
|
65
|
-
import { type ToolbarProps } from '@mui/material/Toolbar';
|
66
66
|
import { type DatePickerProps } from '@mui/x-date-pickers';
|
67
67
|
import { type MRT_AggregationFns } from './aggregationFns';
|
68
68
|
import { type MRT_FilterFns } from './filterFns';
|
@@ -771,8 +771,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
|
|
771
771
|
*/
|
772
772
|
memoMode?: 'cells' | 'rows' | 'table-body';
|
773
773
|
muiBottomToolbarProps?:
|
774
|
-
| ((props: { table: MRT_TableInstance<TData> }) =>
|
775
|
-
|
|
774
|
+
| ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
|
775
|
+
| BoxProps;
|
776
776
|
muiCircularProgressProps?:
|
777
777
|
| ((props: { table: MRT_TableInstance<TData> }) => CircularProgressProps)
|
778
778
|
| CircularProgressProps;
|
@@ -973,8 +973,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
|
|
973
973
|
| ((props: { table: MRT_TableInstance<TData> }) => AlertProps)
|
974
974
|
| AlertProps;
|
975
975
|
muiTopToolbarProps?:
|
976
|
-
| ((props: { table: MRT_TableInstance<TData> }) =>
|
977
|
-
|
|
976
|
+
| ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
|
977
|
+
| BoxProps;
|
978
978
|
onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
|
979
979
|
onCreatingRowCancel?: (props: {
|
980
980
|
row: MRT_Row<TData>;
|