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

cellClassName not running on higher state change #9711

Open tjgibbs92 opened 1 year ago

tjgibbs92 commented 1 year ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/vigilant-goldstine-wl7pj5?file=/src/App.js:1681-1694

Steps:

  1. Toggle the Editable / Not Editable Switch

Current behavior 😯

We have a cell class style applied when the grid is in an editable state and show's what modifiable. However, when the column has an aggregation associated with it, it doesn't trigger the class style on state change.

Expected behavior 🤔

I expect age to highlighted blue like name and join date.

Context 🔦

Trying to show what columns are editable based on if the grid can be edited.

Your environment 🌎

No response

Order ID or Support key 💳 (optional)

58533

tjgibbs92 commented 1 year ago

Also when the Aggregation Model is in play, the Age field cannot be edited either while the other non-aggregated fields can be.

m4theushw commented 1 year ago

As alternative, you can use getCellClassName:

<DataGrid
  getCellClassName={() => editable ? 'editable' : ''}
/>
tjgibbs92 commented 1 year ago

As alternative, you can use getCellClassName:

<DataGrid
  getCellClassName={() => editable ? 'editable' : ''}
/>

Yes but that would apply to the entire grid. It doesn't doesn't allow granular control of my columns.

m4theushw commented 1 year ago

getCellClassName is called with a GridCellParams object. You can return different class names depending on the column.

tjgibbs92 commented 1 year ago

Okay, getCellClassName solves the className being applied. It doesn't fix the issue that allows Age to be editable while being aggregated.

tjgibbs92 commented 1 year ago

Do I need to open another issue to handle the aggregation preventing the cell from being edited or is it tied to this same issue here?

romgrk commented 1 year ago

Do I need to open another issue to handle the aggregation preventing the cell from being edited or is it tied to this same issue here?

Is that problem reproducible with the codesandbox above?

tjgibbs92 commented 1 year ago

Yes. When toggling it the state, the aggregated column ignores the rule if the cell can be edited or not. It just holds the initial state.

tjgibbs92 commented 10 months ago

The main issue that is still persisting when there is an aggregation existing, the column cannot be edited when controlled from an external state. It works by toggling the editing and by commenting the aggregationModel in and out to see the issues. This is preventing our team from upgrading MUI X to the latest data grid versions.

Version 6.9.2 was the last version that worked properly.