RAC Table: How to have empty column header?

[emillaine]

I'm trying to implement a column of menu buttons to allow editing/deleting rows. That column is not supposed to have a visible label. Here's what I've tried:

• Passing no children to Column triggers the Table header text should not be empty axe rule.
• Replacing the Column with an empty Cell causes Cannot read properties of undefined (reading 'key')
• I also thought about adding just an aria-label to the Column but a) Column doesn't forward that prop to the DOM, and b) the aforementioned axe rule says it's incorrect.

What do you suggest?

[snowystinger]

One way is, instead of placing the buttons in their own column, just place them in the adjacent cell with that column's content and visually separate the content and the button (flex justify space between).

Another way we've accomplished this is to put a focusable but visually hidden element in the column header with an aria-label. This way it still gets focus and can have a tooltip for keyboard navigating users. Though we use this pattern less frequently than the first because it can make resizing look a little odd with our design.
Here's an example of the second way https://react-spectrum.adobe.com/react-spectrum/TableView.html#hide-header which you're welcome to look at the source code for as well.

[emillaine]

Thanks, I ended up making the label for our TableColumn component mandatory, but added a hideLabel prop which causes the label to be wrapped with <VisuallyHidden> so it works normally for assistive tech but is hidden visually.