Function TableCell

packages/react-aria/stories/table/example.tsx:191–208

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

}

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

  return (
    <td
      {...mergeProps(gridCellProps, focusProps)}
      style={{
        padding: '5px 10px',
        outline: isFocusVisible ? '2px solid orange' : 'none',
        cursor: 'default'
      }}
      ref={ref}>
      {cell.rendered}
    </td>
  );
}

export function TableCheckboxCell({cell, state}: {cell: any; state: any}): JSX.Element {
  let ref = useRef<HTMLTableCellElement | null>(null);