material-react-table 0.5.5 → 0.5.6

package/dist/MaterialReactTable.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
-import { AlertProps, IconButtonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import { AlertProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import { Cell, Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
@@ -83,9 +83,11 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
+    muiLinearProgressProps?: LinearProgressProps | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | ((cell?: MRT_Cell<D>) => TableCellProps);
+    muiTableBodyCellSkeletonProps?: SkeletonProps | ((cell?: MRT_Cell<D>) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);

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

@@ -377,10 +377,11 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     },
-    open: !!anchorEl
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
+    open: !!anchorEl,
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
+    }
   }, filterTypes.map(function (_ref2) {
     var type = _ref2.type,
         label = _ref2.label,
@@ -394,7 +395,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       selected: type === filterType,
       value: type
     }, label);
-  })));
+  }));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
@@ -466,7 +467,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       disabled: !!filterChipLabel,
       sx: {
         textOverflow: 'ellipsis',
-        width: filterChipLabel ? 0 : 'auto'
+        width: filterChipLabel ? 0 : undefined
       },
       title: filterPlaceholder
     },
@@ -608,10 +609,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
     key: 1,
     disabled: !column.isSorted,
@@ -659,7 +661,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 1,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -882,8 +884,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      onCellClick = _useMRT.onCellClick,
+      isLoading = _useMRT.isLoading,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
+      onCellClick = _useMRT.onCellClick,
       _useMRT$tableInstance = _useMRT.tableInstance.state,
       currentEditingRow = _useMRT$tableInstance.currentEditingRow,
       densePadding = _useMRT$tableInstance.densePadding;
@@ -901,7 +905,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   }, tableCellProps, {
     sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
+  }), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: Math.random() * (120 - 60) + 60
+  }, muiTableBodyCellSkeletonProps)) : (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
     cell: cell
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
@@ -1138,15 +1146,16 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, enableRowEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), React__default.createElement(material.ListItemText, null, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
-  })) != null ? _renderRowActionMenuI : null));
+  })) != null ? _renderRowActionMenuI : null);
 };
 
 function createCommonjsModule(fn, module) {
@@ -2374,15 +2383,16 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      p: '0 0.5rem 0.5rem 0.5rem'
+      p: '0.5rem'
     }
   }, React__default.createElement(material.Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
@@ -2399,7 +2409,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
       key: index + "-" + column.id,
       column: column
     });
-  }))));
+  })));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2684,6 +2694,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
       isLoading = _useMRT.isLoading,
+      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
@@ -2708,6 +2719,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
+  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
   return React__default.createElement(material.TableContainer, Object.assign({
     component: material.Paper
   }, tableContainerProps, {
@@ -2726,7 +2738,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), React__default.createElement(material.Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React__default.createElement(material.LinearProgress, null)), React__default.createElement(material.Box, {
+  }, React__default.createElement(material.LinearProgress, Object.assign({}, linearProgressProps))), React__default.createElement(material.Box, {
     sx: {
       maxWidth: '100%',
       overflowX: 'auto'