I would like to request a simple update to the Grid component.
When a column width is too small - the column header text is cut-off or is unreadable.
For example:
It would be nice that on mouse hover, the full title would be rendered. Currently to achieve this, I have to implement a custom <HeaderTemplate> for every grid column and add a span myself:
<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)">
<HeaderTemplate>
<span title="Order Quantity">Order Quantity</span>
</HeaderTemplate>
</GridColumn>
Can you update the GridColumn component and add a title attribute to the column <th> element so the browser can show the fill title should the user hover over it?
What is the scenario where the user will hover the mouse instead of resize to see the full title? What is the purpose to have a column with such width that cuts off the title?
- In my experience, I see a need for this functionality when the data in the column is short, for example, an integer value (5), but the column title is much longer "Quantity".
Sometimes, even trying to abbreviate to "Qty" is too long (because of margins and padding, you might only see "Q...").
When you have a lot of columns and are trying to maximize screen real estate (and are trying to avoid a horizonal scroll bar), it would be nice to have this option without having to define the header template over and over again (20+ times...)
Perhaps a better implementation that I originally suggested would be to introduce a new optional Parameter Column "HoverTitle" (or something more clever)
<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)" Width="115px" Title="Qty" HoverTitle="Quantity"/>
This way we don't add a title on every column so we don' cause regression, unexpected new behavior, or breaking changes on existing grids.