material-react-table 0.13.1 → 0.13.2

package/README.md

@@ -1,13 +1,17 @@
 # Material React Table
 
-<a href="https://bundlephobia.com/result?p=material-react-table" target="\_parent">
-  <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table" />
+<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
 </a>
 
-<a href="https://npmjs.com/package/material-react-table" target="\_parent">
+<a href="https://npmjs.com/package/material-react-table" target="_blank_">
   <img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
 </a>
 
+<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
+  <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
+</a>
+
 > This Project is based on `@tanstack/react-table` v8, which itself is still in beta, so therefore this package is also still in alpha/beta
 
 - A fully featured Material UI V5 implementation of Tanstack React Table v8 (beta)
@@ -46,7 +50,7 @@ _All features can easily be enabled/disabled_
 - [x] Filtering and multiple built-in filter modes
 - [x] Full Screen mode
 - [x] Global Filtering (Search across all columns, rank by best match)
-- [x] HeaderGroups & Footers
+- [x] Header Groups & Footers
 - [x] Localization (i18n) support
 - [x] Manage your own state
 - [x] Pagination (supports client-side and server-side)
@@ -58,7 +62,7 @@ _All features can easily be enabled/disabled_
 - [x] Sorting
 - [x] Theming (Respects your Material UI Theme)
 - [x] Toolbars (Add your own action buttons)
-- [x] Tree Data / Expanding Subrows
+- [x] Tree Data / Expanding Sub-rows
 - [x] Virtualization (react-virtual)
 
 ### Installation

package/dist/MaterialReactTable.d.ts

@@ -106,31 +106,31 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
     header: string;
     id: keyof D | string;
     muiTableBodyCellCopyButtonProps?: ButtonProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TableCellProps);
     onCellEditBlur?: ({ cell, event, instance, }: {
@@ -206,94 +206,103 @@ export declare 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;
+        instance: MRT_TableInstance<D>;
     }) => TextFieldProps);
-    muiSelectCheckboxProps?: CheckboxProps | (({ instance, isSelectAll, row, }: {
-        instance: MRT_TableInstance;
-        isSelectAll: boolean;
-        row?: MRT_Row<D>;
+    muiSelectAllCheckboxProps?: CheckboxProps | (({ instance }: {
+        instance: MRT_TableInstance<D>;
+    }) => CheckboxProps);
+    muiSelectCheckboxProps?: CheckboxProps | (({ instance, row, }: {
+        instance: MRT_TableInstance<D>;
+        row: MRT_Row<D>;
     }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?: ButtonProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => TableCellProps);
     muiTableBodyCellSkeletonProps?: SkeletonProps | (({ instance, cell, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
     }) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | (({ instance, row, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         row: MRT_Row<D>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | (({ instance, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => TableContainerProps);
     muiTableDetailPanelProps?: TableCellProps | (({ instance, row, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         row: MRT_Row<D>;
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableFooterProps?: TableFooterProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => TableFooterProps);
     muiTableFooterRowProps?: TableRowProps | (({ instance, footerGroup, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         footerGroup: MRT_HeaderGroup<D>;
     }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ instance, column, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadProps?: TableHeadProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => TableHeadProps);
     muiTableHeadRowProps?: TableRowProps | (({ instance, headerGroup, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         headerGroup: MRT_HeaderGroup<D>;
     }) => TableRowProps);
     muiTablePaginationProps?: Partial<TablePaginationProps> | (({ instance, }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => Partial<TablePaginationProps>);
     muiTablePaperProps?: PaperProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => PaperProps);
     muiTableProps?: TableProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => TableProps);
     muiTableToolbarAlertBannerProps?: AlertProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => AlertProps);
     muiTableToolbarBottomProps?: ToolbarProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => ToolbarProps);
     muiTableToolbarTopProps?: ToolbarProps | (({ instance }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
     }) => ToolbarProps);
     onCellClick?: ({ cell, event, instance, }: {
         cell: MRT_Cell<D>;

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

@@ -158,28 +158,33 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       _instance$options = instance.options,
       KeyboardDoubleArrowDownIcon = _instance$options.icons.KeyboardDoubleArrowDownIcon,
       localization = _instance$options.localization,
+      muiExpandAllButtonProps = _instance$options.muiExpandAllButtonProps,
       renderDetailPanel = _instance$options.renderDetailPanel,
       toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
 
   var _getState = getState(),
       density = _getState.density;
 
+  var iconButtonProps = muiExpandAllButtonProps instanceof Function ? muiExpandAllButtonProps({
+    instance: instance
+  }) : muiExpandAllButtonProps;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expandAll
-  }, React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expandAll,
     disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
-    },
-    sx: {
+    }
+  }, iconButtonProps, {
+    sx: _extends({
       height: density === 'compact' ? '1.75rem' : '2.25rem',
       width: density === 'compact' ? '1.75rem' : '2.25rem'
-    }
-  }, React__default.createElement(KeyboardDoubleArrowDownIcon, {
+    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+  }), React__default.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -194,12 +199,18 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       _instance$options = instance.options,
       ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
       localization = _instance$options.localization,
+      muiExpandButtonProps = _instance$options.muiExpandButtonProps,
       onExpandChanged = _instance$options.onExpandChanged,
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
       density = _getState.density;
 
+  var iconButtonProps = muiExpandButtonProps instanceof Function ? muiExpandButtonProps({
+    instance: instance,
+    row: row
+  }) : muiExpandButtonProps;
+
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
     onExpandChanged == null ? void 0 : onExpandChanged({
@@ -214,15 +225,16 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expand
-  }, React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    onClick: handleToggleExpand,
-    sx: {
+    onClick: handleToggleExpand
+  }, iconButtonProps, {
+    sx: _extends({
       height: density === 'compact' ? '1.75rem' : '2.25rem',
       width: density === 'compact' ? '1.75rem' : '2.25rem'
-    }
-  }, React__default.createElement(ExpandMoreIcon, {
+    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+  }), React__default.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -4048,11 +4060,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAll = _ref.selectAll,
       instance = _ref.instance;
   var getRowModel = instance.getRowModel,
+      getPaginationRowModel = instance.getPaginationRowModel,
       getSelectedRowModel = instance.getSelectedRowModel,
       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;
@@ -4070,7 +4084,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
       onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
         event: event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
         instance: instance
       });
     } else if (row) {
@@ -4086,8 +4100,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     }
   };
 
-  var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
-    isSelectAll: !!selectAll,
+  var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
+    instance: instance
+  }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     row: row,
     instance: instance
   }) : muiSelectCheckboxProps;