material-react-table 0.17.0 → 0.18.1

package/dist/MaterialReactTable.d.ts

@@ -1,6 +1,6 @@
-import { ChangeEvent, Dispatch, FC, FocusEvent, MouseEvent, ReactNode, SetStateAction } from 'react';
+import { ChangeEvent, Dispatch, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
 import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnDef, ColumnOrderState, ColumnPinningState, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions } from '@tanstack/react-table';
 import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
@@ -49,6 +49,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
     setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
     setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
@@ -60,6 +61,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
     density: 'comfortable' | 'compact' | 'spacious';
     isLoading: boolean;
     isFullScreen: boolean;
+    showAlertBanner: boolean;
     showFilters: boolean;
     showGlobalFilter: boolean;
     showProgressBars: boolean;
@@ -139,23 +141,11 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onCellEditChanged?: ({ cell, event, instance, }: {
+    onCellEditChange?: ({ cell, event, instance, }: {
         event: ChangeEvent<HTMLInputElement>;
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
-        column: MRT_Column<D>;
-        event: ChangeEvent<HTMLInputElement>;
-        filterValue: any;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
-        column: MRT_Column<D>;
-        event: ChangeEvent<HTMLInputElement>;
-        filterValue: any;
-        instance: MRT_TableInstance<D>;
-    }) => void;
     sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns' | 'columnDef'> & {
@@ -310,114 +300,31 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     muiTableToolbarTopProps?: ToolbarProps | (({ instance }: {
         instance: MRT_TableInstance<D>;
     }) => ToolbarProps);
-    onCellClick?: ({ cell, event, instance, }: {
-        cell: MRT_Cell<D>;
-        instance: MRT_TableInstance<D>;
-        event: MouseEvent<HTMLTableCellElement>;
-    }) => void;
     onCellEditBlur?: ({ cell, event, instance, }: {
         event: FocusEvent<HTMLInputElement>;
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onCellEditChanged?: ({ cell, event, instance, }: {
+    onCellEditChange?: ({ cell, event, instance, }: {
         event: ChangeEvent<HTMLInputElement>;
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
-        column: MRT_Column<D>;
-        event: ChangeEvent<HTMLInputElement>;
-        filterValue: any;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
-        column: MRT_Column<D>;
-        event: ChangeEvent<HTMLInputElement>;
-        filterValue: any;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnOrderChanged?: ({ columnOrder, instance, }: {
-        columnOrder: ColumnOrderState;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnPinningChanged?: ({ columnPinning, instance, }: {
-        columnPinning: ColumnPinningState;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnVisibilityChanged?: ({ column, columnVisibility, instance, }: {
-        column: MRT_Column<D>;
-        columnVisibility: VisibilityState;
-        instance: MRT_TableInstance<D>;
-    }) => void;
     onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
     onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
     onCurrentFilterFnsChange?: OnChangeFn<{
         [key: string]: MRT_FilterFn;
     }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
-    onDetailPanelClick?: ({ event, row, instance, }: {
-        event: MouseEvent<HTMLTableCellElement>;
-        row: MRT_Row<D>;
-        instance: MRT_TableInstance<D>;
-    }) => void;
     onEditRowSubmit?: ({ row, instance, }: {
         row: MRT_Row<D>;
         instance: MRT_TableInstance<D>;
     }) => Promise<void> | void;
-    onExpandChanged?: ({ event, row, }: {
-        event: MouseEvent<HTMLButtonElement>;
-        row: MRT_Row<D>;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onGlobalFilterValueChanged?: ({ event, instance, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onGlobalFilterValueChangedDebounced?: ({ event, instance, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        instance: MRT_TableInstance<D>;
-    }) => void;
     onDensityChange?: OnChangeFn<boolean>;
-    onDensityChanged?: ({ event, density, instance, }: {
-        event: MouseEvent<HTMLButtonElement>;
-        density: 'comfortable' | 'compact' | 'spacious';
-        instance: MRT_TableInstance<D>;
-    }) => void;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onIsFullScreenChanged?: ({ event, isFullScreen, instance, }: {
-        event: MouseEvent<HTMLButtonElement>;
-        isFullScreen: boolean;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onRowClick?: ({ event, row, instance, }: {
-        event: MouseEvent<HTMLTableRowElement>;
-        row: MRT_Row<D>;
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onRowSelectAllChanged?: ({ event, selectedRows, instance, }: {
-        event: ChangeEvent;
-        selectedRows: MRT_Row<D>[];
-        instance: MRT_TableInstance<D>;
-    }) => void;
-    onRowSelectionChanged?: ({ event, row, selectedRows, instance, }: {
-        event: ChangeEvent;
-        row: MRT_Row<D>;
-        selectedRows: MRT_Row<D>[];
-        instance: MRT_TableInstance<D>;
-    }) => void;
+    onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
-    onShowFiltersChanged?: ({ event, instance, showFilters, }: {
-        event: MouseEvent<HTMLButtonElement>;
-        instance: MRT_TableInstance<D>;
-        showFilters: boolean;
-    }) => void;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
-    onShowGlobalFilterChanged?: ({ event, instance, showGlobalFilter, }: {
-        event: MouseEvent<HTMLButtonElement>;
-        instance: MRT_TableInstance<D>;
-        showGlobalFilter: boolean;
-    }) => void;
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';

package/dist/material-react-table.cjs.development.js

@@ -196,7 +196,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(),
@@ -207,13 +206,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__default.createElement(material.Tooltip, {
@@ -4084,16 +4078,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(),
@@ -4106,22 +4095,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
-      });
     }
   };
 
@@ -5134,18 +5109,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);
   };
 
@@ -5200,19 +5169,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);
   };
 
@@ -5236,18 +5199,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);
   };
 
@@ -5273,7 +5230,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(),
@@ -5283,12 +5239,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;
@@ -5318,8 +5269,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(),
@@ -5338,19 +5287,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) {
@@ -5526,7 +5467,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
@@ -5544,11 +5486,12 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     }));
   })) : null;
   return React__default.createElement(material.Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
+    "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
     timeout: stackAlertBanner ? 200 : 0
   }, React__default.createElement(material.Alert, Object.assign({
     color: "info",
-    icon: false,
+    icon: false
+  }, alertProps, {
     sx: _extends({
       borderRadius: 0,
       fontSize: '1rem',
@@ -5560,11 +5503,11 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       width: '100%',
       zIndex: 2
     }, alertProps == null ? void 0 : alertProps.sx)
-  }, alertProps), React__default.createElement(material.Box, {
+  }), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
+  }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React__default.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
@@ -5761,8 +5704,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;
@@ -5806,36 +5747,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) {
@@ -6078,6 +5994,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;
@@ -6094,13 +6011,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
@@ -6918,7 +6836,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;
 
@@ -6932,12 +6850,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
@@ -7076,8 +6994,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,
@@ -7149,13 +7065,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   return React__default.createElement(material.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,
@@ -7165,7 +7074,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.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',
@@ -7217,7 +7126,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,
@@ -7228,14 +7136,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
     instance: instance
   }) : muiTableDetailPanelProps;
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.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,
@@ -7259,7 +7160,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,
@@ -7267,13 +7167,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }) : muiTableBodyRowProps;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.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) {
@@ -7607,7 +7500,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 = React.useState(props.tableId),
       tableId = _useState[0],
@@ -7646,27 +7539,31 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen = _useState6[0],
       setIsFullScreen = _useState6[1];
 
-  var _useState7 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState7[0],
-      setShowFilters = _useState7[1];
+  var _useState7 = React.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 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState8[0],
-      setShowGlobalFilter = _useState8[1];
+  var _useState8 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState8[0],
+      setShowFilters = _useState8[1];
 
-  var _useState9 = React.useState(function () {
+  var _useState9 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState9[0],
+      setShowGlobalFilter = _useState9[1];
+
+  var _useState10 = React.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 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
+  var _useState11 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState11[0],
+      setCurrentGlobalFilterFn = _useState11[1];
 
   var table = React.useMemo(function () {
     return (// @ts-ignore
@@ -7790,6 +7687,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentGlobalFilterFn: currentGlobalFilterFn,
       density: density,
       isFullScreen: isFullScreen,
+      showAlertBanner: showAlertBanner,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
@@ -7801,31 +7699,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
   });
 
-  React.useEffect(function () {
-    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnOrder]);
-  React.useEffect(function () {
-    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnPinning]);
-  React.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__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     PaperComponent: material.Box,
     TransitionComponent: material.Grow,