feat/fix: consider, when columns are resizable, extending the vertical resizer to every cell

[adamint]

🙋 Feature Request

As the title mentions. This was a suggestion made to us by a msft designer

🤔 Expected Behavior

Similar to Loop tables, the draggable vertical separator would extend to every cell in the column. This would only be necessary in resizable columns.

😯 Current Behavior

Only the separator between header cells is draggable.

[vnbaaij]

With the way the DataGrid is set up, the drag handle is actually a separate element (FluentDivider) inside the column header. It is implemented that way based on what is provided/prescribed in the Fluent Design. There is no design in there for presenting visible column borders/markers in the data rows. See https://react.fluentui.dev/?path=/docs/components-datagrid--docs#resizable-columns--preview- for the React component and design. They also only shown the resize handles in the header.

Also, the whole resizing mechanism is based on resizing the cells in the header of the table. Bottom line, these restrictions make it (currently) impossible to add this feature.

I did add PR #3756 which allows for displaying a resize indicator across all rows which, I think, at least makes the resize operation clearer.

[vnbaaij]

I might have found a way to enable this after all. PoC:

It will require some significant design changes, so it will not be in the next release (4.11.9) but for the one after that (4.12.0).