material-react-table 1.2.1 → 1.2.3

package/dist/cjs/column.utils.d.ts

@@ -1,8 +1,8 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { TableCellProps, Theme } from '@mui/material';
-import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
+import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {

package/dist/cjs/index.js

@@ -6,12 +6,71 @@ var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var material = require('@mui/material');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
-var iconsMaterial = require('@mui/icons-material');
+var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
+var CancelIcon = require('@mui/icons-material/Cancel');
+var CheckBoxIcon = require('@mui/icons-material/CheckBox');
+var ClearAllIcon = require('@mui/icons-material/ClearAll');
+var CloseIcon = require('@mui/icons-material/Close');
+var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
+var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
+var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
+var DragHandleIcon = require('@mui/icons-material/DragHandle');
+var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
+var EditIcon = require('@mui/icons-material/Edit');
+var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
+var FilterAltIcon = require('@mui/icons-material/FilterAlt');
+var FilterAltOffIcon = require('@mui/icons-material/FilterAltOff');
+var FilterListIcon = require('@mui/icons-material/FilterList');
+var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
+var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
+var FullscreenIcon = require('@mui/icons-material/Fullscreen');
+var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
+var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var PushPinIcon = require('@mui/icons-material/PushPin');
+var RestartAltIcon = require('@mui/icons-material/RestartAlt');
+var SaveIcon = require('@mui/icons-material/Save');
+var SearchIcon = require('@mui/icons-material/Search');
+var SearchOffIcon = require('@mui/icons-material/SearchOff');
+var SortIcon = require('@mui/icons-material/Sort');
+var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
+var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
 var reactVirtual = require('react-virtual');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
+var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
+var CheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckBoxIcon);
+var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
+var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
+var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
+var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
+var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
+var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
+var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
+var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
+var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
+var FilterAltOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltOffIcon);
+var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
+var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
+var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
+var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
+var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
+var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
+var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
+var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
+var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
+var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
+var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
+var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
+var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
+var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
+var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -284,36 +343,36 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
     startsWith });
 
 const MRT_Default_Icons = {
-    ArrowRightIcon: iconsMaterial.ArrowRight,
-    CancelIcon: iconsMaterial.Cancel,
-    CheckBoxIcon: iconsMaterial.CheckBox,
-    ClearAllIcon: iconsMaterial.ClearAll,
-    CloseIcon: iconsMaterial.Close,
-    DensityLargeIcon: iconsMaterial.DensityLarge,
-    DensityMediumIcon: iconsMaterial.DensityMedium,
-    DensitySmallIcon: iconsMaterial.DensitySmall,
-    DragHandleIcon: iconsMaterial.DragHandle,
-    DynamicFeedIcon: iconsMaterial.DynamicFeed,
-    EditIcon: iconsMaterial.Edit,
-    ExpandLessIcon: iconsMaterial.ExpandLess,
-    ExpandMoreIcon: iconsMaterial.ExpandMore,
-    FilterAltIcon: iconsMaterial.FilterAlt,
-    FilterAltOffIcon: iconsMaterial.FilterAltOff,
-    FilterListIcon: iconsMaterial.FilterList,
-    FilterListOffIcon: iconsMaterial.FilterListOff,
-    FullscreenExitIcon: iconsMaterial.FullscreenExit,
-    FullscreenIcon: iconsMaterial.Fullscreen,
-    KeyboardDoubleArrowDownIcon: iconsMaterial.KeyboardDoubleArrowDown,
-    MoreHorizIcon: iconsMaterial.MoreHoriz,
-    MoreVertIcon: iconsMaterial.MoreVert,
-    PushPinIcon: iconsMaterial.PushPin,
-    RestartAltIcon: iconsMaterial.RestartAlt,
-    SaveIcon: iconsMaterial.Save,
-    SearchIcon: iconsMaterial.Search,
-    SearchOffIcon: iconsMaterial.SearchOff,
-    SortIcon: iconsMaterial.Sort,
-    ViewColumnIcon: iconsMaterial.ViewColumn,
-    VisibilityOffIcon: iconsMaterial.VisibilityOff,
+    ArrowRightIcon: ArrowRightIcon__default["default"],
+    CancelIcon: CancelIcon__default["default"],
+    CheckBoxIcon: CheckBoxIcon__default["default"],
+    ClearAllIcon: ClearAllIcon__default["default"],
+    CloseIcon: CloseIcon__default["default"],
+    DensityLargeIcon: DensityLargeIcon__default["default"],
+    DensityMediumIcon: DensityMediumIcon__default["default"],
+    DensitySmallIcon: DensitySmallIcon__default["default"],
+    DragHandleIcon: DragHandleIcon__default["default"],
+    DynamicFeedIcon: DynamicFeedIcon__default["default"],
+    EditIcon: EditIcon__default["default"],
+    ExpandLessIcon: ExpandLessIcon__default["default"],
+    ExpandMoreIcon: ExpandMoreIcon__default["default"],
+    FilterAltIcon: FilterAltIcon__default["default"],
+    FilterAltOffIcon: FilterAltOffIcon__default["default"],
+    FilterListIcon: FilterListIcon__default["default"],
+    FilterListOffIcon: FilterListOffIcon__default["default"],
+    FullscreenExitIcon: FullscreenExitIcon__default["default"],
+    FullscreenIcon: FullscreenIcon__default["default"],
+    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
+    MoreHorizIcon: MoreHorizIcon__default["default"],
+    MoreVertIcon: MoreVertIcon__default["default"],
+    PushPinIcon: PushPinIcon__default["default"],
+    RestartAltIcon: RestartAltIcon__default["default"],
+    SaveIcon: SaveIcon__default["default"],
+    SearchIcon: SearchIcon__default["default"],
+    SearchOffIcon: SearchOffIcon__default["default"],
+    SortIcon: SortIcon__default["default"],
+    ViewColumnIcon: ViewColumnIcon__default["default"],
+    VisibilityOffIcon: VisibilityOffIcon__default["default"],
 };
 
 const fuzzy = (rowA, rowB, columnId) => {
@@ -333,13 +392,13 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 const MRT_ExpandAllButton = ({ table }) => {
     var _a;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
         React__default["default"].createElement("span", null,
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
@@ -957,7 +1016,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
     var _a;
     const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const checkboxProps = !row
         ? muiSelectAllCheckboxProps instanceof Function
             ? muiSelectAllCheckboxProps({ table })
@@ -969,7 +1028,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
             ? selectAllMode === 'page'
                 ? table.getIsAllPageRowsSelected()
                 : table.getIsAllRowsSelected()
-            : row === null || row === void 0 ? void 0 : row.getIsSelected(), inputProps: {
+            : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading, inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
@@ -1859,16 +1918,16 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    overflow: 'hidden',
+                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
                     pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
                         ? `${headerPL}rem`
                         : undefined,
                 } },
                 React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                        overflow: 'hidden',
+                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
-                    }, title: columnDef.header }, headerElement),
+                    }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
             columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
@@ -2162,7 +2221,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps),
         React__default["default"].createElement(material.TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: !isLoading && row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
 const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {