material-react-table 0.40.5 → 0.40.8

package/dist/esm/MaterialReactTable.d.ts

@@ -130,7 +130,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      *
      * @example accessorFn: (row) => row.username
      */
-    accessorFn?: (row: TData) => any;
+    accessorFn?: (originalRow: TData) => any;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify which key in the row this column should use to access the correct data.
@@ -311,7 +311,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableTableHead?: boolean;
     enableToolbarInternalActions?: boolean;
     enableTopToolbar?: boolean;
-    enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    globalFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;

package/dist/esm/material-react-table.esm.js

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, use
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -383,7 +383,7 @@ const mrtFilterOptions = (localization) => [
 ];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
     var _a, _b, _c, _d;
-    const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { globalFilterFn, density } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
@@ -391,8 +391,8 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
     const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
         ? allowedColumnFilterOptions === undefined ||
             (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
-        : (!enabledGlobalFilterOptions ||
-            enabledGlobalFilterOptions.includes(filterOption.option)) &&
+        : (!globalFilterModeOptions ||
+            globalFilterModeOptions.includes(filterOption.option)) &&
             ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
         if (header && column) {
@@ -1503,9 +1503,14 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     value = option.value;
                     text = option.text;
                 }
-                return (React.createElement(MenuItem, { key: value, value: value },
+                return (React.createElement(MenuItem, { key: value, sx: {
+                        display: 'flex',
+                        m: 0,
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                    }, value: value },
                     isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
-                    React.createElement(ListItemText, null, text)));
+                    text));
             })),
         React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
 };
@@ -1526,8 +1531,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { getState, options: { icons: { FilterAltIcon }, localization, }, } = table;
-    const { columnFilterFns } = getState();
+    const { options: { icons: { FilterAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = [
@@ -1535,7 +1539,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         'betweenInclusive',
         'inNumberRange',
     ].includes(columnDef._filterFn);
-    const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
+    const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
         .replace('{filterType}', 
@@ -2150,7 +2154,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             !Object.values(sorting).some(Boolean)) {
             const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
             if (enablePagination) {
-                return rankedRows.slice(pagination.pageIndex, pagination.pageSize);
+                const start = pagination.pageIndex * pagination.pageSize;
+                return rankedRows.slice(start, start + pagination.pageSize);
             }
             return rankedRows;
         }
@@ -2163,6 +2168,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             ? getPrePaginationRowModel().rows
             : getRowModel().rows,
         globalFilter,
+        pagination.pageIndex,
+        pagination.pageSize,
     ]);
     const virtualizer = enableRowVirtualization
         ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
@@ -2419,6 +2426,7 @@ const MRT_TableRoot = (props) => {
         props.displayColumnDefOptions,
         props.editingMode,
         props.enableColumnDragging,
+        props.enableColumnFilterModes,
         props.enableColumnOrdering,
         props.enableEditing,
         props.enableExpandAll,