Function TableCell

packages/react-aria/stories/table/example-resizing.tsx:335–374

({
  cell,
  state,
  layout
}: {
  cell: any;
  state: any;
  layout: any;
})

}

export function TableCell({
  cell,
  state,
  layout
}: {
  cell: any;
  state: any;
  layout: any;
}): JSX.Element {
  let ref = useRef<HTMLTableCellElement | null>(null);
  let {gridCellProps} = useTableCell({node: cell}, state, ref);
  let {isFocusVisible, focusProps} = useFocusRing();
  let column = cell.column;
  let isSelected = state.selectionManager.isSelected(cell.parentKey);

  return (
    <td
      {...mergeProps(gridCellProps, focusProps)}
      style={{
        width: layout.getColumnWidth(column.key),
        padding: '5px 10px',
        outline: isFocusVisible ? '2px solid orange inset' : 'none',
        cursor: 'default',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        display: 'block',
        flex: '0 0 auto',
        // eslint-disable-next-line no-nested-ternary
        background: isSelected
          ? 'blueviolet'
          : cell.parentKey % 2
            ? 'var(--spectrum-gray-75)'
            : 'var(--spectrum-gray-100)'
      }}
      ref={ref}>
      {cell.rendered}
    </td>
  );
}

export function TableCheckboxCell({
  cell,