The proposed design makes sense to me 👍.

In this example, I feel like I would be able to resize each column but I'm not. It feels like the proposed design of Gerda would solve the problem:

https://mui.com/x/react-data-grid/#mit-version

Minor. I think that it could be interesting to see what's the UI for when the mouse down is pressed. I wonder if it's not a bit off today: 1. is the resize handle tall enough, it can be hidden behind the cursor. 2. is the color contrasting enough. This a quick benchmark, not sure. None feels like they make a major difference.

MUI X

Notion

Airtable

Google Sheet

I tried to validate the idea, here's a codesandbox with comparisons between different features: https://codesandbox.io/s/purple-shadow-c8l2xk?file=/demo.tsx

is the resize handle tall enough

I've made it a bit taller to test if it resolves the concerns. What do you think?
(Notion variant is nice too, not sure if it fits well in our layout)

I really liked the new implementation, especially the variant with header filters and how it defines the boundaries of each cell.

Regarding column groups, I think this one combined with the idea shown in #9162 could be a great improvement.

CC @gerdadesign

here's a codesandbox with comparisons between different features […] CC @gerdadesign

@MBilalShafi Great, thanks for looking into it! A few design execution feedback:

1. I think that the handle should stay active when moving the cursor out of the header:

2. I think that a small visual notch could improve the affordance that there is a handle to drag:

But I don't see how we can pull it off without forcing a background color on the whole data grid. I'm not sure this potential UX win is worth the DX customization pain.

3. Maybe it would make sense to make the drag handle blue (to look different) when it's active, and only dark when hovered. I'm saying maybe because I think it requires experimenting with it to be sure. I haven't seen other to benchmark against.