material-react-table 0.13.1 → 0.13.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.13.1",
+  "version": "0.13.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -48,11 +48,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     }
   ],
   "devDependencies": {

package/src/MaterialReactTable.tsx

@@ -215,7 +215,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => ButtonProps);
   muiTableBodyCellEditTextFieldProps?:
@@ -224,7 +224,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
@@ -233,7 +233,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TableCellProps);
   muiTableFooterCellProps?:
@@ -242,7 +242,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
@@ -251,7 +251,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
@@ -260,7 +260,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
@@ -269,7 +269,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   onCellEditBlur?: ({
@@ -406,26 +406,38 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     icons?: Partial<MRT_Icons>;
     localization?: Partial<MRT_Localization>;
+    muiExpandAllButtonProps?:
+      | IconButtonProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => IconButtonProps);
+    muiExpandButtonProps?:
+      | IconButtonProps
+      | (({
+          instance,
+        }: {
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
+        }) => IconButtonProps);
     muiLinearProgressProps?:
       | LinearProgressProps
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => LinearProgressProps);
     muiSearchTextFieldProps?:
       | TextFieldProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TextFieldProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TextFieldProps);
+    muiSelectAllCheckboxProps?:
+      | CheckboxProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => CheckboxProps);
     muiSelectCheckboxProps?:
       | CheckboxProps
       | (({
           instance,
-          isSelectAll,
           row,
         }: {
-          instance: MRT_TableInstance;
-          isSelectAll: boolean;
-          row?: MRT_Row<D>;
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
         }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
@@ -433,7 +445,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
@@ -442,7 +454,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
@@ -451,7 +463,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
@@ -460,19 +472,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableBodyProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableBodyProps);
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableRowProps);
     muiTableContainerProps?:
@@ -480,7 +492,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
@@ -488,7 +500,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableCellProps);
     muiTableFooterCellProps?:
@@ -497,19 +509,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableFooterProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | (({
           instance,
           footerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           footerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
@@ -518,7 +530,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
@@ -527,7 +539,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
@@ -536,19 +548,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableHeadProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | (({
           instance,
           headerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           headerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTablePaginationProps?:
@@ -556,23 +568,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => Partial<TablePaginationProps>);
     muiTablePaperProps?:
       | PaperProps
-      | (({ instance }: { instance: MRT_TableInstance }) => PaperProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => PaperProps);
     muiTableProps?:
       | TableProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | (({ instance }: { instance: MRT_TableInstance }) => AlertProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     onCellClick?: ({
       cell,
       event,

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -15,6 +15,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
       localization,
+      muiExpandAllButtonProps,
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
@@ -22,6 +23,11 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
 
   const { density } = getState();
 
+  const iconButtonProps =
+    muiExpandAllButtonProps instanceof Function
+      ? muiExpandAllButtonProps({ instance })
+      : muiExpandAllButtonProps;
+
   return (
     <Tooltip
       arrow
@@ -33,9 +39,11 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
         aria-label={localization.expandAll}
         disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+        {...iconButtonProps}
         sx={{
           height: density === 'compact' ? '1.75rem' : '2.25rem',
           width: density === 'compact' ? '1.75rem' : '2.25rem',
+          ...iconButtonProps?.sx,
         }}
       >
         <KeyboardDoubleArrowDownIcon

package/src/buttons/MRT_ExpandButton.tsx

@@ -13,6 +13,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { ExpandMoreIcon },
       localization,
+      muiExpandButtonProps,
       onExpandChanged,
       renderDetailPanel,
     },
@@ -20,6 +21,11 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
 
   const { density } = getState();
 
+  const iconButtonProps =
+    muiExpandButtonProps instanceof Function
+      ? muiExpandButtonProps({ instance, row })
+      : muiExpandButtonProps;
+
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
     onExpandChanged?.({ event, row, instance });
@@ -36,9 +42,11 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
         aria-label={localization.expand}
         disabled={!row.getCanExpand() && !renderDetailPanel}
         onClick={handleToggleExpand}
+        {...iconButtonProps}
         sx={{
           height: density === 'compact' ? '1.75rem' : '2.25rem',
           width: density === 'compact' ? '1.75rem' : '2.25rem',
+          ...iconButtonProps?.sx,
         }}
       >
         <ExpandMoreIcon

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -11,11 +11,13 @@ interface Props {
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
     getRowModel,
+    getPaginationRowModel,
     getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps,
       onRowSelectionChanged,
       onRowSelectAllChanged,
       selectAllMode,
@@ -33,7 +35,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       }
       onRowSelectAllChanged?.({
         event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        selectedRows: event.target.checked
+          ? selectAllMode === 'all'
+            ? getRowModel().flatRows
+            : getPaginationRowModel().flatRows
+          : [],
         instance,
       });
     } else if (row) {
@@ -51,10 +57,13 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     }
   };
 
-  const checkboxProps =
-    muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, instance })
-      : muiSelectCheckboxProps;
+  const checkboxProps = selectAll
+    ? muiSelectAllCheckboxProps instanceof Function
+      ? muiSelectAllCheckboxProps({ instance })
+      : muiSelectAllCheckboxProps
+    : muiSelectCheckboxProps instanceof Function
+    ? muiSelectCheckboxProps({ row: row as MRT_Row, instance })
+    : muiSelectCheckboxProps;
 
   return (
     <Tooltip