material-react-table 0.26.0 → 0.26.3

package/README.md

@@ -55,8 +55,8 @@ _All features can easily be enabled/disabled_
 - [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Click To Copy Cell Values
-- [x] Column Actions
-- [x] Column Grouping (Group By and Aggregates)
+- [x] Column Action Dropdown Menu
+- [x] Column/Row Grouping (Group By and Aggregates)
 - [x] Column Hiding
 - [x] Column Ordering via Drag'n'Drop
 - [x] Column Pinning (Freeze Columns)

package/dist/MaterialReactTable.d.ts

@@ -415,6 +415,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';

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

@@ -224,10 +224,12 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand
   }, iconButtonProps, {
-    sx: _extends({
-      height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
-    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: density === 'compact' ? '1.75rem' : '2.25rem',
+        width: density === 'compact' ? '1.75rem' : '2.25rem'
+      }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
+    }
   }), React__default.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
@@ -272,7 +274,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       divider: false
     }, {
       option: 'contains',
-      symbol: '[]',
+      symbol: '*',
       label: localization.filterContains,
       divider: false
     }, {
@@ -1448,11 +1450,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
     size: density === 'compact' ? 'small' : 'medium'
   }, checkboxProps, {
-    sx: _extends({
-      height: density === 'compact' ? '1.5rem' : '2rem',
-      width: density === 'compact' ? '1.5rem' : '2rem',
-      m: '-1re.m'
-    }, checkboxProps == null ? void 0 : checkboxProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: density === 'compact' ? '1.5rem' : '2rem',
+        width: density === 'compact' ? '1.5rem' : '2rem',
+        m: '-1re.m'
+      }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
+    }
   })));
 };
 
@@ -1803,12 +1807,14 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
     showFirstButton: showFirstLastPageButtons,
     showLastButton: showFirstLastPageButtons
   }, tablePaginationProps, {
-    sx: _extends({
-      m: '0 0.5rem',
-      mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
-      position: 'relative',
-      zIndex: 2
-    }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        m: '0 0.5rem',
+        mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
+        position: 'relative',
+        zIndex: 2
+      }, (tablePaginationProps == null ? void 0 : tablePaginationProps.sx) instanceof Function ? tablePaginationProps.sx(theme) : tablePaginationProps == null ? void 0 : tablePaginationProps.sx);
+    }
   }));
 };
 
@@ -1850,17 +1856,19 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     color: "info",
     icon: false
   }, alertProps, {
-    sx: _extends({
-      borderRadius: 0,
-      fontSize: '1rem',
-      left: 0,
-      p: 0,
-      position: 'relative',
-      right: 0,
-      top: 0,
-      width: '100%',
-      zIndex: 2
-    }, alertProps == null ? void 0 : alertProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        borderRadius: 0,
+        fontSize: '1rem',
+        left: 0,
+        p: 0,
+        position: 'relative',
+        right: 0,
+        top: 0,
+        width: '100%',
+        zIndex: 2
+      }, (alertProps == null ? void 0 : alertProps.sx) instanceof Function ? alertProps.sx(theme) : alertProps == null ? void 0 : alertProps.sx);
+    }
   }), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
     sx: {
       p: '0.5rem 1rem'
@@ -1949,7 +1957,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
         top: isFullScreen ? '0' : undefined
       }, commonToolbarStyles({
         theme: theme
-      }), toolbarProps == null ? void 0 : toolbarProps.sx);
+      }), (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
@@ -2015,7 +2023,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
         left: 0,
         position: isFullScreen ? 'fixed' : 'relative',
         right: 0
-      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+      }, (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React__default.createElement(MRT_LinearProgressBar, {
     isTopToolbar: false,
@@ -2090,16 +2098,18 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
     onClick: handleClick,
     size: "small"
   }, iconButtonProps, {
-    sx: _extends({
-      height: '2rem',
-      mt: '-0.2rem',
-      opacity: 0.5,
-      transition: 'opacity 0.2s',
-      width: '2rem',
-      '&:hover': {
-        opacity: 1
-      }
-    }, iconButtonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: '2rem',
+        mt: '-0.2rem',
+        opacity: 0.5,
+        transition: 'opacity 0.2s',
+        width: '2rem',
+        '&:hover': {
+          opacity: 1
+        }
+      }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
+    }
   }), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     header: header,
@@ -2284,15 +2294,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React__default.createElement(CloseIcon, null)))))
     }
   }, textFieldProps, {
-    sx: _extends({
-      m: '-0.25rem',
-      p: 0,
-      minWidth: !filterChipLabel ? '8rem' : 'auto',
-      width: 'calc(100% + 0.5rem)',
-      '&	.MuiSelect-icon': {
-        mr: '1.5rem'
-      }
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        m: '-0.25rem',
+        p: 0,
+        minWidth: !filterChipLabel ? '8rem' : 'auto',
+        width: 'calc(100% + 0.5rem)',
+        '&	.MuiSelect-icon': {
+          mr: '1.5rem'
+        }
+      }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
+    }
   }), isSelectFilter && React__default.createElement(material.MenuItem, {
     divider: true,
     disabled: !filterValue,
@@ -2626,7 +2638,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
         zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
-      }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         width: header.getSize()
@@ -2647,6 +2659,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
+      m: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? 'auto' : undefined,
+      pl: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? '1rem' : undefined,
       whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
     }
   }, headerElement, column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
@@ -2848,19 +2862,21 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     type: "button",
     variant: "text"
   }, buttonProps, {
-    sx: _extends({
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: 'inherit',
-      cursor: 'copy',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      letterSpacing: 'inherit',
-      m: '-0.25rem',
-      minWidth: 'unset',
-      textAlign: 'inherit',
-      textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: 'inherit',
+        cursor: 'copy',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        letterSpacing: 'inherit',
+        m: '-0.25rem',
+        minWidth: 'unset',
+        textAlign: 'inherit',
+        textTransform: 'inherit'
+      }, (buttonProps == null ? void 0 : buttonProps.sx) instanceof Function ? buttonProps.sx(theme) : buttonProps == null ? void 0 : buttonProps.sx);
+    }
   }), children));
 };
 
@@ -3015,7 +3031,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         width: column.getSize()
@@ -3066,13 +3082,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
     colSpan: getVisibleLeafColumns().length
   }, tableCellProps, {
-    sx: _extends({
-      borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-      pb: row.getIsExpanded() ? '1rem' : 0,
-      pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out',
-      width: table.getTotalSize() + "px"
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+        pb: row.getIsExpanded() ? '1rem' : 0,
+        pt: row.getIsExpanded() ? '1rem' : 0,
+        transition: 'all 0.2s ease-in-out',
+        width: table.getTotalSize() + "px"
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
+    }
   }), renderDetailPanel && React__default.createElement(material.Collapse, {
     "in": row.getIsExpanded()
   }, renderDetailPanel({
@@ -3130,7 +3148,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
         '&:hover td': {
           backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
         }
-      }, tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
+      }, (tableRowProps == null ? void 0 : tableRowProps.sx) instanceof Function ? tableRowProps.sx(theme) : tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
     }
   }), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
     return React__default.createElement(MRT_TableBodyCell, {
@@ -3266,7 +3284,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
         width: column.getSize(),
         verticalAlign: 'text-top'
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
     }
   }), React__default.createElement(React__default.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
@@ -3334,9 +3352,11 @@ var MRT_Table = function MRT_Table(_ref) {
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
-    sx: _extends({
-      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
-    }, tableProps == null ? void 0 : tableProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
+      }, (tableProps == null ? void 0 : tableProps.sx) instanceof Function ? tableProps.sx(theme) : tableProps == null ? void 0 : tableProps.sx);
+    }
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
     table: table
   }), React__default.createElement(MRT_TableBody, {
@@ -3378,11 +3398,13 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   return React__default.createElement(material.TableContainer, Object.assign({
     ref: tableContainerRef
   }, tableContainerProps, {
-    sx: _extends({
-      maxWidth: '100%',
-      maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
-      overflow: 'auto'
-    }, tableContainerProps == null ? void 0 : tableContainerProps.sx),
+    sx: function sx(theme) {
+      return _extends({
+        maxWidth: '100%',
+        maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
+        overflow: 'auto'
+      }, (tableContainerProps == null ? void 0 : tableContainerProps.sx) instanceof Function ? tableContainerProps.sx(theme) : tableContainerProps == null ? void 0 : tableContainerProps.sx);
+    },
     style: _extends({
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }, tableContainerProps == null ? void 0 : tableContainerProps.style)
@@ -3637,7 +3659,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getSubRows: function getSubRows(row) {
       return row == null ? void 0 : row.subRows;
     },
-    //@ts-ignore
     globalFilterFn: (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
     initialState: initialState,
     state: _extends({
@@ -3673,6 +3694,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
+  React.useEffect(function () {
+    return props == null ? void 0 : props.onTableInstanceChange == null ? void 0 : props.onTableInstanceChange(table);
+  }, [table]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     PaperComponent: material.Box,
     TransitionComponent: material.Grow,