material-react-table 1.9.1 → 1.9.3

package/README.md

@@ -59,7 +59,7 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] < 43kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] < 45kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Click To Copy Cell Values

package/dist/cjs/index.js

@@ -912,7 +912,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -953,7 +953,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         setAnchorEl(null);
     };
     const handleFilterByColumn = () => {
-        setShowFilters(true);
+        setShowColumnFilters(true);
         queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
         setAnchorEl(null);
     };
@@ -1209,6 +1209,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
+    const isMounted = React.useRef(false);
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [searchValue, setSearchValue] = React.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
     const handleChangeDebounced = React.useCallback(utils.debounce((event) => {
@@ -1227,9 +1228,15 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         setGlobalFilter(undefined);
     };
     React.useEffect(() => {
-        if (globalFilter === undefined) {
-            handleClear();
+        if (isMounted.current) {
+            if (globalFilter === undefined) {
+                handleClear();
+            }
+            else {
+                setSearchValue(globalFilter);
+            }
         }
+        isMounted.current = true;
     }, [globalFilter]);
     return (React__default["default"].createElement(Collapse__default["default"], { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React__default["default"].createElement(TextField__default["default"], Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
@@ -1283,7 +1290,7 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
                 ? localization.goToLastPage
                 : type === 'next'
                     ? localization.goToNextPage
-                    : localization.goToPreviousPage, labelDisplayedRows: ({ from, to, count }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ sx: { m: '0 1rem 0 1ch' }, MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& .MuiTablePagination-toolbar': {
+                    : localization.goToPreviousPage, labelDisplayedRows: ({ from, to, count }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: Math.max(Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1), 0), rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ sx: { m: '0 1rem 0 1ch' }, MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& .MuiTablePagination-toolbar': {
                 display: 'flex',
                 alignItems: 'center',
             }, '& .MuiTablePagination-selectLabel': {
@@ -1388,10 +1395,10 @@ const MRT_ToggleDensePaddingButton = (_a) => {
 const MRT_ToggleFiltersButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowFilters, } = table;
+    const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowColumnFilters, } = table;
     const { showColumnFilters } = getState();
     const handleToggleShowFilters = () => {
-        setShowFilters(!showColumnFilters);
+        setShowColumnFilters(!showColumnFilters);
     };
     return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
         React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
@@ -1855,7 +1862,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = columnDef.filterVariant === 'range' ||
@@ -1877,7 +1884,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         React__default["default"].createElement(Box__default["default"], { component: "span", sx: { flex: '0 0' } },
             React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip },
                 React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
-                        setShowFilters(true);
+                        setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
                             (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2293,11 +2300,11 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
 
 const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const { globalFilter } = getState();
+    const { globalFilter, globalFilterFn } = getState();
     const filterValue = column.getFilterValue();
     let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
@@ -2327,13 +2334,16 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
             columnDef.filterVariant === 'text') ||
-            (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
         const chunks = highlightWords__default["default"] === null || highlightWords__default["default"] === void 0 ? void 0 : highlightWords__default["default"]({
             text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-            query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
         });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
-            renderedCellValue = (React__default["default"].createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React__default["default"].createElement(Box__default["default"], { "aria-hidden": "true", component: "span", key: key, sx: match
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (React__default["default"].createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React__default["default"].createElement(Box__default["default"], { "aria-hidden": "true", component: "span", key: key, sx: match
                     ? {
                         backgroundColor: (theme) => theme.palette.mode === 'dark'
                             ? styles.darken(theme.palette.warning.dark, 0.25)
@@ -2342,7 +2352,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                         color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
                         padding: '2px 1px',
                     }
-                    : undefined }, text)))) !== null && _d !== void 0 ? _d : renderedCellValue));
+                    : undefined }, text)))) !== null && _c !== void 0 ? _c : renderedCellValue));
         }
     }
     if (columnDef.Cell && !isGroupedValue) {
@@ -2968,7 +2978,7 @@ const MRT_TableRoot = (props) => {
     const [hoveredRow, setHoveredRow] = React.useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
     const [isFullScreen, setIsFullScreen] = React.useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
     const [showAlertBanner, setShowAlertBanner] = React.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
-    const [showColumnFilters, setShowFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showColumnFilters, setShowColumnFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
     const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const [showToolbarDropZone, setShowToolbarDropZone] = React.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
     const displayColumns = React.useMemo(() => {
@@ -3065,7 +3075,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowFilters: (_11 = props.onShowFiltersChange) !== null && _11 !== void 0 ? _11 : setShowFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
+        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowColumnFilters: (_11 = props.onShowColumnFiltersChange) !== null && _11 !== void 0 ? _11 : setShowColumnFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
     if (props.tableFeatures) {
         props.tableFeatures.forEach((feature) => {
             Object.assign(table, feature(table));
@@ -3090,6 +3100,16 @@ const MRT_TableRoot = (props) => {
             }
         }
     }, [table.getState().isFullScreen]);
+    //if page index is out of bounds, set it to the last page
+    React.useEffect(() => {
+        var _a;
+        const { pageIndex, pageSize } = table.getState().pagination;
+        const totalRowCount = (_a = props.rowCount) !== null && _a !== void 0 ? _a : table.getPrePaginationRowModel().rows.length;
+        const firstVisibleRowIndex = pageIndex * pageSize;
+        if (firstVisibleRowIndex > totalRowCount) {
+            table.setPageIndex(Math.floor(totalRowCount / pageSize));
+        }
+    }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Dialog__default["default"], { PaperComponent: Box__default["default"], TransitionComponent: !props.enableRowVirtualization ? Grow__default["default"] : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),