material-react-table 0.17.0 → 0.18.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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}