diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx
index 3c84031676b..15318265baf 100644
--- a/packages/@react-aria/table/stories/example-resizing.tsx
+++ b/packages/@react-aria/table/stories/example-resizing.tsx
@@ -26,7 +26,7 @@ import {
import {classNames} from '@react-spectrum/utils';
import {FocusRing, useFocusRing} from '@react-aria/focus';
import {mergeProps, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
import {useCheckbox} from '@react-aria/checkbox';
import {useRef} from 'react';
@@ -69,6 +69,7 @@ export function Table(props) {
state,
ref
);
+ let layout = useMemo(() => ({...layoutState, tableState: state}), [layoutState, state]);
useLayoutEffect(() => {
if (bodyRef && bodyRef.current) {
@@ -85,7 +86,7 @@ export function Table(props) {
{[...headerRow.childNodes].map(column =>
column.props.isSelectionCell
?
- :
+ :
)}
))}
@@ -125,16 +126,15 @@ export function TableHeaderRow({item, state, children, className}) {
);
}
-function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeEnd}) {
+function Resizer({column, layout, onResizeStart, onResize, onResizeEnd}) {
let ref = useRef(null);
let {resizerProps, inputProps} = useTableColumnResize({
column,
label: 'Resizer',
onResizeStart,
onResize,
- onResizeEnd,
- tableState: state
- } as AriaTableColumnResizeProps, layoutState, ref);
+ onResizeEnd
+ } as AriaTableColumnResizeProps, layout, ref);
return (
<>
@@ -163,7 +163,7 @@ function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeE
>
);
}
-export function TableColumnHeader({column, state, widths, layoutState, onResizeStart, onResize, onResizeEnd}) {
+export function TableColumnHeader({column, state, widths, layout, onResizeStart, onResize, onResizeEnd}) {
let ref = useRef();
let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
let {isFocusVisible, focusProps} = useFocusRing();
@@ -197,7 +197,7 @@ export function TableColumnHeader({column, state, widths, layoutState, onResizeS
{
column.props.allowsResizing &&
-
+
}
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index 91c91d0f9f3..922ae69d5eb 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -192,6 +192,9 @@ function TableView(props: SpectrumTableProps, ref: DOMRef {
let proxy = new Proxy(tableLayout, {
get(target, prop, receiver) {