material-react-table 0.15.0 → 0.16.1

package/dist/MaterialReactTable.d.ts

@@ -94,9 +94,9 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
     columns?: MRT_ColumnDef<D>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
-    enableColumnFilterChangeMode?: boolean;
     enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     filterFn?: MRT_FilterFn;
     filterSelectOptions?: (string | {

package/dist/localization.d.ts

@@ -55,11 +55,11 @@ export interface MRT_Localization {
     sortedByColumnAsc: string;
     sortedByColumnDesc: string;
     thenBy: string;
-    to: string;
     toggleDensity: string;
     toggleFullScreen: string;
     toggleSelectAll: string;
     toggleSelectRow: string;
+    toggleVisibility: string;
     ungroupByColumn: string;
     unpin: string;
     unpinAll: string;

package/dist/material-react-table.cjs.development.js

@@ -105,11 +105,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',
@@ -3434,6 +3434,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;
 
@@ -3504,15 +3507,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__default.createElement(MRT_GrabHandleButton, {
+  }) && (columnDef.enableColumnOrdering !== false ? React__default.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     instance: instance
-  }), !isSubMenu && column.getCanPin() && React__default.createElement(MRT_ColumnPinningButtons, {
+  }) : React__default.createElement(material.Box, {
+    sx: {
+      width: '28px'
+    }
+  })), enablePinning && !isSubMenu && (column.getCanPin() ? React__default.createElement(MRT_ColumnPinningButtons, {
     column: column,
     instance: instance
-  }), React__default.createElement(material.FormControlLabel, {
+  }) : React__default.createElement(material.Box, {
+    sx: {
+      width: '70px'
+    }
+  })), enableHiding ? React__default.createElement(material.FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -3522,13 +3533,22 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       }
     },
     checked: switchChecked,
-    control: React__default.createElement(material.Switch, null),
+    control: React__default.createElement(material.Tooltip, {
+      arrow: true,
+      enterDelay: 1000,
+      enterNextDelay: 1000,
+      title: localization.toggleVisibility
+    }, React__default.createElement(material.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__default.createElement(material.Typography, {
+    sx: {
+      alignSelf: 'center'
+    }
+  }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
       key: i + "-" + c.id,
@@ -5400,11 +5420,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__default.createElement(material.Box, {
@@ -5426,7 +5448,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     instance: instance
   }), enableFilters && enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
     instance: instance
-  }), enableHiding && React__default.createElement(MRT_ShowHideColumnsButton, {
+  }), (enableHiding || enableColumnOrdering || enablePinning) && React__default.createElement(MRT_ShowHideColumnsButton, {
     instance: instance
   }), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
     instance: instance
@@ -5729,7 +5751,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,
@@ -5877,7 +5899,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__default.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: {
@@ -5972,23 +5994,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__default.createElement(material.Box, {
     sx: {
       display: 'grid',
-      gridTemplateColumns: '6fr auto 5fr'
+      gridTemplateColumns: '6fr 6fr',
+      gap: '1rem'
     }
   }, React__default.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
     instance: instance
-  }), React__default.createElement(material.Box, {
-    sx: {
-      width: '100%',
-      minWidth: '5ch',
-      textAlign: 'center'
-    }
-  }, localization.to), React__default.createElement(MRT_FilterTextField, {
+  }), React__default.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 1,
     instance: instance
@@ -6089,7 +6105,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
@@ -7314,7 +7329,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,
@@ -7327,13 +7342,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 = React.useMemo(function () {
-    if (enableGlobalFilterRankedResults && globalFilter) {
+    if (enableGlobalFilterRankedResults && globalFilter && !getIsSomeColumnsSorted()) {
       var rankedRows = getPrePaginationRowModel().rows.sort(function (a, b) {
         return rankGlobalFuzzy(a, b);
       });
@@ -7345,8 +7366,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,
@@ -7572,7 +7593,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,
@@ -7722,7 +7744,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;
@@ -7741,7 +7763,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;
@@ -7756,7 +7778,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 = React.useMemo(function () {