material-react-table 1.2.6 → 1.2.8

package/README.md

@@ -33,7 +33,7 @@ Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 
 View the [Docs Website](https://www.material-react-table.com/)
 
-See all [Props and Options](https://www.material-react-table.com/docs/api)
+See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api)
 
 ## Quick Examples
 
@@ -94,13 +94,15 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 
 View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
 
-1. Install Peer Dependencies (Material UI V5)
+1. Ensure that you have React 17 or later installed (MUI V5 requires React 17 or 18)
+
+2. Install Peer Dependencies (Material UI V5)
 
 ```bash
 npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
-2. Install material-react-table
+3. Install material-react-table
 
 ```bash
 npm install material-react-table

package/dist/cjs/index.js

@@ -1505,7 +1505,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-6px -3px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1789,11 +1789,12 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
                 React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
                         event.stopPropagation();
                     }, size: "small", sx: {
+                        height: '12px',
                         m: 0,
                         opacity: 0.8,
                         p: '2px',
                         transform: 'scale(0.66)',
-                        width: '1.5ch',
+                        width: '12px',
                     } },
                     React__default["default"].createElement(FilterAltIcon, null))))));
 };
@@ -1882,7 +1883,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
                 ? column.getIsSorted()
                 : undefined, sx: {
                 flex: '0 0',
-                width: '2ch',
+                width: '2.3ch',
                 transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
                     ? 'translateX(-0.5ch)'
                     : undefined,
@@ -2675,8 +2676,12 @@ const MRT_TableRoot = (props) => {
             columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
             columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
             columnOrder.includes('mrt-row-expand') &&
-                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll && props.enableMultiRowSelection ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
+                    ? () => React__default["default"].createElement(MRT_ExpandAllButton, { table: table })
+                    : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
+                    ? () => React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
+                    : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
             columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [