[EuiDataGrid] Custom column headers

[chandlerprall]

Summary

Adds an optional display field onto the datagrid's column type which allows for any custom ReactNode

[myasonik]

With custom headers we finally have to resolve the long standing TODO of allowing users to focus on header cells as well.

If any header cell has a tabbable child, every header cell should allow users to focus on it in the same way the rest of the cells work. Also, not sure what will "just happen" when that's implemented but, the initial cell that a user enters the grid at should stay/become the first focusable cell (be it a header cell or body cell).

[thompsongl]

LGTM, works as expected.

As long as we have that TODO tracked somewhere for implementation, we're good to merge

[chandlerprall]

I'll take a shot at navigating to the header row in this PR

[chandlerprall]

Added header navigation, I think I got all the edge cases for it.

• when any header cell contains interactive elements, enable navigation to the header cells
• if a header cell containing one interactive element receives focus, the focus shifts to its interactive element
• if the header cell contains more than one interactive element, focus stays on the cell until enter or f2 are pressed
• if a header cell's interactive element has focus, f2 and escape moves focus to the cell
• navigating out of a cell via arrow keys disables that cell's elements' tabIndex
• focusing off of a cell via tab or by clicking elsewhere in the document disables that cell's elements' tabIndex

I'm assuming I've missed something, so I'll add tests after approvals.

[chandlerprall]

@snide the header's focus state needs a design pass; I stole the styles straight from the body cells.

[snide]

OK. I'll give you a review / PR todayish.

[thompsongl]

Only odd thing I noticed was when multiple interactive elements are present:

• arrow to 'name' column header cell
• enter focuses 'email' icon button
• tab focuses 'menu' icon button
• tab jumps focus out of table to row pagination button

Not exactly sure what it should do. Cycle back to the 'email' icon button? Place focus back on the cell?

[chandlerprall]

@myasonik any thoughts on focus trap or similar solution on the header elements?

[snide]

I'll be adding a PR to fix some screen reader bits and CSS fixes.

To the multiple interactive elements issue, I'll point out this scenario should be EXTREMELY rare, and I think it's OK to let that part pass for the moment and just put a warning up in the docs. The main need for this functionality is so that people can add a clickable "column menu popup" into the header. These should always be single buttons, which themselves invoke a focus trapped popover. I can't think of a good reason anyone would want multiple buttons inside of a column header.

[thompsongl]

@snide Agreed on the rarity bit. If this is a thing we can solve with design documentation, I'd almost prefer that over introducing a focus trap.

[myasonik]

How would y'all feel about erroring if we detect multiple tabbable header elements?

Because we don't expect implementing developers to do this and it's not a good experience for end users, if we throw an error, then an implementing dev will have to at least bring it up to us so we know it's a real use case (or, we can suggest an alternative).

[myasonik]

@chandlerprall, small bug:
If the header cells are focusable, the first time a user tabs into the grid, it should place focus on the first header cell, not on the first grid-body cell.

[chandlerprall]

If the header cells are focusable, the first time a user tabs into the grid, it should place focus on the first header cell, not on the first grid-body cell.

Fixed!

[chandlerprall]

Added a console.warn when more than one tabbable element is discovered in a single header cell.

[thompsongl]

New additions LGTM

[snide]

Pushed some design fixes (I'll flesh out a popover example in the docs PR), and fixed some accessibility stuff.

[myasonik]

Found a bug 😕

Pick a sort, then remove that sort:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

[chandlerprall]

Found a bug 😕
Pick a sort, then remove that sort:

This only happens when the sort is added and removed without interacting with other elements. I took a quick look and was unable to immediately find the cause. As this doesn't have any meaningful impact I think we're good to merge with this state and make a deeper investigation separately.