material-react-table 0.15.1 → 0.16.2

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';
@@ -24,10 +24,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -100,11 +96,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',
@@ -623,13 +619,13 @@ var createDataColumn = function createDataColumn(table, column, currentFilterFns
 var createDisplayColumn = function createDisplayColumn(table, column) {
   return table.createDisplayColumn(column);
 };
-var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder, setColumnOrder) {
+var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder) {
   if (movingColumn.getCanPin()) {
     movingColumn.pin(receivingColumn.getIsPinned());
   }
 
   columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
-  setColumnOrder([].concat(columnOrder));
+  return [].concat(columnOrder);
 };
 var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
   return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
@@ -653,12 +649,13 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
-      onColumnVisibilityChanged = _instance$options.onColumnVisibilityChanged,
+      enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
+      localization = _instance$options.localization,
       setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
-      columnVisibility = _getState.columnVisibility;
+      columnOrder = _getState.columnOrder;
 
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
@@ -666,7 +663,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -699,12 +697,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     } else {
       column.toggleVisibility();
     }
-
-    onColumnVisibilityChanged == null ? void 0 : onColumnVisibilityChanged({
-      column: column,
-      columnVisibility: columnVisibility,
-      instance: instance
-    });
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
@@ -723,15 +715,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 +741,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 +1657,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 +1685,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 +1988,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 +2136,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 +2231,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 +2342,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
@@ -2565,11 +2569,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
-  var getState = instance.getState;
-
-  _objectDestructuringEmpty(instance.options);
-
-  var setColumnOrder = instance.setColumnOrder;
+  var getState = instance.getState,
+      setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
@@ -2579,7 +2580,8 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -2846,7 +2848,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _useDrop = useDrop({
     accept: 'column',
     drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -3070,7 +3073,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,
@@ -3107,8 +3110,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,
@@ -3334,7 +3337,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,
@@ -3484,7 +3488,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;
@@ -3503,7 +3507,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;
@@ -3518,7 +3522,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 () {
@@ -3595,6 +3599,27 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
     }
   }, [props.enablePersistentState, props.tableId, props.persistentStateMode, instance]);
+  useEffect(function () {
+    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
+      columnOrder: instance.getState().columnOrder,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnOrder]);
+  useEffect(function () {
+    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
+      columnPinning: instance.getState().columnPinning,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnPinning]);
+  useEffect(function () {
+    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
+      columnPinning: instance.getState().columnVisibility,
+      //@ts-ignore
+      instance: instance
+    });
+  }, [instance.getState().columnVisibility]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,