Rough draft of TableView resizing docs

Author: LFDanLu

packages/@react-spectrum/table/docs/TableView.mdx

@@ -12,7 +12,7 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/table';
 import tableTypes from 'docs:@react-types/table/src/index.d.ts';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs';
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-spectrum/table/package.json';
 
@@ -560,6 +560,65 @@ function AsyncSortTable() {
 }
 ```
 
+## Column Resizing <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+TableView supports resizable columns, allowing users to dynamically adjust the width of a column. To designate that a Column is resizable, provide it with the `allowsResizing` prop. This will render a draggable
+resizer handle for each resizable column that becomes visible on hover. Keyboard, touch, and screen reader users can enter "resize" mode by interacting with the target column's header and selecting the "Resize column" option
+from the dropdown.
+
+### Width values
+
+Columns support four different width props: `defaultWidth`, `width`, `minWidth`, and `maxWidth`. Each of these props accepts fixed values or percentages, with `width` and `defaultWidth` accepting fractional (`fr`) units as well.
+Providing a `width` to a Column sets its width to the value provided to it, making it unaffected by any changes to other columns' widths unless a fractional value is provided. Providing a `defaultWidth` allows you
+to specify a Column's initial width, but allows the column width to freely shrink and grow in response to changes in other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and
+maximum value respectively. In general, TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns.
+
+### Resize events
+
+TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's in a controlled fashion. TableView also accepts
+an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column.
+
+The example below illustrates how each of the applied column width properties affects their resize behavior. It also demonstrates the difference between when `onResize` and `onResizeEnd` fires and the values
+provided to both.
+
+TODO: fix types for width props
+```tsx example
+function ResizableTable() {
+  let [widths, setWidths] = React.useState(new Map());
+  let [finalWidths, setFinalWidths] = React.useState(new Map());
+  // TODO: fix bug where null is returned when just clicking the column header
+
+  return (
+    <Flex direction="column">
+      <TableView aria-label="TableView with resizable columns" width={600} height={200} onResize={setWidths} onResizeEnd={setFinalWidths}>
+        <TableHeader>
+          <Column key="file" allowsResizing maxWidth={500}>File Name</Column>
+          <Column key="type" allowsResizing defaultWidth="1fr">Type</Column>
+          <Column key="size" allowsResizing width={80}>Size</Column>
+          <Column key="date" allowsResizing minWidth={100}>Date Modified</Column>
+        </TableHeader>
+        <TableBody>
+          <Row>
+            <Cell>2022-Roadmap-Proposal-Revision-012822-Copy(2)</Cell>
+            <Cell>PDF</Cell>
+            <Cell>214 KB</Cell>
+            <Cell>November 27, 2022 at 4:56PM</Cell>
+          </Row>
+          <Row>
+            <Cell>62259692_p0_master1200</Cell>
+            <Cell>PNG</Cell>
+            <Cell>120 KB</Cell>
+            <Cell>January 27, 2021 at 1:56AM</Cell>
+          </Row>
+        </TableBody>
+      </TableView>
+      <pre>Column widths during resize: {widths ? JSON.stringify(Object.fromEntries(widths)) : widths}</pre>
+      <pre>Final column widths: {finalWidths ? JSON.stringify(Object.fromEntries(finalWidths)) : finalWidths}</pre>
+    </Flex>
+  );
+}
+```
+
 ## Props
 
 ### TableView props
@@ -642,41 +701,6 @@ function AsyncSortTable() {
 </TableView>
 ```
 
-### Column widths
-Columns support three different width props: `minWidth`, `width`, and `maxWidth`. Each of these props accepts fixed values or percentages. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns.
-
-```tsx example
-<TableView aria-label="Example table for column widths">
-  <TableHeader>
-    <Column maxWidth={300} align="start">Name</Column>
-    <Column width={80}>Type</Column>
-    <Column minWidth={100} align="end">Size</Column>
-  </TableHeader>
-  <TableBody>
-    <Row>
-      <Cell>2021406_Proposal</Cell>
-      <Cell>PDF</Cell>
-      <Cell>86 KB</Cell>
-    </Row>
-    <Row>
-      <Cell>Budget Template</Cell>
-      <Cell>XLS</Cell>
-      <Cell>120 KB</Cell>
-    </Row>
-    <Row>
-      <Cell>Onboarding</Cell>
-      <Cell>PPT</Cell>
-      <Cell>472 KB</Cell>
-    </Row>
-    <Row>
-      <Cell>Welcome</Cell>
-      <Cell>TXT</Cell>
-      <Cell>24 KB</Cell>
-    </Row>
-  </TableBody>
-</TableView>
-```
-
 ### Column dividers
 [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)