add data attributes

Author: sebald

packages/react-aria-components/src/Table.tsx

@@ -1373,6 +1373,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
   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,
@@ -1385,8 +1387,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       isHovered,
       isSelected,
       id: cell.key,
-      // colIndex is null, when there is so span, falling back to using the index
-      colIndex: cell.colIndex || cell.index 
+      colIndex
     }
   });
 
@@ -1400,7 +1401,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
-      data-selected={isSelected || undefined}>
+      data-selected={isSelected || undefined}
+      data-col-index={colIndex}>
       <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
         {renderProps.children}
       </CollectionRendererContext.Provider>

packages/react-aria-components/test/Table.test.js

@@ -889,6 +889,31 @@ describe('Table', () => {
     expect(cells[2]).toHaveTextContent('cell index: 3');
   });  
 
+  it('should support data-col-index attribute', () => {
+    let {getAllByRole} = render(
+      <Table aria-label="Search results">
+        <TableHeader>
+          <Column isRowHeader>Name</Column>
+          <Column isRowHeader>Type</Column>
+          <Column isRowHeader>Price</Column>
+          <Column isRowHeader>Total</Column>
+        </TableHeader>
+        <TableBody>
+          <Row>
+            <Cell colSpan={2}>Foo</Cell>
+            <Cell>Bar</Cell>
+            <Cell>Baz</Cell>
+          </Row>
+        </TableBody>
+      </Table>
+    );
+
+    let cells = getAllByRole('rowheader');
+    expect(cells[0]).toHaveAttribute('data-col-index', '0');
+    expect(cells[1]).toHaveAttribute('data-col-index', '2');
+    expect(cells[2]).toHaveAttribute('data-col-index', '3');
+  });  
+
   it('should support columnHeader typeahead', async () => {
     let {getAllByRole} = render(
       <Table aria-label="Files">