Function Table

starters/hooks/src/Table.tsx:32–60

(props: TableProps)

export type TableProps = TableStateProps<object> & AriaTableProps & {children?: ReactNode};

export function Table(props: TableProps) {
  let state = useTableState({...props, showSelectionCheckboxes: false});
  let ref = useRef<HTMLTableElement>(null);
  let {collection} = state;
  let {gridProps} = useTable(props, state, ref);

  return (
    <table {...gridProps} ref={ref} className="react-aria-Table">
      <TableRowGroup type="thead">
        {collection.headerRows.map(headerRow => (
          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
            {[...headerRow.childNodes].map(column => (
              <TableColumnHeader key={column.key} column={column} state={state} />
            ))}
          </TableHeaderRow>
        ))}
      </TableRowGroup>
      <TableRowGroup type="tbody">
        {[...collection.body.childNodes].map(row => (
          <TableRow key={row.key} item={row} state={state}>
            {[...row.childNodes].map(cell => (
              <TableCell key={cell.key} cell={cell} state={state} />
            ))}
          </TableRow>
        ))}
      </TableRowGroup>
    </table>
  );
}

function TableRowGroup({type: Element, children}: {type: 'thead' | 'tbody'; children: ReactNode}) {
  let {rowGroupProps} = useTableRowGroup();