material-react-table 0.6.8 → 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';
@@ -104,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);
@@ -112,9 +113,9 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     muiTableContainerProps?: TableContainerProps | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
-    muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | ((column: Column<D>) => IconButtonProps);
     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);
@@ -131,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/material-react-table.cjs.development.js

@@ -1310,31 +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: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
-      maxWidth: '2rem',
-      width: '2rem'
-    })
-  }, 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,
@@ -1343,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() {
@@ -1435,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 && !disableSelectAll ? 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, {
@@ -2468,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;
@@ -2488,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