Function Table

packages/react-aria/stories/table/example-docs.tsx:28–102

(
  props: TableProps<T> & {
    onResizeStart?: (columnKey: string) => void;
    onResize?: (columnKey: string, width: number) => void;
    onResizeEnd?: (columnKey: string, width: number) => void;
  }
)

import {useTableRowGroup} from '../../src/table/useTableRowGroup';

export function Table<T extends object>(
  props: TableProps<T> & {
    onResizeStart?: (columnKey: string) => void;
    onResize?: (columnKey: string, width: number) => void;
    onResizeEnd?: (columnKey: string, width: number) => void;
  }
): JSX.Element {
  let {onResizeStart, onResize, onResizeEnd, ...rest} = props;

  let state = useTableState(rest);
  let ref = useRef<HTMLTableElement | null>(null);
  let {collection} = state;
  let {gridProps} = useTable(
    {
      ...props,
      // The table itself is scrollable rather than just the body
      scrollRef: ref
    },
    state,
    ref
  );

  let getDefaultMinWidth = useCallback(() => {
    return 40;
  }, []);

  let layoutState = useTableColumnResizeState(
    {
      // Matches the width of the table itself
      tableWidth: 300,
      getDefaultMinWidth
    },
    state
  );

  return (
    <table {...gridProps} ref={ref} className={classNames(ariaStyles, 'aria-table')}>
      <ResizableTableRowGroup
        type="thead"
        className={classNames(ariaStyles, 'aria-table-rowGroupHeader')}>
        {collection.headerRows.map(headerRow => (
          <ResizableTableHeaderRow key={headerRow.key} item={headerRow} state={state}>
            {[...headerRow.childNodes].map(column => (
              <ResizableTableColumnHeader
                key={column.key}
                column={column}
                state={state}
                layoutState={layoutState}
                onResizeStart={onResizeStart}
                onResize={onResize}
                onResizeEnd={onResizeEnd}
              />
            ))}
          </ResizableTableHeaderRow>
        ))}
      </ResizableTableRowGroup>
      <ResizableTableRowGroup
        className={classNames(ariaStyles, 'aria-table-rowGroupBody')}