search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[DataGrid] Specify deep `field` #2852

Open oscar-b opened 2 years ago

oscar-b commented 2 years ago

Duplicates

Latest version

Summary 💡

It would be nice to be able to specify a field deeper in the row, by using dot-notation and not having to resort to valueGetter.

I think the relevant line is here, but I didn't dive any further:

https://github.com/mui-org/material-ui-x/blob/e3be5cf5f8b0f8490b68684ad3824a87faf65fcb/packages/grid/_modules_/grid/hooks/features/rows/useGridParamsApi.ts#L149

Something along these lines:

return field.split('.').reduce((o,i)=> o[i], rowModel);

(https://stackoverflow.com/questions/6393943/convert-a-javascript-string-in-dot-notation-into-an-object-reference)

Examples 🌈

For instance:

field: 'event.action',

Which corresponds to:

valueGetter: (params) => params.row.event.action,

Motivation 🔦

It is not obvious that the grid doesn't support dot-notation for getting deep fields. Other grids support this, and it took me a while to figure out why it wasn't working.

Order ID 💳 (optional)

No response

m4theushw commented 2 years ago

This was also brought in https://github.com/mui-org/material-ui-x/issues/1726#issuecomment-877472718.

At first, the field is the unique identifier of a column (like an alias). If we were to support only dot-notation, it would make more complicated to interact with the API, as the field would always be the path. Using valueGetter gives the possibility of having a fullName column, but which under the hood its value actually could come from the junction of two other columns. This can't be done with dot-notation.

It would be nice to be able to specify a field deeper in the row, by using dot-notation and not having to resort to valueGetter.

Would it help if we added support for dot-notation in valueGetter? Instead of returning a function, you return the path as a string. AG-Grid supports this: https://ag-grid.com/react-data-grid/cell-expressions/#column-definition-expressions

It is not obvious that the grid doesn't support dot-notation for getting deep fields.

I think we could add a note to the docs for developers looking for this pattern.

oscar-b commented 2 years ago

It would be nice to be able to specify a field deeper in the row, by using dot-notation and not having to resort to valueGetter.

Would it help if we added support for dot-notation in valueGetter? Instead of returning a function, you return the path as a string. AG-Grid supports this: ag-grid.com/react-data-grid/cell-expressions/#column-definition-expressions

I think that would be a really nice solution, if it fits better than supporting it on field.

It is not obvious that the grid doesn't support dot-notation for getting deep fields.

I think we could add a note to the docs for developers looking for this pattern.

And also, maybe raise an error (pointing to valueGetter if field contains a dot?

Velidoss commented 2 years ago

In use cases when the backend defines the columns for a table, it is preferable to allow to use of field as the path. Because let's assume, I get around 150 columns for a table and then need to parse all columns and find what columns are supposed to show the nested value and provide the valueGetter for them. At least it would be great to have some feature which may solve this issue.