material-react-table 0.17.0 → 0.18.1

package/dist/material-react-table.esm.js

@@ -1,7 +1,7 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { sortingFns, createTable, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -191,7 +191,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
       localization = _instance$options.localization,
       muiExpandButtonProps = _instance$options.muiExpandButtonProps,
-      onExpandChanged = _instance$options.onExpandChanged,
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
@@ -202,13 +201,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     row: row
   }) : muiExpandButtonProps;
 
-  var handleToggleExpand = function handleToggleExpand(event) {
+  var handleToggleExpand = function handleToggleExpand() {
     row.toggleExpanded();
-    onExpandChanged == null ? void 0 : onExpandChanged({
-      event: event,
-      row: row,
-      instance: instance
-    });
   };
 
   return React.createElement(Tooltip, {
@@ -1303,16 +1297,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll,
       instance = _ref.instance;
-  var getRowModel = instance.getRowModel,
-      getPaginationRowModel = instance.getPaginationRowModel,
-      getSelectedRowModel = instance.getSelectedRowModel,
-      getState = instance.getState,
+  var getState = instance.getState,
       _instance$options = instance.options,
       localization = _instance$options.localization,
       muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
       muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
-      onRowSelectionChanged = _instance$options.onRowSelectionChanged,
-      onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
@@ -1325,22 +1314,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event);
       }
-
-      onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
-        event: event,
-        selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
-        instance: instance
-      });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged({
-        event: event,
-        row: row,
-        selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
-          return selectedRow.id !== row.id;
-        }),
-        instance: instance
-      });
     }
   };
 
@@ -1382,18 +1357,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _instance$options$ico.FullscreenExitIcon,
       FullscreenIcon = _instance$options$ico.FullscreenIcon,
       localization = _instance$options.localization,
-      onIsFullScreenChanged = _instance$options.onIsFullScreenChanged,
       setIsFullScreen = instance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
-  var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onIsFullScreenChanged == null ? void 0 : onIsFullScreenChanged({
-      event: event,
-      isFullScreen: !isFullScreen,
-      instance: instance
-    });
+  var handleToggleFullScreen = function handleToggleFullScreen() {
     setIsFullScreen(!isFullScreen);
   };
 
@@ -1448,19 +1417,13 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
       DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
       localization = _instance$options.localization,
-      onDensityChanged = _instance$options.onDensityChanged,
       setDensity = instance.setDensity;
 
   var _getState = getState(),
       density = _getState.density;
 
-  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+  var handleToggleDensePadding = function handleToggleDensePadding() {
     var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
-    onDensityChanged == null ? void 0 : onDensityChanged({
-      event: event,
-      density: nextDensity,
-      instance: instance
-    });
     setDensity(nextDensity);
   };
 
@@ -1484,18 +1447,12 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _instance$options$ico.FilterListIcon,
       FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
       localization = _instance$options.localization,
-      onShowFiltersChanged = _instance$options.onShowFiltersChanged,
       setShowFilters = instance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
-  var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onShowFiltersChanged == null ? void 0 : onShowFiltersChanged({
-      event: event,
-      showFilters: !showFilters,
-      instance: instance
-    });
+  var handleToggleShowFilters = function handleToggleShowFilters() {
     setShowFilters(!showFilters);
   };
 
@@ -1521,7 +1478,6 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
       tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onShowGlobalFilterChanged = _instance$options.onShowGlobalFilterChanged,
       setShowGlobalFilter = instance.setShowGlobalFilter;
 
   var _getState = getState(),
@@ -1531,12 +1487,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
     instance: instance
   }) : muiSearchTextFieldProps;
 
-  var handleToggleSearch = function handleToggleSearch(event) {
-    onShowGlobalFilterChanged == null ? void 0 : onShowGlobalFilterChanged({
-      event: event,
-      showGlobalFilter: !showGlobalFilter,
-      instance: instance
-    });
+  var handleToggleSearch = function handleToggleSearch() {
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
@@ -1566,8 +1517,6 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
       CloseIcon = _instance$options$ico.CloseIcon,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
       tableId = _instance$options.tableId;
 
   var _getState = getState(),
@@ -1586,19 +1535,11 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterValueChangedDebounced == null ? void 0 : onGlobalFilterValueChangedDebounced({
-      event: event,
-      instance: instance
-    });
   }, 250), []);
 
   var handleChange = function handleChange(event) {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged == null ? void 0 : onGlobalFilterValueChanged({
-      event: event,
-      instance: instance
-    });
   };
 
   var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
@@ -1774,7 +1715,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       muiTableToolbarAlertBannerProps = _instance$options.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
-      grouping = _getState.grouping;
+      grouping = _getState.grouping,
+      showAlertBanner = _getState.showAlertBanner;
 
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
     instance: instance
@@ -1792,11 +1734,12 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     }));
   })) : null;
   return React.createElement(Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
+    "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
     timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
-    icon: false,
+    icon: false
+  }, alertProps, {
     sx: _extends({
       borderRadius: 0,
       fontSize: '1rem',
@@ -1808,11 +1751,11 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       width: '100%',
       zIndex: 2
     }, alertProps == null ? void 0 : alertProps.sx)
-  }, alertProps), React.createElement(Box, {
+  }), (alertProps == null ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title), React.createElement(Box, {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
+  }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
@@ -2009,8 +1952,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       CloseIcon = _instance$options$ico.CloseIcon,
       localization = _instance$options.localization,
       muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
-      onColumnFilterValueChanged = _instance$options.onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced = _instance$options.onColumnFilterValueChangedDebounced,
       tableId = _instance$options.tableId,
       setCurrentFilterFns = instance.setCurrentFilterFns;
   var column = header.column;
@@ -2054,36 +1995,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
       column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
     }
-
-    onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   }, 200), []);
 
   var handleChange = function handleChange(event) {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   };
 
   var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
@@ -2326,6 +2242,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
   var getState = instance.getState;
 
   var _getState = getState(),
+      density = _getState.density,
       showFilters = _getState.showFilters;
 
   var column = header.column;
@@ -2342,13 +2259,14 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         borderRightWidth: '2px',
         cursor: 'col-resize',
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',
-        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
+        zIndex: 4,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1
@@ -2674,7 +2592,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       enableEditing = _instance$options.enableEditing,
       muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
       onCellEditBlur = _instance$options.onCellEditBlur,
-      onCellEditChanged = _instance$options.onCellEditChanged,
+      onCellEditChange = _instance$options.onCellEditChange,
       setCurrentEditingCell = instance.setCurrentEditingCell,
       setCurrentEditingRow = instance.setCurrentEditingRow;
 
@@ -2688,12 +2606,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
-    columnDef.onCellEditChanged == null ? void 0 : columnDef.onCellEditChanged({
+    columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
       event: event,
       cell: cell,
       instance: instance
     });
-    onCellEditChanged == null ? void 0 : onCellEditChanged({
+    onCellEditChange == null ? void 0 : onCellEditChange({
       event: event,
       cell: cell,
       instance: instance
@@ -2832,8 +2750,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableRowNumbers = _instance$options.enableRowNumbers,
       muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
-      onCellClick = _instance$options.onCellClick,
-      onRowClick = _instance$options.onRowClick,
       rowNumberMode = _instance$options.rowNumberMode,
       tableId = _instance$options.tableId,
       setColumnOrder = instance.setColumnOrder,
@@ -2905,13 +2821,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   return React.createElement(TableCell, Object.assign({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick({
-        event: event,
-        cell: cell,
-        instance: instance
-      });
-    },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
@@ -2921,7 +2830,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
-        cursor: isEditable && editingMode === 'cell' || onRowClick || onCellClick ? 'pointer' : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'hidden',
         p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
@@ -2973,7 +2882,6 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
       muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
-      onDetailPanelClick = _instance$options.onDetailPanelClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -2984,14 +2892,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
     instance: instance
   }) : muiTableDetailPanelProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
-    colSpan: getVisibleLeafColumns().length,
-    onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    }
+    colSpan: getVisibleLeafColumns().length
   }, tableCellProps, {
     sx: _extends({
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
@@ -3015,7 +2916,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
-      onRowClick = _instance$options.onRowClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -3023,13 +2923,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }) : muiTableBodyRowProps;
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
     hover: true,
-    onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    },
     selected: row.getIsSelected()
   }, tableRowProps, {
     sx: function sx(theme) {
@@ -3363,7 +3256,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3402,27 +3295,31 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen = _useState6[0],
       setIsFullScreen = _useState6[1];
 
-  var _useState7 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState7[0],
-      setShowFilters = _useState7[1];
+  var _useState7 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
+      showAlertBanner = _useState7[0],
+      setShowAlertBanner = _useState7[1];
 
-  var _useState8 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState8[0],
-      setShowGlobalFilter = _useState8[1];
+  var _useState8 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState8[0],
+      setShowFilters = _useState8[1];
 
-  var _useState9 = useState(function () {
+  var _useState9 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState9[0],
+      setShowGlobalFilter = _useState9[1];
+
+  var _useState10 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
       return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? 'equals' : 'fuzzy', _ref2;
     })));
   }),
-      currentFilterFns = _useState9[0],
-      setCurrentFilterFns = _useState9[1];
+      currentFilterFns = _useState10[0],
+      setCurrentFilterFns = _useState10[1];
 
-  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
+  var _useState11 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState11[0],
+      setCurrentGlobalFilterFn = _useState11[1];
 
   var table = useMemo(function () {
     return (// @ts-ignore
@@ -3546,6 +3443,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentGlobalFilterFn: currentGlobalFilterFn,
       density: density,
       isFullScreen: isFullScreen,
+      showAlertBanner: showAlertBanner,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
@@ -3557,31 +3455,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
     setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
+    setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
     setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnOrder]);
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnPinning]);
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnVisibility]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,