feat(RAC): Expose cell's column index in its render props

[sebald]

Closes #4968

Hey there, I've updated the <Cell> component to include the cellIndex in its render props.

Why?

By passing down the index, we can easily look up the column props

This is super handy for dynamic styling. For example, if you want to align text based on a prop set on the column, you can now grab that config directly inside the cell.

Example Here is how you might use it to handle alignment:

import { PropsWithChildren, ReactNode, useContext } from 'react';
import {
  Cell as RACCell,
  CellProps as RACCellProps,
  Column as RACColumn,
  ColumnProps as RACColumnProps,
  Row,
  Table,
  TableBody,
  TableHeader,
  TableStateContext,
} from 'react-aria-components';

// Custom Column
interface ColumnProps extends RACColumnProps {
  align?: 'start' | 'center' | 'end';
}

const Column = ({ align, ...props }: ColumnProps) => (
  <RACColumn {...props} style={{ textAlign: align || 'start' }} />
);

// Custom Cell
interface CellProps extends Omit<RACCellProps, 'children'> {
  children: ReactNode;
}

const CellInner = ({
  colIndex,
  children,
}: PropsWithChildren<{ colIndex: number }>) => {
  const ctx = useContext(TableStateContext);
  const align = ctx?.collection.columns[colIndex].props.align;

  return <span style={{ textAlign: align || 'start' }}>{children}</span>;
};

const Cell = ({ children, ...props }: CellProps) => (
  <RACCell {...props}>
    {({ colIndex }) => <CellInner colIndex={colIndex}>{children}</CellInner>}
  </RACCell>
);

Usage

<Table aria-label="Files" selectionMode="multiple">
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column align="end">Date Modified</Column> // <-- set alignment on column
  </TableHeader>
  <TableBody>
    <Row id="row-1">
      <Cell>Games</Cell>
      <Cell>File folder</Cell>
      <Cell>6/7/2020</Cell>
    </Row>
    <Row id="row-2">
      <Cell>Program Files</Cell>
      <Cell>File folder</Cell>
      <Cell>4/7/2021</Cell>
    </Row>
    <Row id="row-3">
      <Cell>bootmgr</Cell>
      <Cell>System file</Cell>
      <Cell>11/20/2010</Cell>
    </Row>
    <Row id="row-4">
      <Cell>log.txt</Cell>
      <Cell>Text Document</Cell>
      <Cell>1/18/2016</Cell>
    </Row>
  </TableBody>
</Table>

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[reidbarber]

Looks like a good change.

Two questions for the team:

1. Should we also add colIndex (accounts for when colspans)
2. Should we add a data attribute?

[snowystinger]

Is there a difference between colIndex and cellIndex? It seems like you'd want colIndex and not really care about cellIndex as @reidbarber points out with colSpan
Adding a data attribute sounds like a great idea.

[sebald]

Thanks for getting back to me so fast 🥳

1. Just to be sure. colIndex is the column index on the column collection element? (cell.column.colIndex)
2. Should I add data attribute for both or just one?

[snowystinger]

Do we really need cellIndex? it seems a little arbitrary depending on colspans in previous cells.

[sebald]

Do we really need cellIndex? it seems a little arbitrary depending on colspans in previous cells.

No not really, column index seems the much more reliable property.

[sebald]

@snowystinger Updated, to pass the column index. Had to use the cell index as fallback since the colIndex is null when there is no span on the cell itself or a previous one in that row. Didn't want to touch the collection implementation so this seems a good solution to me.

Let me know what you think.

[sebald]

Added data attributes like @reidbarber requested :)

[reidbarber]

LGTM