Function TableColumnHeader

packages/react-aria/stories/table/example.tsx:131–160

({column, state}: {column: any; state: any})

}

export function TableColumnHeader({column, state}: {column: any; state: any}): JSX.Element {
  let ref = useRef<HTMLTableCellElement | null>(null);
  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
  let {isFocusVisible, focusProps} = useFocusRing();
  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';

  return (
    <th
      {...mergeProps(columnHeaderProps, focusProps)}
      style={{
        textAlign: column.colSpan > 1 ? 'center' : 'left',
        padding: '5px 10px',
        outline: isFocusVisible ? '2px solid orange' : 'none',
        cursor: 'default'
      }}
      ref={ref}>
      {column.rendered}
      {column.props.allowsSorting && (
        <span
          aria-hidden="true"
          style={{
            padding: '0 2px',
            visibility: state.sortDescriptor?.column === column.key ? 'visible' : 'hidden'
          }}>
          {arrowIcon}
        </span>
      )}
    </th>
  );
}

export function TableRow({
  item,