Function TableRow

packages/react-aria/stories/table/example.tsx:162–189

({
  item,
  children,
  state
}: {
  item: any;
  children: ReactNode;
  state: any;
})

}

export function TableRow({
  item,
  children,
  state
}: {
  item: any;
  children: ReactNode;
  state: any;
}): JSX.Element {
  let ref = useRef<HTMLTableRowElement | null>(null);
  let isSelected = state.selectionManager.isSelected(item.key);
  let {rowProps} = useTableRow({node: item}, state, ref);
  let {isFocusVisible, focusProps} = useFocusRing();

  return (
    <tr
      style={{
        // eslint-disable-next-line no-nested-ternary
        background: isSelected ? 'blueviolet' : item.index % 2 ? 'lightgray' : 'none',
        color: isSelected ? 'white' : undefined,
        outline: isFocusVisible ? '2px solid orange' : 'none'
      }}
      {...mergeProps(rowProps, focusProps)}
      ref={ref}>
      {children}
    </tr>
  );
}

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