feat: add support for multiple lines in the header to the DataGrid

[trondjun]

🙋 Feature Request

Long headings in the Datagrid are hidden at the end of the column width.
You could extend the width of the column to see the whole text, but a data grid with numbers would benefit from showing the whole text without needing to expand the table.

🤔 Expected Behavior

There could be a parameter allowing multiline text in the header, like the normal table cells have in the new versions.

😯 Current Behavior

Example from a project Im working on:
"Average yearly hours by assistants" and the numbers in the table are in the range of 33.5
"Average yearly hours by pedagogues" and the numbers in the table are in the range of 58.9
When aligning the column width with the length of the header it loos like this:

Average yearly hours by assistants	AAverage yearly hours by pedagogues
33.5	58.9

Without setting the column width, you get something like this:

Average yea	Average yea
33.5	58.9

💁 Possible Solution

Parameter MultiLineHeader bool - Allows for multiline headers

💻 Examples

With multiline it could look something like this

Average year hours by assistants	Average year hours by pedagogues
33.5	58.9

When using the table to analyze data, this makes comparison between data in the different columns much easier

[vnbaaij]

Hi,

Thanks for your suggestion but we have currently no plans to implement this. I'm moving this to the discussion area so more people can indicate if they have an interest in this.
Although it seems a simple adjustment/change, there is a lot more to it underwater. A header is often displayed as a button (to trigger some action on a column) and then it quickly becomes more complicated to make this change.

[trondjun]

Thanx for updating!

If you at some point do changes on the grid headers, this would be very appreciated. If I at some point get my head over water, I'll look into it and there might be pull request :)

[parsalotfy]

@trondjun Hi, did you manage to make multiline header somehow? like changing the css?

[parsalotfy]

sure, I'll let you know If I found a solution. In our case we have 15+ columns, and client need them all to be visible without horizontal scrolling, I don't know how to do that!

[trondjun]

It is pretty much the same issue I have. What I did as a temporary solution was to create acronyms lik: "The number of instances running in the cloud" to "Cloud" and a tooltip that had the whole text.
I disussed this with the customer, and they would rather have that than horizontal scroll.

[parsalotfy]

@trondjun I managed to make headers multiline using this css:

tr[row-type='sticky-header'] > th {
min-height: 0 !important;
height: 60px !important;
white-space: normal !important;
word-break: break-word !important;
}

You should also set width:
<TemplateColumn Title="mytitle" Width="220px">

I had sticky header thats why there is row-type='sticky-header' , you can find your own thing using chrome inspect element.

[rpodevns]

@parsalotfy Consider that this may lead to unexpected behavior, including hidden data rows when used with AutoItemsPerPage, which internally expects the header to be the same height as rows.

https://www.fluentui-blazor.net/datagrid-auto-items-per-page

[parsalotfy]

@rpodevns thanks for pointing that out. ✌️