material-react-table 0.17.0 → 0.18.1
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/MaterialReactTable.d.ts +7 -100
- package/dist/material-react-table.cjs.development.js +40 -162
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +41 -163
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +5 -178
- package/src/body/MRT_TableBodyCell.tsx +1 -9
- package/src/body/MRT_TableBodyRow.tsx +2 -5
- package/src/body/MRT_TableDetailPanel.tsx +1 -5
- package/src/buttons/MRT_ExpandButton.tsx +2 -4
- package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -8
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -8
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -8
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +2 -8
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +3 -2
- package/src/inputs/MRT_EditCellTextField.tsx +3 -3
- package/src/inputs/MRT_FilterTextField.tsx +0 -26
- package/src/inputs/MRT_GlobalFilterTextField.tsx +0 -4
- package/src/inputs/MRT_SelectCheckbox.tsx +0 -24
- package/src/table/MRT_TableRoot.tsx +5 -24
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +9 -4
|
@@ -73,6 +73,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
|
|
|
73
73
|
const [isFullScreen, setIsFullScreen] = useState(
|
|
74
74
|
initialState?.isFullScreen ?? false,
|
|
75
75
|
);
|
|
76
|
+
const [showAlertBanner, setShowAlertBanner] = useState(
|
|
77
|
+
props.initialState?.showAlertBanner ?? false,
|
|
78
|
+
);
|
|
76
79
|
const [showFilters, setShowFilters] = useState(
|
|
77
80
|
initialState?.showFilters ?? false,
|
|
78
81
|
);
|
|
@@ -241,6 +244,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
|
|
|
241
244
|
currentGlobalFilterFn,
|
|
242
245
|
density,
|
|
243
246
|
isFullScreen,
|
|
247
|
+
showAlertBanner,
|
|
244
248
|
showFilters,
|
|
245
249
|
showGlobalFilter,
|
|
246
250
|
...props.state,
|
|
@@ -256,34 +260,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
|
|
|
256
260
|
props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
|
|
257
261
|
setDensity: props.onDensityChange ?? setDensity,
|
|
258
262
|
setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
|
|
263
|
+
setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
|
|
259
264
|
setShowFilters: props.onShowFiltersChange ?? setShowFilters,
|
|
260
265
|
setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
|
|
261
266
|
} as MRT_TableInstance;
|
|
262
267
|
|
|
263
|
-
useEffect(() => {
|
|
264
|
-
props?.onColumnOrderChanged?.({
|
|
265
|
-
columnOrder: instance.getState().columnOrder,
|
|
266
|
-
//@ts-ignore
|
|
267
|
-
instance,
|
|
268
|
-
});
|
|
269
|
-
}, [instance.getState().columnOrder]);
|
|
270
|
-
|
|
271
|
-
useEffect(() => {
|
|
272
|
-
props?.onColumnPinningChanged?.({
|
|
273
|
-
columnPinning: instance.getState().columnPinning,
|
|
274
|
-
//@ts-ignore
|
|
275
|
-
instance,
|
|
276
|
-
});
|
|
277
|
-
}, [instance.getState().columnPinning]);
|
|
278
|
-
|
|
279
|
-
useEffect(() => {
|
|
280
|
-
props?.onColumnVisibilityChanged?.({
|
|
281
|
-
columnPinning: instance.getState().columnVisibility,
|
|
282
|
-
//@ts-ignore
|
|
283
|
-
instance,
|
|
284
|
-
});
|
|
285
|
-
}, [instance.getState().columnVisibility]);
|
|
286
|
-
|
|
287
268
|
return (
|
|
288
269
|
<>
|
|
289
270
|
<Dialog
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FC, Fragment } from 'react';
|
|
2
|
-
import { Alert, Box, Chip, Collapse } from '@mui/material';
|
|
2
|
+
import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
@@ -18,7 +18,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
|
|
|
18
18
|
options: { localization, muiTableToolbarAlertBannerProps },
|
|
19
19
|
} = instance;
|
|
20
20
|
|
|
21
|
-
const { grouping } = getState();
|
|
21
|
+
const { grouping, showAlertBanner } = getState();
|
|
22
22
|
|
|
23
23
|
const alertProps =
|
|
24
24
|
muiTableToolbarAlertBannerProps instanceof Function
|
|
@@ -57,12 +57,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
|
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
59
|
<Collapse
|
|
60
|
-
in={!!selectMessage || !!groupedByMessage}
|
|
60
|
+
in={showAlertBanner || !!selectMessage || !!groupedByMessage}
|
|
61
61
|
timeout={stackAlertBanner ? 200 : 0}
|
|
62
62
|
>
|
|
63
63
|
<Alert
|
|
64
64
|
color="info"
|
|
65
65
|
icon={false}
|
|
66
|
+
{...alertProps}
|
|
66
67
|
sx={{
|
|
67
68
|
borderRadius: 0,
|
|
68
69
|
fontSize: '1rem',
|
|
@@ -75,9 +76,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
|
|
|
75
76
|
zIndex: 2,
|
|
76
77
|
...alertProps?.sx,
|
|
77
78
|
}}
|
|
78
|
-
{...alertProps}
|
|
79
79
|
>
|
|
80
|
+
{alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
|
|
80
81
|
<Box sx={{ p: '0.5rem 1rem' }}>
|
|
82
|
+
{alertProps?.children}
|
|
83
|
+
{alertProps?.children && (selectMessage || groupedByMessage) && (
|
|
84
|
+
<br />
|
|
85
|
+
)}
|
|
81
86
|
{selectMessage}
|
|
82
87
|
{selectMessage && groupedByMessage && <br />}
|
|
83
88
|
{groupedByMessage}
|