MudDataGrid: Add styles for resizing div

[TobiasBreuer]

Feature to allow resizing of columns

Description

Allows resizing of individual columns

How Has This Been Tested?

BUnit tests and manual testing.
Example added to docs

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[TobiasBreuer]

@tjscience WIP of first shot for resizing. The easy part is when the grid itself is also not fixed in the width.
Next will be to allow column resizing in case the grid itself should remain its originally given size...

It's still an early stage demo but I think I'm moving into the right direction 😉

[TobiasBreuer]

@tjscience: In order to better support resizing when grid size is fixed, I would like to introduce a ColumnIndex parameter on the column class. This would also allow for later column re-ordering feature which most likely will come up at some time anyways.
Any objections from your side against such a property?

[tjscience]

@TobiasBreuer, no objection there. I thought I did have column re-ordering in phase 3 and we will need something like this for it. I will add that to the phase.

[tjscience]

I personally like the way that DevExpress handles resizing. There are three modes, NextColumn, ColumnsContainer (what you have done so far), and Disabled.

https://demos.devexpress.com/blazor/Grid/Columns

[TobiasBreuer]

That's great! I actually am used to that behaviour as well (even though based on their Angular grid component - but the modes are the same there). And for this "NextColumn" feature, I like to have the deterministic order of columns based on the index parameter 😉

[tjscience]

Hi @TobiasBreuer. I just wanted to check-in to see if you are still working on this. Let me know if you need anything. Thanks.

[TobiasBreuer]

Hey Terry, sorry for not giving an update. It has been some busy times lately. Lot of projects with customer pressure on upcoming releases 😉 I‘ll definitely finish this feature up. The remaining effort should not be more than two days including docs and tests. I’m planning to be finished by end of next week if this is soon enough. Otherwise please let me know then I’ll try to fasten things up by re-scheduling some other topics. Best regards, Tobias

[tjscience]

Take your time. No rush at all.

[TobiasBreuer]

@tjscience: Implementation finished for both resizing variants:

Please have a look and let me know what you think.
Best regards!

[TobiasBreuer]

Looks like pipeline is not happy.
Will do another rebase and update the PR asap.

[TobiasBreuer]

There is a failing test now but this does not seem to be related to my changes actually:

[tjscience]

I will take a look, thanks.

[tjscience]

This looks good. Thanks again!

[tjscience]

I have merged it and it works pretty well. Great job! I modified the example a bit to make it more consistent with how the examples work and also fixed a typo, but everything else is working well.

The one thing that I think we should change here is the css to change the cursor. Right now, it only shows up when the user hovers over the resizer. However, if you are in the process of resizing and you do not go super slow, the cursor toggles back and forth between the pointer and the resize column. I think that it would be better to change the cursor for the entire data grid when we are resizing. Let me know your thoughts and if that is something that you know how to do.

[TobiasBreuer]

@tjscience: Good idea with the cursor improvements. I've created #55 for it.
It improves the situation most of the time, but when reaching the options buttons or the column title it still changes back to pointer. See also my comment on that PR 😉
Best regards!