Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
joserodolfofreitas opened this issue Jan 17, 2023 · 3 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Server integration Better integration with backends, e.g. data source new feature New feature or request plan: Pro Impact at least one Pro user

Comments

@joserodolfofreitas
Copy link
Member

joserodolfofreitas commented Jan 17, 2023

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 joserodolfofreitas added status: waiting for maintainer These issues haven't been looked at yet by a maintainer component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request plan: Pro Impact at least one Pro user and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 17, 2023
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Jan 17, 2023
@joserodolfofreitas joserodolfofreitas changed the title [data grid] Client to Server model mapper solution for filtering, sorting and pagination. [data grid] Client to server model mapper solution for filtering, sorting and pagination. Jan 17, 2023
@cherniavskii cherniavskii moved this from 🆕 Needs refinement to 🔖 Ready in MUI X Data Grid Jan 17, 2023
@oliviertassinari oliviertassinari added feature: Server integration Better integration with backends, e.g. data source and removed v6.x labels Mar 19, 2023
@oliviertassinari oliviertassinari changed the title [data grid] Client to server model mapper solution for filtering, sorting and pagination. [data grid] Client to server model mapper solution for filtering, sorting and pagination Mar 23, 2023
@cliedeman
Copy link
Contributor

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 #8702

@neclearblue
Copy link

H, is there any update on expected release?

@TheOneTheOnlyJJ
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Server integration Better integration with backends, e.g. data source new feature New feature or request plan: Pro Impact at least one Pro user
Projects
Status: 🔖 Ready
Status: Future
Development

No branches or pull requests

5 participants