docs: How to prevent cutting off values in Data Grid?

[MarvinKlein1508]

🙋 Documentation Request

I cannot find any information in the docs to prevent the FluentDataGrid to stop cutting off the values. I want them to be written fully out and scrollable on overflow.

[dvoituron]

This is due to the CSS fluent-data-grid-cell { text-overflow: ellipsis; } You can override this style, but if you don't have space to display the text, where do you want to put it? :-)

[vnbaaij]

And makking it scrollable will lead to this:

I trust you understand we are not providing on option for that out of the box 😊 You can have a tooltip on the cut-off text to show the total content. See the explenation at https://www.fluentui-blazor.net/DataGrid#typicalusage

[MarvinKlein1508]

@dvoituron

but if you don't have space to display the text, where do you want to put it?

Basically I want the full text to be displayed and size the columns accordingly. When I run out of screenspace it should overflow-x so I can scroll the table to the right.

[vnbaaij]

I don't think that is possible with the way the grid is rendered currently.

[MarvinKlein1508]

I don't think that is possible with the way the grid is rendered currently.

could you take a look on this for a future version maybe? :)