material-react-table 1.2.7 → 1.2.9

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/icons.d.ts

@@ -1,4 +1,5 @@
 export interface MRT_Icons {
+    ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
     CheckBoxIcon: any;

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var styles = require('@mui/material/styles');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
+var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
 var CheckBoxIcon = require('@mui/icons-material/CheckBox');
@@ -82,6 +83,7 @@ var Stack = require('@mui/material/Stack');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
 var CheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckBoxIcon);
@@ -425,6 +427,7 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
     startsWith });
 
 const MRT_Default_Icons = {
+    ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
     ArrowRightIcon: ArrowRightIcon__default["default"],
     CancelIcon: CancelIcon__default["default"],
     CheckBoxIcon: CheckBoxIcon__default["default"],
@@ -1505,7 +1508,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 +1792,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))))));
 };
@@ -1869,7 +1873,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
-    const { options: { localization }, } = table;
+    const { options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const sortTooltip = column.getIsSorted()
@@ -1882,11 +1886,11 @@ 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,
-            } })));
+            }, IconComponent: ArrowDownwardIcon })));
 };
 
 const MRT_TableHeadCell = ({ header, table }) => {