mui-x
mui-x copied to clipboard
[data grid] Client to server model mapper solution for filtering, sorting and pagination.
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 🌈
- React Query Builder
- AG Grid Server side row model
- AG Grid Datasource
- DevExpress data binding
- React Admin data provider
Motivation 🔦
- Improved DX
- Development speed.
Users report spending considerable time wiring the data and parameters from the Data Grid.
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
H, is there any update on expected release?
Would the functionality of initialising Data Grid columns based on a JSON Schema be covered by this issue?