mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

[data grid] Client to server model mapper solution for filtering, sorting and pagination.

Open joserodolfofreitas opened this issue 2 years ago • 1 comments

Summary 💡

In an effort to improve the integration with applications' server-side, one of the biggest pains we pinpointed is the effort to map the Data Grid's data model (columns, filtering, sorting, and pagination models) to something that can be easily consumed on the backend, like JSON parameters for a Rest call, or perhaps an SQL query.

Challenges and open questions

  • How can we provide flexibility to map the models to different backend architectures?
  • Can we use hooks to return the mapped parameters?
  • Do we need to dive fully in a data source solution?
  • Can we offer a "complete" solution only with client-side code?
  • Should the mapping to the server happen on the columns definitions, or should we define a specific object/API?

Examples 🌈

Motivation 🔦

  • Improved DX
  • Development speed.

Users report spending considerable time wiring the data and parameters from the Data Grid.

joserodolfofreitas avatar Jan 17 '23 10:01 joserodolfofreitas

We implemented a dotnet + graphql internal library that translates the mui filter object directly to filters on the backend.

I don't like directly embedding the mui filter shape directly into the backend but the advantages are just too good to ignore

The resulting code

public class UserColumnLookup : BaseColumnLookup<User>
{
    protected override ColumnLookupMember? InternalLookup(string column)
    {
        return column switch
        {
            "firstName" => this.GetMemberExpression(p => p.FirstName),
            "lastName" => this.GetMemberExpression(p => p.LastName),
            _ => null,
        };
    }
}
    public IQueryable<User> GetUsers(
        AppDbContext dbContext,
        IUserService userService,
        MuiDataGridFilterInput? filters)
    {
        var builder = new ExpressionBuilder<User>(new UserColumnLookup());
        return userService
            .GetUsers(dbContext)
            .Where(builder.Filter(filters ?? new MuiDataGridFilterInput()));
    }

sorting it also handled but not included in this sample.

What I am mostly after is some pre-processing of the filters to avoid calling the backend uncessary as outlined in https://github.com/mui/mui-x/issues/8702

cliedeman avatar Aug 30 '23 10:08 cliedeman

H, is there any update on expected release?

neclearblue avatar May 21 '24 09:05 neclearblue

Would the functionality of initialising Data Grid columns based on a JSON Schema be covered by this issue?

TheOneTheOnlyJJ avatar Jun 21 '24 13:06 TheOneTheOnlyJJ