move the min/max check to TableLayout so that it will correctly support percentage values for min/max

Author: Marshall Peterson

packages/@react-aria/table/src/useTableColumnResize.ts

@@ -21,15 +21,13 @@ export function useTableColumnResize(state, item): any {
   const columnResizeWidthRef = useRef(null);
   const {moveProps} = useMove({
     onMoveStart() {
-      stateRef.current.setCurrentResizeColumn(item.key);
+      stateRef.current.setCurrentResizeColumn(item);
       stateRef.current.addResizedColumn(item.key);
       columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key);
     },
     onMove({deltaX}) {
       columnResizeWidthRef.current += deltaX;
-      let widthRespectingBoundaries = Math.max(item.props.minWidth || 75, Math.min(columnResizeWidthRef.current, item.props.maxWidth || Infinity));
-      stateRef.current.setResizeDelta(widthRespectingBoundaries);
-      stateRef.current.setColumnWidth(item.key, widthRespectingBoundaries);
+      stateRef.current.setResizeDelta(columnResizeWidthRef.current);
     },
     onMoveEnd() {
       stateRef.current.setCurrentResizeColumn();

packages/@react-spectrum/table/stories/Table.stories.tsx

@@ -28,7 +28,7 @@ import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Link} from '@react-spectrum/link';
 import {LoadingState, SelectionMode} from '@react-types/shared';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {Key, useState} from 'react';
+import React, {Key, useMemo, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
@@ -1070,6 +1070,12 @@ storiesOf('TableView', module)
         </TableBody>
       </TableView>
     )
+  )
+  .add(
+    'resizable columns, controlled',
+    () => (
+      <ResizableColumnsControlled />
+    )
   );
 
 function AsyncLoadingExample() {
@@ -1419,3 +1425,60 @@ export function TableWithBreadcrumbs() {
     </Flex>
   );
 }
+
+function ResizableColumnsControlled() {
+  let columns = [
+    {
+      key: 0,
+      label: 'File Name',
+      allowsResizing: true,
+      width: 300
+    },
+    {
+      key: 1,
+      label: 'Type',
+      allowsResizing: true,
+      width: 200
+    },
+    {
+      key: 2,
+      label: 'Size',
+      allowsResizing: true,
+      width: 96
+    }
+  ];
+
+  let [columnState, setColumnState] = useState(columns);
+
+  let onResize = (key, prevWidth, newWidth) => {
+    if (newWidth !== prevWidth) {
+      let updatedColumnState = columnState.map(c => key === c.key ? {...c, width: newWidth} : c);
+      setColumnState(updatedColumnState);
+
+    }
+
+  };
+
+
+  return (
+    <TableView aria-label="TableView with resizable columns" width={600} height={200}>
+      <TableHeader>
+        {
+            columnState.map(c => useMemo(() => (<Column allowsResizing={c.allowsResizing} width={c.width} onResize={(newWidth) => onResize(c.key, c.width, newWidth)}>{c.label}</Column>), [c.width]))
+        }
+      </TableHeader>
+      <TableBody>
+        <Row>
+          <Cell>2018 Proposal</Cell>
+          <Cell>PDF</Cell>
+          <Cell>214 KB</Cell>
+        </Row>
+        <Row>
+          <Cell>Budget</Cell>
+          <Cell>XLS</Cell>
+          <Cell>120 KB</Cell>
+        </Row>
+      </TableBody>
+    </TableView>
+  );
+}

packages/@react-stately/layout/src/TableLayout.ts

@@ -21,9 +21,9 @@ type TableLayoutOptions<T> = ListLayoutOptions<T> & {
   getDefaultWidth: (props) => string | number,
   columnWidths: Map<Key, number>,
   getColumnWidth: (key: Key) => number,
-  setColumnWidth: (key: Key, width: number) => void,
+  setColumnWidth: (column: any, width: number) => void,
   hasResizedColumn: (key: Key) => boolean,
-  currentResizeColumn: Key,
+  currentResizeColumn: any,
   resizeDelta: number
 }
 
@@ -35,9 +35,9 @@ export class TableLayout<T> extends ListLayout<T> {
   stickyColumnIndices: number[];
   getDefaultWidth: (props) => string | number;
   getColumnWidth_: (key: Key) => number;
-  setColumnWidth: (key: Key, width: number) => void;
+  setColumnWidth_: (column: any, width: number) => void;
   hasResizedColumn: (key: Key) => boolean;
-  currentResizeColumn: Key;
+  currentResizeColumn: any;
   resizeDelta: number;
   wasLoading = false;
   isLoading = false;
@@ -47,7 +47,7 @@ export class TableLayout<T> extends ListLayout<T> {
     this.getDefaultWidth = options.getDefaultWidth;
     this.columnWidths = options.columnWidths;
     this.getColumnWidth_ = options.getColumnWidth;
-    this.setColumnWidth = options.setColumnWidth;
+    this.setColumnWidth_ = options.setColumnWidth;
     this.hasResizedColumn = options.hasResizedColumn;
     this.currentResizeColumn = options.currentResizeColumn;
     this.columnWidthsRef = this.columnWidths;
@@ -71,11 +71,26 @@ export class TableLayout<T> extends ListLayout<T> {
     this.wasLoading = this.isLoading;
     this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
-    const resizeIndex = this.collection.columns.findIndex(column => column.key === this.currentResizeColumn);
-    let affectedResizeColumns = this.collection.columns.slice(resizeIndex + 1, this.collection.columns.length);
-    let remainingSpace = this.virtualizer.visibleRect.width;
-    remainingSpace = this.collection.columns.slice(0, resizeIndex + 1).reduce((acc, column) => acc - this.getColumnWidth_(column.key), this.virtualizer.visibleRect.width);
+    // only rebuild columns that come after the column being resized, if no column is being resized, they will all be built
+    const resizeIndex = this.collection.columns.findIndex(column => column.key === this.currentResizeColumn?.key);
+    // if resizing, set the column width for the resized column to the delta bounded by it's min/max
+    if (resizeIndex > -1) {
+      const columnProps = this.collection.columns[resizeIndex].props;
+      const boundedResizeDelta = Math.max(this.getMinWidth(columnProps?.minWidth), Math.min(this.getMaxWidth(columnProps.maxWidth), this.resizeDelta));
+
+      if (columnProps.width) {
+        // Controlled component - explicit width is defined and should always win.
+        // Unsure: Set column width to current width but call onResize with the new width?
+        this.setColumnWidth_(this.currentResizeColumn, columnProps.width);
+        columnProps.onResize && columnProps.onResize(boundedResizeDelta);
+      } else {
+        this.setColumnWidth(this.currentResizeColumn, boundedResizeDelta);
+      }
+    }
+    const affectedResizeColumns = this.collection.columns.slice(resizeIndex + 1, this.collection.columns.length);
+    const remainingSpace = this.collection.columns.slice(0, resizeIndex + 1).reduce((acc, column) => acc - this.getColumnWidth_(column.key), this.virtualizer.visibleRect.width);
     this.buildColumnWidths(affectedResizeColumns, remainingSpace);
+
     let header = this.buildHeader();
     let body = this.buildBody(0);
     body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
@@ -86,6 +101,11 @@ export class TableLayout<T> extends ListLayout<T> {
     ];
   }
 
+  setColumnWidth(column, newWidth) {
+    this.setColumnWidth_(column, newWidth);
+    column.props.onResize && column.props.onResize(newWidth);
+  }
+
   buildColumnWidths(affectedResizeColumns: GridNode<T>[], remainingSpace: number) {
     this.stickyColumnIndices = [];
 
@@ -104,7 +124,7 @@ export class TableLayout<T> extends ListLayout<T> {
       if (this.getIsStatic(width)) {
         let w = this.parseWidth(width);
         this.columnWidthsRef.set(column.key, w);
-        this.setColumnWidth(column.key, w);
+        this.setColumnWidth(column, w);
         remainingSpace -= w;
       } else {
         remainingColumns.add(column);
@@ -126,7 +146,7 @@ export class TableLayout<T> extends ListLayout<T> {
       let i = 0;
       for (let column of remainingColumns) {
         this.columnWidthsRef.set(column.key, remCols[i].columnWidth);
-        this.setColumnWidth(column.key, remCols[i].columnWidth);
+        this.setColumnWidth(column, remCols[i].columnWidth);
         i++;
       }
     }

packages/@react-stately/table/src/useTableState.ts

@@ -37,7 +37,7 @@ export interface TableState<T> extends GridState<T, ITableCollection<T>> {
 
   columnWidths(): Map<Key, number>,
   getColumnWidth(key: Key): number,
-  setColumnWidth(key: Key, width: number),
+  setColumnWidth(column: any, width: number),
 
   hasResizedColumn(key: Key): boolean,
   addResizedColumn(key: Key),
@@ -102,8 +102,8 @@ export function useTableState<T extends object>(
     return columnWidthsRef.current.get(key);
   }
 
-  function setColumnWidthNew(key: Key, width: number) {
-    columnWidthsRef.current.set(key, width);
+  function setColumnWidthNew(column: any, width: number) {
+    columnWidthsRef.current.set(column.key, width);
     // new map so that change detection is triggered
     setColumnWidths(new Map(columnWidthsRef.current));
   }