material-react-table 0.15.0 → 0.16.1

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

@@ -1,7 +1,7 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 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 { sortingFns, createTable, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -100,11 +100,11 @@ var MRT_DefaultLocalization_EN = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
-  to: 'to',
   toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
+  toggleVisibility: 'Toggle visibility',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
   unpinAll: 'Unpin all',
@@ -653,6 +653,9 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
+      enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
+      localization = _instance$options.localization,
       onColumnVisibilityChanged = _instance$options.onColumnVisibilityChanged,
       setColumnOrder = instance.setColumnOrder;
 
@@ -723,15 +726,23 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       flexWrap: 'nowrap',
       gap: '8px'
     }
-  }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
+  }, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
     return col.columnDefType === 'group';
-  }) && React.createElement(MRT_GrabHandleButton, {
+  }) && (columnDef.enableColumnOrdering !== false ? React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     instance: instance
-  }), !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
+  }) : React.createElement(Box, {
+    sx: {
+      width: '28px'
+    }
+  })), enablePinning && !isSubMenu && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     instance: instance
-  }), React.createElement(FormControlLabel, {
+  }) : React.createElement(Box, {
+    sx: {
+      width: '70px'
+    }
+  })), enableHiding ? React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -741,13 +752,22 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       }
     },
     checked: switchChecked,
-    control: React.createElement(Switch, null),
+    control: React.createElement(Tooltip, {
+      arrow: true,
+      enterDelay: 1000,
+      enterNextDelay: 1000,
+      title: localization.toggleVisibility
+    }, React.createElement(Switch, null)),
     disabled: isSubMenu && switchChecked || !column.getCanHide() || column.getIsGrouped(),
     label: columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
-  }))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
+  }) : React.createElement(Typography, {
+    sx: {
+      alignSelf: 'center'
+    }
+  }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
       key: i + "-" + c.id,
@@ -1648,11 +1668,13 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var instance = _ref.instance;
   var _instance$options = instance.options,
       enableColumnFilters = _instance$options.enableColumnFilters,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
       enableDensityToggle = _instance$options.enableDensityToggle,
       enableFilters = _instance$options.enableFilters,
       enableFullScreenToggle = _instance$options.enableFullScreenToggle,
       enableGlobalFilter = _instance$options.enableGlobalFilter,
       enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
       positionGlobalFilter = _instance$options.positionGlobalFilter,
       renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
   return React.createElement(Box, {
@@ -1674,7 +1696,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     instance: instance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     instance: instance
-  }), enableHiding && React.createElement(MRT_ShowHideColumnsButton, {
+  }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
     instance: instance
   }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
     instance: instance
@@ -1977,7 +1999,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2125,7 +2147,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
-    (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
+    (_localization = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
     localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))])) : null,
     FormHelperTextProps: {
       sx: {
@@ -2220,23 +2242,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
-  var localization = instance.options.localization;
   return React.createElement(Box, {
     sx: {
       display: 'grid',
-      gridTemplateColumns: '6fr auto 5fr'
+      gridTemplateColumns: '6fr 6fr',
+      gap: '1rem'
     }
   }, React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
     instance: instance
-  }), React.createElement(Box, {
-    sx: {
-      width: '100%',
-      minWidth: '5ch',
-      textAlign: 'center'
-    }
-  }, localization.to), React.createElement(MRT_FilterTextField, {
+  }), React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 1,
     instance: instance
@@ -2337,7 +2353,6 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
-        zIndex: 2000,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1
@@ -3070,7 +3085,7 @@ var rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
 var MRT_TableBody = function MRT_TableBody(_ref) {
   var instance = _ref.instance,
       tableContainerRef = _ref.tableContainerRef;
-  var getPaginationRowModel = instance.getPaginationRowModel,
+  var getRowModel = instance.getRowModel,
       getPrePaginationRowModel = instance.getPrePaginationRowModel,
       getState = instance.getState,
       _instance$options = instance.options,
@@ -3083,13 +3098,19 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
   var _getState = getState(),
       density = _getState.density,
       globalFilter = _getState.globalFilter,
-      pagination = _getState.pagination;
+      pagination = _getState.pagination,
+      sorting = _getState.sorting;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     instance: instance
   }) : muiTableBodyProps;
+
+  var getIsSomeColumnsSorted = function getIsSomeColumnsSorted() {
+    return Object.values(sorting).some(Boolean);
+  };
+
   var rows = useMemo(function () {
-    if (enableGlobalFilterRankedResults && globalFilter) {
+    if (enableGlobalFilterRankedResults && globalFilter && !getIsSomeColumnsSorted()) {
       var rankedRows = getPrePaginationRowModel().rows.sort(function (a, b) {
         return rankGlobalFuzzy(a, b);
       });
@@ -3101,8 +3122,8 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       return rankedRows;
     }
 
-    return enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getPaginationRowModel().rows, globalFilter]);
+    return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
+  }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
   var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
     overscan: density === 'compact' ? 20 : 10,
     size: rows.length,
@@ -3328,7 +3349,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   }, tablePaperProps, {
     sx: _extends({
       transition: 'all 0.2s ease-in-out'
-    }, tablePaperProps == null ? void 0 : tablePaperProps.sx, {
+    }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
+    style: _extends({}, tablePaperProps == null ? void 0 : tablePaperProps.style, {
       height: isFullScreen ? '100vh' : undefined,
       margin: isFullScreen ? '0' : undefined,
       maxHeight: isFullScreen ? '100vh' : undefined,
@@ -3478,7 +3500,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-expand',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     }), columnOrder.includes('mrt-select') && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
@@ -3497,7 +3519,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-select',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     }), columnOrder.includes('mrt-row-numbers') && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
@@ -3512,7 +3534,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       id: 'mrt-row-numbers',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 50
+      size: 60
     })].filter(Boolean);
   }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]);
   var columns = useMemo(function () {