fix: hidden columns resizing now works for correct col

material-table-core · Apr 18, 2022 · 080ce82 · 080ce82
1 parent febedb3
commit 080ce82
Showing 1 changed file with 15 additions and 14 deletions.
diff --git a/src/components/MTableHeader/index.js b/src/components/MTableHeader/index.js
@@ -10,12 +10,16 @@ import { Tooltip } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import * as CommonValues from '../../utils/common-values';
 
-export function MTableHeader({ onColumnResized, ...props }) {
+export function MTableHeader({ onColumnResized, columns, ...props }) {
   const defaultMinColumnWidth = 20;
   const defaultMaxColumnWidth = 10000;
 
   const [resizing, setResizing] = React.useState(undefined);
   const [lastX, setLastX] = React.useState(0);
+  const displayingColumns = React.useMemo(
+    () => columns.filter((c) => c.hidden !== true),
+    [columns]
+  );
 
   const handleMouseDown = (e, columnDef, colIndex) => {
     const startX = e.clientX;
@@ -30,7 +34,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       nextWidth =
         nextTh &&
         Math.round(+window.getComputedStyle(nextTh).width.slice(0, -2));
-      nextColIndex = props.columns.findIndex(
+      nextColIndex = displayingColumns.findIndex(
         (c) => c.tableData.id === columnDef.tableData.id + 1
       );
     } else if (!initialColWidths) {
@@ -45,9 +49,9 @@ export function MTableHeader({ onColumnResized, ...props }) {
       colIndex,
       nextColIndex,
       lastColData: { ...columnDef.tableData, width: currentWidth },
-      ...(nextColIndex && {
+      ...(nextColIndex !== -1 && {
         lastNextColData: {
-          ...props.columns[nextColIndex].tableData,
+          ...displayingColumns[nextColIndex].tableData,
           width: nextWidth
         }
       }),
@@ -80,7 +84,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
       }
 
       const curX = e.clientX;
-      const col = props.columns[resizing.colIndex];
+      const col = displayingColumns[resizing.colIndex];
       const alreadyOffset =
         col.tableData.additionalWidth - resizing.lastColData.additionalWidth;
       let offset = constrainedColumnResize(
@@ -90,9 +94,9 @@ export function MTableHeader({ onColumnResized, ...props }) {
       );
       offset = Math.round(offset);
       const widths = [resizing.lastColData.width + alreadyOffset];
-      if (props.tableWidth === 'full') {
+      if (props.tableWidth === 'full' && resizing.lastNextColData) {
         offset = -constrainedColumnResize(
-          props.columns[resizing.nextColIndex],
+          displayingColumns[resizing.nextColIndex],
           resizing.lastNextColData.width - alreadyOffset,
           -offset
         );
@@ -116,7 +120,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
     (e) => {
       if (resizing && lastX !== resizing.startX) {
         onColumnResized(
-          props.columns[resizing.colIndex].tableData.id,
+          displayingColumns[resizing.colIndex].tableData.id,
           0,
           [],
           []
@@ -193,11 +197,8 @@ export function MTableHeader({ onColumnResized, ...props }) {
   function RenderHeader() {
     const size = props.options.padding === 'default' ? 'medium' : 'small';
 
-    return props.columns
-      .filter(
-        (columnDef) =>
-          !columnDef.hidden && !(columnDef.tableData.groupOrder > -1)
-      )
+    return displayingColumns
+      .filter((columnDef) => !(columnDef.tableData.groupOrder > -1))
       .sort((a, b) => a.tableData.columnOrder - b.tableData.columnOrder)
       .map((columnDef, index, allCols) => {
         let content = columnDef.title;
@@ -396,7 +397,7 @@ export function MTableHeader({ onColumnResized, ...props }) {
         />
       );
     }
-    props.columns
+    displayingColumns
       .filter((columnDef) => columnDef.tableData.groupOrder > -1)
       .forEach((columnDef) => {
         headers.splice(