fluentui-blazor icon indicating copy to clipboard operation
fluentui-blazor copied to clipboard

[DataGrid] Alter rendering to use table elements

Open vnbaaij opened this issue 5 months ago • 2 comments

Update

All work is done but some changes might be made based on the discussion in #2667


I'm swapping out the web components for standard HTML table elements. Reasons for doing this:

  1. the web components will probably not be available in v3 as of the first release. We can't do a v5 release without a DataGrid component
  2. using standard table elements is, in this case, good for performance. Loading the DataGrid examples page (which is still too heavy) is 2.2 seconds quicker with this new rendering applied.

Because of some HTML/CSS trickery, it is still possible to use the GridTemplateColumns parameter on the grid or the Width property on the columns to set column widths.

There are going to be some breaking changes with this...

  • ~~The option to choose between using the new way of adding column actions (introduced in 4.10) or doing it the previous way, will disappear. The new way will be the standard moving forward. This is done because of code maintenance reasons but also because we achieve much better accessibility with this.~~ The option to choose is still available
  • A lot of changes have been made to the structure of the rendered content and the class names used. If you have been overriding grid classes in your own code, these probably no longer work.
  • When you have rows in a table with content that needs to span multiple lines, you now need to use and set the new MultiLine (bool) parameter of the FluentDataGrid. Previously this could be done by setting a RowClass on a column but that does not work anymore

vnbaaij avatar Sep 16 '24 22:09 vnbaaij