material-react-table 0.16.0 → 0.16.1

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
@@ -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
@@ -7578,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,
@@ -7728,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;
@@ -7747,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;
@@ -7762,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 () {