feat: Add colspan to Table #7638

oyvinmar · 2025-01-20T21:27:40Z

Closes #5334, closes #5862

This change adds support for colSpan to the table. The changes can be reviewed commit by commit. The first commit adds colSpan support; the second adds aria-col-index, which makes keyboard navigation slightly simpler but adds some complexity to updating the cells with the correct column index.

Some implementation details/concerns/questions:

~~I'm unsure if this is the best way to update the grid nodes with the attributes. If there's a better way, please let me know.~~
~~aria-col-index is added to every cell, even in rows where colspan isn't used. I could probably look this up before adding it, but I'm worried that could be an expensive operation.~~
I've not added any tests yet (or updated documentation). I would like to add some for the keyboard delegate but want to make sure I'm on the right path first.

✅ 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:

I've provided Storybook examples, which I have used to test the changes. They should be findable by searching for «colspan».

🧢 Your Project:

We are evaluating react-aria-components for a new implementation of a table provided by our internal design system.

snowystinger

Thanks for the PR! Had a quick look, it looks like the right direction to go, I'll bring it up with the team later this week.

Some notes for the team:

Looks like VO support isn't great for colspans, announcement is only "x of n" where "n" is less than overall number of columns. It doesn't mention anything about how many columns it covers or what the title/owning column is. I tested it against the MDN docs as well, appears to be the same, so this may be expected. It behaves the same with the virtualized RSP table as well.

We'll need to do more testing with the other screen readers.

packages/@react-aria/grid/src/useGridCell.ts

nwidynski · 2025-01-20T23:25:17Z

@oyvinmar I've recently worked a lot on the grid edit mode, so I'm hoping to be able to be of help with some of your questions.

I'm unsure if this is the best way to update the grid nodes with the attributes.

Usually @react-aria/collections access pattern for node props is via the collection. You can view this pattern being applied in the SelectionManager, but it would look something like state.collection.getItem(node.key)?.props.colSpan.

The value of this gets automatically populated on the first render, when the collection is built. That is also why you don't see most of the cell props inside of the GridCellProps or TableCellProps interface(s).

aria-col-index is added to every cell, even in rows where colspan isn't used. I could probably look this up before adding it, but I'm worried that could be an expensive operation.

Via the before-mentioned pattern you can trivially check for the existence of a specific prop, since only then it will exist in the prop object of the node item. This is also not a DOM operation so no worries on that front.

I would like to add some for the keyboard delegate but want to make sure I'm on the right path first.

Afaik, the colSpan attribute is only supported on td and th elements per W3C spec. From a quick check through the codebase, i can only find one reference to the column node type inside grid hooks, so it's likely useTableCell & TableKeyboardDelegate are better suited to accomodate this behavior.

EDIT: Saw that @snowystinger also provided feedback on VO support for this already, so I'm sure the core maintainers will get back to you shortly with more specific guidance. Thanks again for the PR 👍

oyvinmar · 2025-01-21T19:24:06Z

Thanks for the fast feedback! I've changed to setting the grid node attributes in the collections and only include aria-col-index when the row has a colSpan cell (and when virtualized).

snowystinger

We briefly discussed this today. Again, thank you so much for contributing this feature. It looks like this is the correct direction. Adding tests is a good next step while we review the code.

One thing we'd like to add in the logic is some validation:
num cols === sum of col spans
and throw if this isn't true

…ct-aria-components

danielbrodin · 2025-01-29T08:41:34Z

Will this also add support for colspan on Column for cases where you want a subheading in the table with scope="colgroup"? Don't think the Column component has support for colgroup yet, but if it gets it colspan would be needed.

snowystinger · 2025-01-31T03:46:25Z

Will this also add support for colspan on Column for cases where you want a subheading in the table with scope="colgroup"? Don't think the Column component has support for colgroup yet, but if it gets it colspan would be needed.

column group support will have to come later, we don't have an API for it yet and I'd prefer not to add more to this pr

colspan is only added on Cell in this PR, so it's not on Column

snowystinger

In general this looks awesome, I only have a few comments. Thanks for adding tests and doing the React Spectrum implementation.

Question to team: Should we track column keys for repetitive arrow key up/down so that you stay in the same column until you intentionally change columns?
Go to /?path=/story/tableview--table-cell-col-span-with-various-spans-example, press Tab, ArrowRight, then ArrowDown x3, you'll have focus on the cell in Col1 instead of Col2.

snowystinger · 2025-01-31T04:13:05Z

packages/@react-aria/grid/src/useGridCell.ts

@@ -251,6 +253,8 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
  let gridCellProps: DOMAttributes = mergeProps(itemProps, {
    role: 'gridcell',
    onKeyDownCapture,
+    'aria-colspan': node.colspan,


can colspan match the capitalisation of the GridCellProps' colSpan?

It should be a fairly straightforward to change, but I think it would introduce a breaking change in table header (useTableColumnHeader): https://react-spectrum.adobe.com/react-aria/useTable.html#table-header

Ah, then probably we should go the other direction to match.

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

snowystinger · 2025-01-31T04:43:33Z

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

@@ -1213,6 +1257,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
    <TD
      {...mergeProps(filterDOMProps(props as any), gridCellProps, focusProps, hoverProps)}
      {...renderProps}
+      colSpan={cell.colspan}


it looks like in our table hooks we check for isVirtualized as a proxy for the elementType at the moment. let's move this down into the useGridCell hook

we may expand the support to actually checking elementType later and i'd prefer that all the logic is together

Do you mean something like adding something like this: colSpan: isVirtualized? undefined: node.colspan,? One potential issue I see with that is that it might be semantically wrong if you add virtualization to a RAC implementation. But that might be an edge case, and you would still have the aria-colspan attribute.

snowystinger · 2025-01-31T04:49:05Z

packages/@react-stately/grid/src/GridCollection.ts

+        if (child.type === 'cell' && rowHasCellWithColSpan) {
+          child.colspan = child.props?.colSpan;
+          child.colIndex = !last ? child.index : (last.colIndex ?? last.index) + (last.colspan ?? 1);
+        }


we have access to column count here, we should do the same check as we're doing in RAC, otherwise this is the message in React Spectrum

Uncaught TypeError: Cannot read properties of undefined (reading 'props')

Yes, I tried adding it there but got a lot of failing tests before I figured out I needed to check that node is of item type 😅 .

I've added it now.

snowystinger · 2025-01-31T04:49:50Z

packages/@react-stately/table/src/Row.ts

@@ -90,10 +90,6 @@ Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, conte
          }
        });

-        if (cells.length !== context.columns.length) {


that or we can check here again

henkkasoft · 2025-02-05T09:22:52Z

It's really great that this has been implemented, thank you very much! We are looking forward to start using this as soon as possible.

oyvinmar added 2 commits January 18, 2025 08:35

Add colSpan support to table cells

f27c641

Add aria-col-index to cells

800fd78

snowystinger reviewed Jan 20, 2025

View reviewed changes

packages/@react-aria/grid/src/useGridCell.ts Outdated Show resolved Hide resolved

oyvinmar added 2 commits January 21, 2025 15:31

Don't set colspan in useGridCell

e2113b0

Add colspan and colindex in collections

f28a70c

snowystinger reviewed Jan 23, 2025

View reviewed changes

oyvinmar added 4 commits January 25, 2025 20:12

Add colspan unit tests

176a53e

Add check to validate that cells total length match col length to rea…

a18dc0f

…ct-aria-components

Don't throw when isSSR

13aa125

Remove interfering test

425cae2

snowystinger reviewed Jan 31, 2025

View reviewed changes

oyvinmar added 2 commits January 31, 2025 12:46

Re-add throwing tests

577c149

Add check to validate number of cells match col length in GridCollection

0c7045e

oyvinmar force-pushed the main branch from 0ee5756 to 0c7045e Compare January 31, 2025 20:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add colspan to Table #7638

feat: Add colspan to Table #7638

oyvinmar commented Jan 20, 2025 •

edited by devongovett

Loading

snowystinger left a comment

nwidynski commented Jan 20, 2025 •

edited

Loading

oyvinmar commented Jan 21, 2025

snowystinger left a comment

danielbrodin commented Jan 29, 2025

snowystinger commented Jan 31, 2025

snowystinger left a comment

snowystinger Jan 31, 2025

oyvinmar Feb 1, 2025

snowystinger Feb 1, 2025

snowystinger Jan 31, 2025

oyvinmar Feb 1, 2025

snowystinger Jan 31, 2025

oyvinmar Jan 31, 2025

snowystinger Jan 31, 2025

henkkasoft commented Feb 5, 2025

feat: Add colspan to Table #7638

Are you sure you want to change the base?

feat: Add colspan to Table #7638

Conversation

oyvinmar commented Jan 20, 2025 • edited by devongovett Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

snowystinger left a comment

Choose a reason for hiding this comment

nwidynski commented Jan 20, 2025 • edited Loading

oyvinmar commented Jan 21, 2025

snowystinger left a comment

Choose a reason for hiding this comment

danielbrodin commented Jan 29, 2025

snowystinger commented Jan 31, 2025

snowystinger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

henkkasoft commented Feb 5, 2025

oyvinmar commented Jan 20, 2025 •

edited by devongovett

Loading

nwidynski commented Jan 20, 2025 •

edited

Loading