npm - material-react-table - Versions diffs - 0.5.5 → 0.5.6 - Mend

material-react-table 0.5.5 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/MaterialReactTable.d.ts +3 -1
package/dist/material-react-table.cjs.development.js +34 -22
package/dist/material-react-table.cjs.development.js.map +1 -1
package/dist/material-react-table.cjs.production.min.js +1 -1
package/dist/material-react-table.cjs.production.min.js.map +1 -1
package/dist/material-react-table.esm.js +35 -23
package/dist/material-react-table.esm.js.map +1 -1
package/package.json +4 -4
package/src/MaterialReactTable.tsx +8 -0
package/src/body/MRT_TableBodyCell.tsx +12 -3
package/src/buttons/MRT_ShowHideColumnsButton.tsx +33 -32
package/src/inputs/MRT_FilterTextField.tsx +1 -1
package/src/menus/MRT_ColumnActionMenu.tsx +109 -112
package/src/menus/MRT_FilterTypeMenu.tsx +16 -14
package/src/menus/MRT_RowActionMenu.tsx +16 -20
package/src/table/MRT_TableContainer.tsx +7 -1

package/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.5",
+  "version": "0.5.6",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -60,9 +60,9 @@
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.7",
-    "@mui/icons-material": "^5.4.4",
-    "@mui/material": "^5.4.4",
+    "@faker-js/faker": "^6.0.0-beta.0",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",

package/src/MaterialReactTable.tsx CHANGED Viewed

@@ -2,6 +2,8 @@ import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
   IconButtonProps,
+  LinearProgressProps,
+  SkeletonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -244,6 +246,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
+    muiLinearProgressProps?:
+      | LinearProgressProps
+      | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
@@ -251,6 +256,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: MRT_Cell<D>) => TableCellProps);
+    muiTableBodyCellSkeletonProps?:
+      | SkeletonProps
+      | ((cell?: MRT_Cell<D>) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
       | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);

package/src/body/MRT_TableBodyCell.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableCellProps } from '@mui/material';
+import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_Cell } from '..';
@@ -22,8 +22,10 @@ interface Props {
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    onCellClick,
+    isLoading,
     muiTableBodyCellProps,
+    muiTableBodyCellSkeletonProps,
+    onCellClick,
     tableInstance: {
       state: { currentEditingRow, densePadding },
     },
@@ -63,7 +65,14 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         } as TableCellProps['sx']
       }
     >
-      {currentEditingRow?.id === cell.row.id ? (
+      {isLoading ? (
+        <Skeleton
+          animation="wave"
+          height={20}
+          width={Math.random() * (120 - 60) + 60}
+          {...muiTableBodyCellSkeletonProps}
+        />
+      ) : currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')

package/src/buttons/MRT_ShowHideColumnsButton.tsx CHANGED Viewed

@@ -7,7 +7,6 @@ import {
   Divider,
   IconButtonProps,
   Box,
-  MenuList,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
@@ -44,39 +43,41 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         anchorEl={anchorEl}
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
+        MenuListProps={{
+          dense: tableInstance.state.densePadding,
+          disablePadding: true,
+        }}
       >
-        <MenuList dense={tableInstance.state.densePadding} disablePadding>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              p: '0 0.5rem 0.5rem 0.5rem',
-            }}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            p: '0.5rem',
+          }}
+        >
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization.columnShowHideMenuHideAll}
+          </Button>
+          <Button
+            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+            onClick={() => tableInstance.toggleHideAllColumns(false)}
           >
-            <Button
-              disabled={
-                !tableInstance.getToggleHideAllColumnsProps().checked &&
-                !tableInstance.getToggleHideAllColumnsProps().indeterminate
-              }
-              onClick={() => tableInstance.toggleHideAllColumns(true)}
-            >
-              {localization.columnShowHideMenuHideAll}
-            </Button>
-            <Button
-              disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-              onClick={() => tableInstance.toggleHideAllColumns(false)}
-            >
-              {localization.columnShowHideMenuShowAll}
-            </Button>
-          </Box>
-          <Divider />
-          {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
-            <MRT_ShowHideColumnsMenu
-              key={`${index}-${column.id}`}
-              column={column}
-            />
-          ))}
-        </MenuList>
+            {localization.columnShowHideMenuShowAll}
+          </Button>
+        </Box>
+        <Divider />
+        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
+          <MRT_ShowHideColumnsMenu
+            key={`${index}-${column.id}`}
+            column={column}
+          />
+        ))}
       </Menu>
     </>
   );

package/src/inputs/MRT_FilterTextField.tsx CHANGED Viewed

@@ -88,7 +88,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           disabled: !!filterChipLabel,
           sx: {
             textOverflow: 'ellipsis',
-            width: filterChipLabel ? 0 : 'auto',
+            width: filterChipLabel ? 0 : undefined,
           },
           title: filterPlaceholder,
         }}

package/src/menus/MRT_ColumnActionMenu.tsx CHANGED Viewed

@@ -5,7 +5,6 @@ import {
   ListItemText,
   Menu,
   MenuItem,
-  MenuList,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
@@ -100,131 +99,129 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {!disableSortBy &&
-          column.canSort && [
-            <MenuItem
-              key={1}
-              disabled={!column.isSorted}
-              onClick={handleClearSort}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <ClearAllIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemClearSort}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              disabled={column.isSorted && !column.isSortedDesc}
-              key={2}
-              onClick={handleSortAsc}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <SortIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortAsc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              divider={
-                !disableFilters || enableColumnGrouping || !disableColumnHiding
-              }
-              key={3}
-              disabled={column.isSorted && column.isSortedDesc}
-              onClick={handleSortDesc}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortDesc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableFilters &&
-          column.canFilter && [
-            <MenuItem
-              divider={enableColumnGrouping || !disableColumnHiding}
-              key={1}
-              onClick={handleFilterByColumn}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <FilterListIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.filterTextFieldPlaceholder?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-              <IconButton
-                onClick={handleOpenFilterModeMenu}
-                onMouseEnter={handleOpenFilterModeMenu}
-                size="small"
-                sx={{ p: 0 }}
-              >
-                <ArrowRightIcon />
-              </IconButton>
-            </MenuItem>,
-            <MRT_FilterTypeMenu
-              anchorEl={filterMenuAnchorEl}
-              column={column}
-              key={2}
-              setAnchorEl={setFilterMenuAnchorEl}
-              onSelect={handleFilterByColumn}
-            />,
-          ]}
-        {enableColumnGrouping &&
-          column.canGroupBy && [
-            <MenuItem
-              divider={!disableColumnHiding}
-              key={2}
-              onClick={handleGroupByColumn}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <DynamicFeedIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization[
-                  column.isGrouped
-                    ? 'columnActionMenuItemUnGroupBy'
-                    : 'columnActionMenuItemGroupBy'
-                ]?.replace('{column}', String(column.Header))}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableColumnHiding && [
+      {!disableSortBy &&
+        column.canSort && [
           <MenuItem
             key={1}
-            onClick={handleHideColumn}
+            disabled={!column.isSorted}
+            onClick={handleClearSort}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <ClearAllIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemClearSort}
+            </ListItemText>
+          </MenuItem>,
+          <MenuItem
+            disabled={column.isSorted && !column.isSortedDesc}
+            key={2}
+            onClick={handleSortAsc}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <SortIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemSortAsc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
+          </MenuItem>,
+          <MenuItem
+            divider={
+              !disableFilters || enableColumnGrouping || !disableColumnHiding
+            }
+            key={3}
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
             <ListItemIcon>
-              <VisibilityOffIcon />
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
             </ListItemIcon>
             <ListItemText>
-              {localization.columnActionMenuItemHideColumn?.replace(
+              {localization.columnActionMenuItemSortDesc?.replace(
                 '{column}',
                 String(column.Header),
               )}
             </ListItemText>
           </MenuItem>,
         ]}
-      </MenuList>
+      {!disableFilters &&
+        column.canFilter && [
+          <MenuItem
+            divider={enableColumnGrouping || !disableColumnHiding}
+            key={1}
+            onClick={handleFilterByColumn}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <FilterListIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
+            <IconButton
+              onClick={handleOpenFilterModeMenu}
+              onMouseEnter={handleOpenFilterModeMenu}
+              size="small"
+              sx={{ p: 0 }}
+            >
+              <ArrowRightIcon />
+            </IconButton>
+          </MenuItem>,
+          <MRT_FilterTypeMenu
+            anchorEl={filterMenuAnchorEl}
+            column={column}
+            key={2}
+            setAnchorEl={setFilterMenuAnchorEl}
+            onSelect={handleFilterByColumn}
+          />,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
+          <MenuItem
+            divider={!disableColumnHiding}
+            key={2}
+            onClick={handleGroupByColumn}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <DynamicFeedIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization[
+                column.isGrouped
+                  ? 'columnActionMenuItemUnGroupBy'
+                  : 'columnActionMenuItemGroupBy'
+              ]?.replace('{column}', String(column.Header))}
+            </ListItemText>
+          </MenuItem>,
+        ]}
+      {!disableColumnHiding && [
+        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+          <ListItemIcon>
+            <VisibilityOffIcon />
+          </ListItemIcon>
+          <ListItemText>
+            {localization.columnActionMenuItemHideColumn?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </ListItemText>
+        </MenuItem>,
+      ]}
     </Menu>
   );
 };

package/src/menus/MRT_FilterTypeMenu.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { Menu, MenuItem, MenuList } from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterType, MRT_HeaderGroup } from '..';
@@ -88,20 +88,22 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
       anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {filterTypes.map(({ type, label, divider }) => (
-          <MenuItem
-            divider={divider}
-            key={type}
-            onClick={() => handleSelectFilterType(type)}
-            selected={type === filterType}
-            value={type}
-          >
-            {label}
-          </MenuItem>
-        ))}
-      </MenuList>
+      {filterTypes.map(({ type, label, divider }) => (
+        <MenuItem
+          divider={divider}
+          key={type}
+          onClick={() => handleSelectFilterType(type)}
+          selected={type === filterType}
+          value={type}
+        >
+          {label}
+        </MenuItem>
+      ))}
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx CHANGED Viewed

@@ -1,11 +1,5 @@
 import React, { FC } from 'react';
-import {
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuList,
-} from '@mui/material';
+import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
@@ -35,20 +29,22 @@ export const MRT_RowActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {enableRowEditing && (
-          <MenuItem onClick={handleEdit}>
-            <ListItemIcon>
-              <EditIcon />
-            </ListItemIcon>
-            <ListItemText>{localization.rowActionMenuItemEdit}</ListItemText>
-          </MenuItem>
-        )}
-        {renderRowActionMenuItems?.(row, tableInstance, () =>
-          setAnchorEl(null),
-        ) ?? null}
-      </MenuList>
+      {enableRowEditing && (
+        <MenuItem onClick={handleEdit}>
+          <ListItemIcon>
+            <EditIcon />
+          </ListItemIcon>
+          <ListItemText>{localization.rowActionMenuItemEdit}</ListItemText>
+        </MenuItem>
+      )}
+      {renderRowActionMenuItems?.(row, tableInstance, () =>
+        setAnchorEl(null),
+      ) ?? null}
     </Menu>
   );
 };

package/src/table/MRT_TableContainer.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     hideToolbarTop,
     isFetching,
     isLoading,
+    muiLinearProgressProps,
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
@@ -47,6 +48,11 @@ export const MRT_TableContainer: FC<Props> = () => {
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
+  const linearProgressProps =
+    muiLinearProgressProps instanceof Function
+      ? muiLinearProgressProps(tableInstance)
+      : muiLinearProgressProps;
   return (
     <TableContainer
       component={Paper}
@@ -67,7 +73,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
       <Collapse in={isFetching || isLoading} unmountOnExit>
-        <LinearProgress />
+        <LinearProgress {...linearProgressProps} />
       </Collapse>
       <Box
         sx={{