RFC: Enhancing the FluentDataGrid

[vnbaaij]

For a next iteration, we are thinking at enhancing the <FluentDataGrid>. As our guideline we intend to use Steve Sanderson's QuickGrid.

With regards to the implementation that is in our package now, we followed what is 'prescribed' in the fluent-data-grid. We wrap the
fluent-data-grid, fluent-data-grid-row and fluent-data-grid-cell and all their attributes (Parameters on our side) and by doing so styling and rendering is taken care of.
We copied over a lot of the principles and code from the BlazorFluentUI package (were I was one of the maintainers). In that process, some things were renamed to better align with the Web Component internals (like ColumDefinition). The result is nice but a bit clunky in the way the columns are defined and sorting, etc. seems a bit of an afterthought. That is all done way better in the QuickGrid implementation.

In the enhanced version the wrapping, rendering and styling would stay the same of course, but for the internals we would take a real good look (i.e. copy a lot) at what is available in QuickGrid. It is not our plan to just copy over everything. For instance, in the Fluent UI Web Components there is no implementation of 'Pagination' yet, so we will most probably not bring that part over. The Web Component grid does not (yet) support virtualization. As that requires no specific styling, Blazor has standard functionality for it and QuickGrid has this implemented already, we would be bringing that over.

In it's simplest form , the end result in code would go from this (which does NOT have any sorting capabilities):

<FluentDataGrid id="defaultGrid" RowsData=RowsGrid ColumnDefinitions=ColumnsGrid GridTemplateColumns="1fr 1fr" />

@code {
    record Person(int PersonId, string Name, DateOnly BirthDate);
    
    public List<ColumnDefinition<Person>> ColumnsGrid = new();

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
    
    protected override void OnInitialized()
    {
        ColumnsGrid.Add(new ColumnDefinition<Person>("Id", x => x.PersonId));
        ColumnsGrid.Add(new ColumnDefinition<Person>("Name", x => x.Name));
        ColumnsGrid.Add(new ColumnDefinition<Person>("Birthdate", x => x.BirthDate));

        base.OnInitialized();
    }
}

to this (sortability baked in):

<FluentDataGrid RowsData="@people">

    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" /> 

    <PropertyColumn Property="@(p => p.Name)" Sortable="true" /> 

    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" /> 

<FluentDataGrid>

@code {
    record Person(int PersonId, string Name, DateOnly BirthDate);

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

Quite an improvement, we think.

Thoughts? Objections? Adjustments? Please let us know!

[chrisdholt]

Part of me questions if pagination is actually "part' of the grid itself or a larger composed implementation. My approach to a grid that requires or needs pagination at a primitive level would be to have something which composes data grid and provides that advanced ergonomic.

Adding a primitive to another primitive means extra weight that everyone takes regardless of whether they need it. That convenience can be costly in some implementations. My bent here would be to ask whether pagination is part of the actual grid itself or whether it's part of a view which composes grid + pagination. My expectation in most scenarios is that it would be the latter. That can certainly be created as an additional component, but I don't think it's what makes up a primitive data grid, whereas something like "filtering" could certainly be part of the baseline grid.

Just some feedback in terms of how I'd consider the relationship between those two. A similar note I would give would be to consider "Details List" - while provided as a component in previous versions of Fluent, it was a composition of several components. Details list brought together things like Pagination, Data Grid, etc...to provide a very bespoke and specific implementation. If you keep adding to the primitive (data grid) in these scenarios you're simple use cases start to suffer as the conveniences grow.

[EisenbergEffect]

I wonder if we could create a pagination web component first. That would be useful on its own. Then maybe one solution, something that targets the Blazor community specifically, would be to still offer the base grid as it is today, but then also offer a second more advanced grid that pre-composed a bunch of these pieces together.

[vnbaaij]

In QuickGrid the pagination is indeed a separate component. It gets included in the 'view' only when you set a parameter on the grid component, exactly the composition as you describe. Blazor makes sure the pagination component does not get rendered if the parameter is not set/false, so no extra weight there if you are not using it.

Trying to translate it to your terminology I wanted to explain there is no pagination Fluent UI web component available, so we won't be adding a view that composes grid + pagination (yet).

I fully hear you on the "Details List". In the BlazorFluentUI library It became so complex in the end that it was a nightmare to maintain (and understand).

[vnbaaij]

Most of the work of copying over QuickGrid is done! See https://brave-cliff-0c0c93310-233.centralus.azurestaticapps.net/DataGrid for the result. I even managed to get pagination and resizing working...

[robinmeure]

Awesome! Was playing around with QuickGrid already, but a FluentUI version is even more awesome :)