material-react-table 0.6.6 → 0.6.9

package/dist/MaterialReactTable.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
-import { AlertProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import { AlertProps, CheckboxProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import { Cell, Column, ColumnInstance, FilterType, ColumnInterface, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
@@ -31,9 +31,11 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D>
     Header?: string;
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
+    disableClickToCopy?: boolean;
+    disableColumnActions?: boolean;
+    disableColumnHiding?: boolean;
     disableEditing?: boolean;
     disableFilters?: boolean;
-    disableCellCopyButton?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | {
         text: string;
@@ -44,6 +46,7 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D>
     muiTableBodyCellProps?: TableCellProps | ((cell: MRT_Cell<D>) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     onCellEditChange?: (event: ChangeEvent<HTMLInputElement>, cell: MRT_Cell<D>) => void;
     onFilterChange?: (event: ChangeEvent<HTMLInputElement>, filterValue: any) => void;
@@ -79,7 +82,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
-    enableCellCopyButtons?: boolean;
+    enableClickToCopy?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
@@ -101,6 +104,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?: LinearProgressProps | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
+    muiSelectCheckboxProps?: CheckboxProps | ((isSelectAll?: boolean, row?: MRT_Row<D>, tableInstance?: MRT_TableInstance<D>) => CheckboxProps);
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | ((cell?: MRT_Cell<D>) => TableCellProps);
     muiTableBodyCellSkeletonProps?: SkeletonProps | ((cell?: MRT_Cell<D>) => SkeletonProps);
@@ -111,6 +115,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableFooterProps?: TableFooterProps | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
     muiTableFooterRowProps?: TableRowProps | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableHeadProps?: TableHeadProps | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
@@ -127,7 +132,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
     onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
     onRowExpandChange?: (event: MouseEvent<HTMLButtonElement>, row: Row<D>) => void;
-    onRowSelectChange?: (event: ChangeEvent, row: Row<D>, selectedRows: Row<D>[]) => void;
+    onSelectChange?: (event: ChangeEvent, row: Row<D>, selectedRows: Row<D>[]) => void;
     onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';

package/dist/head/MRT_TableHeadCell.d.ts

@@ -1,6 +1,13 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 import type { MRT_HeaderGroup } from '..';
-export declare const commonTableHeadCellStyles: (densePadding: boolean, enableColumnResizing?: boolean | undefined) => {
+export declare const commonTableHeadCellStyles: (densePadding: boolean, enableColumnResizing?: boolean | undefined, widths?: {
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    width?: CSSProperties['width'];
+} | undefined) => {
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    width?: CSSProperties['width'];
     fontWeight: string;
     height: string;
     p: string;

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

@@ -528,9 +528,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
   var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
 
-  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps, {
-    style: _extends({}, mTableHeadCellFilterTextFieldProps == null ? void 0 : mTableHeadCellFilterTextFieldProps.style, mcTableHeadCellFilterTextFieldProps == null ? void 0 : mcTableHeadCellFilterTextFieldProps.style)
-  });
+  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
 
   var _useState2 = React.useState(''),
       filterValue = _useState2[0],
@@ -733,7 +731,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     },
     checked: switchChecked,
     control: React__default.createElement(material.Switch, null),
-    disabled: isSubMenu && switchChecked,
+    disabled: isSubMenu && switchChecked || column.disableColumnHiding,
     label: column.Header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
@@ -756,6 +754,14 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       localization = _useMRT.localization,
       tableInstance = _useMRT.tableInstance;
 
+  var hideAllColumns = function hideAllColumns() {
+    findLowestLevelCols(tableInstance.columns).filter(function (col) {
+      return !col.disableColumnHiding;
+    }).forEach(function (col) {
+      return col.toggleHidden(true);
+    });
+  };
+
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -774,9 +780,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     }
   }, !isSubMenu && React__default.createElement(material.Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
-    onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(true);
-    }
+    onClick: hideAllColumns
   }, localization.hideAll), React__default.createElement(material.Button, {
     disabled: tableInstance.getToggleHideAllColumnsProps().checked,
     onClick: function onClick() {
@@ -961,6 +965,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.MenuItem, {
+    disabled: column.disableColumnHiding,
     key: 0,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles$1
@@ -992,8 +997,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   var column = _ref.column;
 
   var _useMRT = useMRT(),
+      MoreVertIcon = _useMRT.icons.MoreVertIcon,
       localization = _useMRT.localization,
-      MoreVertIcon = _useMRT.icons.MoreVertIcon;
+      muiTableHeadCellColumnActionsButtonProps = _useMRT.muiTableHeadCellColumnActionsButtonProps;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -1005,17 +1011,23 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     setAnchorEl(event.currentTarget);
   };
 
+  var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps(column) : muiTableHeadCellColumnActionsButtonProps;
+  var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps(column) : column.muiTableHeadCellColumnActionsButtonProps;
+
+  var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
+
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
     placement: "top",
     title: localization.columnActions
-  }, React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.columnActions,
     onClick: handleClick,
-    size: "small",
-    sx: {
+    size: "small"
+  }, iconButtonProps, {
+    sx: _extends({
       height: '2rem',
       mr: '2px',
       mt: '-0.2rem',
@@ -1025,23 +1037,23 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
       '&:hover': {
         opacity: 1
       }
-    }
-  }, React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
+    }, iconButtonProps.sx)
+  }), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     column: column,
     setAnchorEl: setAnchorEl
   }));
 };
 
-var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing) {
-  return {
+var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing, widths) {
+  return _extends({
     fontWeight: 'bold',
     height: '100%',
     p: densePadding ? '0.5rem' : '1rem',
     pt: densePadding ? '0.75rem' : '1.25rem',
     transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
     verticalAlign: 'text-top'
-  };
+  }, widths);
 };
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _column$columns, _localization$sortByC, _localization$sortByC2;
@@ -1076,7 +1088,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   return React__default.createElement(material.TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing, {
+      maxWidth: column.maxWidth,
+      minWidth: column.minWidth,
+      width: column.width
+    }), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
@@ -1131,7 +1147,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       display: 'flex',
       flexWrap: 'nowrap'
     }
-  }, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, !disableColumnActions && !column.disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
   }), enableColumnResizing && !isParentHeader && React__default.createElement(material.Divider, Object.assign({
     flexItem: true,
@@ -1153,8 +1169,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 };
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
-  var _cell$column$muiTable;
-
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
@@ -1174,9 +1188,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
   var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
 
-  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
-    style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
-  });
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
 
   if (!cell.column.disableEditing && cell.column.Edit) {
     return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
@@ -1200,9 +1212,6 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      CheckBoxIcon = _useMRT$icons.CheckBoxIcon,
-      ContentCopyIcon = _useMRT$icons.ContentCopyIcon,
       localization = _useMRT.localization;
 
   var _useState = React.useState(false),
@@ -1214,32 +1223,34 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     setCopied(true);
     setTimeout(function () {
       return setCopied(false);
-    }, 2000);
+    }, 4000);
   };
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
     title: copied ? localization.copiedToClipboard : localization.clickToCopy
-  }, React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.Button, {
     "aria-label": localization.clickToCopy,
     onClick: function onClick() {
       return handleCopy(cell.value);
     },
     size: "small",
     sx: {
-      opacity: 0.05,
-      m: '0 0.5rem',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        opacity: 1
-      }
-    }
-  }, copied ? React__default.createElement(CheckBoxIcon, {
-    color: "success",
-    fontSize: "small"
-  }) : React__default.createElement(ContentCopyIcon, {
-    fontSize: "small"
-  })));
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      letterSpacing: 'inherit',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      m: '-0.25rem',
+      textTransform: 'inherit',
+      textAlign: 'inherit',
+      minWidth: 'unset'
+    },
+    variant: "text"
+  }, cell.render('Cell')));
 };
 
 var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
@@ -1260,7 +1271,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      enableCellCopyButtons = _useMRT.enableCellCopyButtons,
+      enableClickToCopy = _useMRT.enableClickToCopy,
       isLoading = _useMRT.isLoading,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
@@ -1288,13 +1299,9 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     width: Math.random() * (120 - 60) + 60
   }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
     cell: cell
-  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableCellCopyButtons && !cell.column.disableCellCopyButton ? React__default.createElement(material.Box, {
-    sx: {
-      whiteSpace: 'nowrap'
-    }
-  }, cell.render('Cell'), React__default.createElement(MRT_CopyButton, {
+  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
     cell: cell
-  })) : cell.render('Cell'));
+  }) : cell.render('Cell'));
 };
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
@@ -1303,28 +1310,36 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var _useMRT = useMRT(),
       localization = _useMRT.localization,
-      onRowSelectChange = _useMRT.onRowSelectChange,
+      muiSelectCheckboxProps = _useMRT.muiSelectCheckboxProps,
+      onSelectChange = _useMRT.onSelectChange,
       onSelectAllChange = _useMRT.onSelectAllChange,
-      tableInstance = _useMRT.tableInstance;
+      tableInstance = _useMRT.tableInstance,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
-  var onSelectChange = function onSelectChange(event) {
+  var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
       var _tableInstance$getTog;
 
       tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
-      onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.selectedFlatRows);
+      onSelectAllChange == null ? void 0 : onSelectAllChange(event, event.target.checked ? tableInstance.rows : []);
     } else if (row) {
       var _row$getToggleRowSele;
 
       row == null ? void 0 : (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
-      onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
+      onSelectChange == null ? void 0 : onSelectChange(event, row, event.target.checked ? [].concat(tableInstance.selectedFlatRows, [row]) : tableInstance.selectedFlatRows.filter(function (selectedRow) {
+        return selectedRow.id !== row.id;
+      }));
     }
   };
 
-  var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
-  return React__default.createElement(material.TableCell, {
-    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
-  }, React__default.createElement(material.Tooltip, {
+  var mTableBodyRowSelectCheckboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps(selectAll, row, tableInstance) : muiSelectCheckboxProps;
+  var rtSelectCheckboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
+
+  var checkboxProps = _extends({}, mTableBodyRowSelectCheckboxProps, rtSelectCheckboxProps, {
+    style: _extends({}, rtSelectCheckboxProps == null ? void 0 : rtSelectCheckboxProps.style, mTableBodyRowSelectCheckboxProps == null ? void 0 : mTableBodyRowSelectCheckboxProps.style)
+  });
+
+  return React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
@@ -1333,10 +1348,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
-    onChange: onSelectChange
+    size: densePadding ? 'small' : 'medium'
   }, checkboxProps, {
+    onChange: handleSelectChange,
     title: undefined
-  }))));
+  })));
 };
 
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
@@ -1367,12 +1383,7 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
   var _useMRT = useMRT(),
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
 
-  var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
-
-  var tableCellProps = _extends({}, mTableBodyCellrops, {
-    style: _extends({}, mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style)
-  });
-
+  var tableCellProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
   return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps, {
     sx: _extends({
       width: width
@@ -1390,7 +1401,9 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
       textAlign: 'center'
     },
     sx: _extends({}, commonTableHeadCellStyles(densePadding), {
-      textAlign: 'center'
+      textAlign: 'center',
+      maxWidth: '4rem',
+      width: '4rem'
     })
   }, localization.actions);
 };
@@ -1401,6 +1414,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
       disableExpandAll = _useMRT.disableExpandAll,
+      disableSelectAll = _useMRT.disableSelectAll,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
@@ -1427,9 +1441,14 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
   }, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-  }) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectCheckbox, {
+  }) : null, enableSelection ? !isParentHeader && !disableSelectAll ? React__default.createElement(material.TableCell, {
+    sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
+      maxWidth: '3rem',
+      width: '3rem'
+    })
+  }, React__default.createElement(MRT_SelectCheckbox, {
     selectAll: true
-  }) : React__default.createElement(MRT_TableSpacerCell, {
+  })) : React__default.createElement(MRT_TableSpacerCell, {
     width: "1rem"
   }) : null, headerGroup.headers.map(function (column) {
     return React__default.createElement(MRT_TableHeadCell, {
@@ -2460,6 +2479,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       onRowClick = _useMRT.onRowClick,
       positionActionsColumn = _useMRT.positionActionsColumn,
       renderDetailPanel = _useMRT.renderDetailPanel,
+      tableInstance = _useMRT.tableInstance,
       densePadding = _useMRT.tableInstance.state.densePadding;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
@@ -2480,9 +2500,14 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
     row: row
   }), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
     row: row
-  }), enableSelection && React__default.createElement(MRT_SelectCheckbox, {
+  }), enableSelection && React__default.createElement(material.TableCell, {
+    sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
+      maxWidth: '3rem',
+      width: '3rem'
+    })
+  }, React__default.createElement(MRT_SelectCheckbox, {
     row: row
-  }), row.cells.map(function (cell) {
+  })), row.cells.map(function (cell) {
     return React__default.createElement(MRT_TableBodyCell, {
       key: cell.getCellProps().key,
       cell: cell