material-react-table 0.6.8 → 0.6.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.8",
+  "version": "0.6.9",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
   SkeletonProps,
@@ -260,6 +261,13 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | 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);
@@ -282,15 +290,15 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     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);
@@ -336,7 +344,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLButtonElement>,
       row: Row<D>,
     ) => void;
-    onRowSelectChange?: (
+    onSelectChange?: (
       event: ChangeEvent,
       row: Row<D>,
       selectedRows: Row<D>[],

package/src/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { TableCell, TableRow } from '@mui/material';
 import {
+  commonTableBodyButtonCellStyles,
   commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
@@ -26,6 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance,
     tableInstance: {
       state: { densePadding },
     },
@@ -67,7 +69,19 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {(anyRowsCanExpand || renderDetailPanel) && (
           <MRT_ExpandButton row={row} />
         )}
-        {enableSelection && <MRT_SelectCheckbox row={row} />}
+        {enableSelection && (
+          <TableCell
+            sx={{
+              ...commonTableBodyButtonCellStyles(
+                tableInstance.state.densePadding,
+              ),
+              maxWidth: '3rem',
+              width: '3rem',
+            }}
+          >
+            <MRT_SelectCheckbox row={row} />
+          </TableCell>
+        )}
         {row.cells.map((cell: MRT_Cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}

package/src/head/MRT_TableHeadRow.tsx

@@ -4,6 +4,7 @@ import {
   commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -83,7 +84,17 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
       ) : null}
       {enableSelection ? (
         !isParentHeader && !disableSelectAll ? (
-          <MRT_SelectCheckbox selectAll />
+          <TableCell
+            sx={{
+              ...commonTableBodyButtonCellStyles(
+                tableInstance.state.densePadding,
+              ),
+              maxWidth: '3rem',
+              width: '3rem',
+            }}
+          >
+            <MRT_SelectCheckbox selectAll />
+          </TableCell>
         ) : (
           <MRT_TableSpacerCell width="1rem" />
         )

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,8 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell, Tooltip } from '@mui/material';
+import { Checkbox, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row?: MRT_Row;
@@ -10,52 +9,76 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
-  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
-    useMRT();
+  const {
+    localization,
+    muiSelectCheckboxProps,
+    onSelectChange,
+    onSelectAllChange,
+    tableInstance,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
-  const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(event, tableInstance.selectedFlatRows);
+      onSelectAllChange?.(
+        event,
+        event.target.checked ? tableInstance.rows : [],
+      );
     } else if (row) {
       row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+      onSelectChange?.(
+        event,
+        row,
+        event.target.checked
+          ? [...tableInstance.selectedFlatRows, row]
+          : tableInstance.selectedFlatRows.filter(
+              (selectedRow) => selectedRow.id !== row.id,
+            ),
+      );
     }
   };
 
-  const checkboxProps = selectAll
+  const mTableBodyRowSelectCheckboxProps =
+    muiSelectCheckboxProps instanceof Function
+      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      : muiSelectCheckboxProps;
+
+  const rtSelectCheckboxProps = selectAll
     ? tableInstance.getToggleAllRowsSelectedProps()
     : row?.getToggleRowSelectedProps();
 
+  const checkboxProps = {
+    ...mTableBodyRowSelectCheckboxProps,
+    ...rtSelectCheckboxProps,
+    style: {
+      ...rtSelectCheckboxProps?.style,
+      ...mTableBodyRowSelectCheckboxProps?.style,
+    },
+  };
+
   return (
-    <TableCell
-      sx={{
-        ...commonTableBodyButtonCellStyles(tableInstance.state.densePadding),
-        maxWidth: '2rem',
-        width: '2rem',
-      }}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={
+        selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+      }
     >
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        title={
-          selectAll
+      <Checkbox
+        inputProps={{
+          'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow
-        }
-      >
-        <Checkbox
-          inputProps={{
-            'aria-label': selectAll
-              ? localization.toggleSelectAll
-              : localization.toggleSelectRow,
-          }}
-          onChange={onSelectChange}
-          {...checkboxProps}
-          title={undefined}
-        />
-      </Tooltip>
-    </TableCell>
+            : localization.toggleSelectRow,
+        }}
+        size={densePadding ? 'small' : 'medium'}
+        {...checkboxProps}
+        onChange={handleSelectChange}
+        title={undefined}
+      />
+    </Tooltip>
   );
 };