Function Table

packages/react-aria/stories/table/example-resizing.tsx:43–156

(
  props: TableProps<T> & {
    selectionStyle?: 'highlight' | 'checkbox' | 'none';
    onAction?: (key: Key) => void;
    onResizeStart?: (widths: Map<Key, ColumnSize>) => void;
    onResize?: (widths: Map<Key, ColumnSize>) => void;
    onResizeEnd?: (widths: Map<Key, ColumnSize>) => void;
  }
)

import {VisuallyHidden} from '../../src/visually-hidden/VisuallyHidden';

export function Table<T extends object>(
  props: TableProps<T> & {
    selectionStyle?: 'highlight' | 'checkbox' | 'none';
    onAction?: (key: Key) => void;
    onResizeStart?: (widths: Map<Key, ColumnSize>) => void;
    onResize?: (widths: Map<Key, ColumnSize>) => void;
    onResizeEnd?: (widths: Map<Key, ColumnSize>) => void;
  }
): JSX.Element {
  let [showSelectionCheckboxes, setShowSelectionCheckboxes] = useState(
    props.selectionStyle !== 'highlight'
  );
  let state = useTableState({
    ...props,
    showSelectionCheckboxes,
    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
  });

  let [tableWidth, setTableWidth] = useState(0);
  let getDefaultWidth = useCallback(() => undefined, []);
  let getDefaultMinWidth = useCallback(() => 75, []);
  let layoutState = useTableColumnResizeState(
    {
      getDefaultWidth,
      getDefaultMinWidth,
      tableWidth
    },
    state
  );

  // If the selection behavior changes in state, we need to update showSelectionCheckboxes here due to the circular dependency...
  let shouldShowCheckboxes = state.selectionManager.selectionBehavior !== 'replace';
  if (shouldShowCheckboxes !== showSelectionCheckboxes) {
    setShowSelectionCheckboxes(shouldShowCheckboxes);
  }
  let ref = useRef<HTMLTableElement | null>(null);
  let bodyRef = useRef<HTMLElement | null>(null);
  let {collection} = state;
  let {gridProps} = useTable(
    {
      ...props,
      onRowAction: props.onAction,
      scrollRef: bodyRef,
      'aria-label': 'example table'
    },
    state,
    ref
  );
  let layout = useMemo(() => ({...layoutState, tableState: state}), [layoutState, state]);

  useLayoutEffect(() => {
    if (bodyRef && bodyRef.current) {
      setTableWidth(bodyRef.current.clientWidth);
    }
  }, []);
  useResizeObserver({ref, onResize: () => setTableWidth(bodyRef.current!.clientWidth)});

  return (