Repository: adobe/react-spectrum
File: packages/react-aria-components/src/Table.tsx (TypeScript)

Code before:
  if (isVirtualized) {
    return <dom.div {...props} ref={ref} />;
  }
  return <dom.td {...props} ref={ref} />;
});

/**
 * A cell within a table row.
 */
export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement | HTMLDivElement>, cell: GridNode<unknown>) => {
  let ref = useObjectRef<HTMLTableCellElement | HTMLDivElement>(forwardedRef);
  let state = useContext(TableStateContext)!;
  let {dragState} = useContext(DragAndDropContext);
  let {isVirtualized} = useContext(CollectionRendererContext);

  cell.column = state.collection.columns[cell.index];

  let {gridCellProps, isPressed} = useTableCell({
    node: cell,
    shouldSelectOnPressUp: !!dragState,
    isVirtualized
  }, state, ref);
  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
  let {hoverProps, isHovered} = useHover({});
  let isSelected = cell.parentKey != null ? state.selectionManager.isSelected(cell.parentKey) : false;
  // colIndex is null, when there is so span, falling back to using the index
  let colIndex = cell.colIndex || cell.index;

  let renderProps = useRenderProps({
    ...props,
    id: undefined,
    defaultClassName: 'react-aria-Cell',
    values: {
      isFocused,
      isFocusVisible,
      isPressed,
      isHovered,
      isSelected,
      id: cell.key,
      colIndex
    }
  });

  let DOMProps = filterDOMProps(props as any, {global: true});
  delete DOMProps.id;

  return (
    <TableCellElementType
      {...mergeProps(DOMProps, renderProps, gridCellProps, focusProps, hoverProps)}
      ref={ref as any}
      data-focused={isFocused || undefined}

Review comment (suggestion):
```suggestion
  // columnIndex is null, when there is so span, falling back to using the index
```

Code after:
  if (isVirtualized) {
    return <dom.div {...props} ref={ref} />;
  }
  return <dom.td {...props} ref={ref} />;
});

/**
 * A cell within a table row.
 */
export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement | HTMLDivElement>, cell: GridNode<unknown>) => {
  let ref = useObjectRef<HTMLTableCellElement | HTMLDivElement>(forwardedRef);
  let state = useContext(TableStateContext)!;
  let {dragState} = useContext(DragAndDropContext);
  let {isVirtualized} = useContext(CollectionRendererContext);

  cell.column = state.collection.columns[cell.index];

  let {gridCellProps, isPressed} = useTableCell({
    node: cell,
    shouldSelectOnPressUp: !!dragState,
    isVirtualized
  }, state, ref);
  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
  let {hoverProps, isHovered} = useHover({});
  let isSelected = cell.parentKey != null ? state.selectionManager.isSelected(cell.parentKey) : false;
  // colIndex is null, when there is so span, falling back to using the index
  let columnIndex = cell.colIndex || cell.index;

  let renderProps = useRenderProps({
    ...props,
    id: undefined,
    defaultClassName: 'react-aria-Cell',
    values: {
      isFocused,
      isFocusVisible,
      isPressed,
      isHovered,
      isSelected,
      id: cell.key,
      columnIndex
    }
  });

  let DOMProps = filterDOMProps(props as any, {global: true});
  delete DOMProps.id;

  return (
    <TableCellElementType
      {...mergeProps(DOMProps, renderProps, gridCellProps, focusProps, hoverProps)}
      ref={ref as any}
      data-focused={isFocused || undefined}