Function Table

packages/react-aria/stories/table/example.tsx:32–98

(
  props: TableProps<T> & {
    selectionStyle?: 'highlight' | 'checkbox';
    selectionBehavior?: SelectionBehavior;
    onAction?: (key: Key) => void;
  }
)

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

export function Table<T extends object>(
  props: TableProps<T> & {
    selectionStyle?: 'highlight' | 'checkbox';
    selectionBehavior?: SelectionBehavior;
    onAction?: (key: Key) => void;
  }
): JSX.Element {
  let [showSelectionCheckboxes, setShowSelectionCheckboxes] = useState(
    props.selectionStyle !== 'highlight'
  );
  let state = useTableState({
    ...props,
    showSelectionCheckboxes,
    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
  });
  // 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
    },
    state,
    ref
  );

  return (
    <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
      <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
        {collection.headerRows.map(headerRow => (
          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
            {[...state.collection.getChildren!(headerRow.key)].map(column =>
              column.props.isSelectionCell ? (
                <TableSelectAllCell key={column.key} column={column} state={state} />
              ) : (
                <TableColumnHeader key={column.key} column={column} state={state} />
              )
            )}
          </TableHeaderRow>
        ))}
      </TableRowGroup>
      <TableRowGroup
        ref={bodyRef}
        type="tbody"
        style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
        {[...collection].map(row => (
          <TableRow key={row.key} item={row} state={state}>
            {[...state.collection.getChildren!(row.key)].map(cell =>
              cell.props.isSelectionCell ? (
                <TableCheckboxCell key={cell.key} cell={cell} state={state} />
              ) : (