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] Use of `isCellEditable` causes entire row to toggle its editability, rather than single cell #11345

Open mdrake411 opened 9 months ago

mdrake411 commented 9 months ago

Steps to reproduce

Link to live example: disable editing of specific cells

Steps:

  1. Build a grid similar to the one in the documentation demo above
  2. Set logic to disable cell under certain conditions

Current behavior

The result is that all cells in the row are disabled when the logic condition is met.

Expected behavior

The row should have cells that can still be edited except for the desired cell that is not editable. This would be in line with the property name 'isCellEditable.'

Context

I have a web app being updated to more current packages that previously used Material Table. It has a requirement where a certain field should not be editable under certain conditions for a given row, while other fields could still be edited.

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: [data grid] [isCellEditable]

michelengelen commented 9 months ago

Hey @mdrake411 I can confirm this is a bug. Thanks for raising this!

@cherniavskii I'll add this to the board, so we can have a look. As it seems the description in the docs is also a bit misleading.

It clearly states that isCellEditable can be used to define which individual cells are editable,

You can use the isCellEditable callback prop to define which individual cells the user can edit in a given row.

but in the last section it says that the entire row will be disabled when the callback returns false.

In the following demo, only the rows with an even Age value are editable. The editable cells have a green background for better visibility.

When this is intentional we should rename the prop to isRowEditable and adjust the description as well.

WDYT?

mdrake411 commented 9 months ago

@michelengelen Thanks for taking a look. I agree about the documentation, and the how the name should probably be isRowEditable. Furthermore, there is no apparent way to pass in a field name to indicate which cell to disable.

Is there any kind of work-around to make an individual cell non-editable under certain conditions? In the column definition, there is an editable property, but I do not see a way to set it programmatically.

mdrake411 commented 9 months ago

Additional thoughts... if one result of this bug will be to change the name from isCellEditable to isRowEditable, then there should be a corresponding way to disable the edit button in an action column with GridActionsCellItem elements. Otherwise, It could be potentially confusing for a user to click an edit button, have the row turn into edit mode, and not be able to edit any columns.

Sebcio03 commented 8 months ago

Just encountered this error in my code 😄 Can I fix this?

czerwinskilukasz1 commented 8 months ago

@michelengelen , @cherniavskii , some of mdrake411's comments suggest that isCellEditable should be replaced with controlling editable at the row level only. However, I can see a lot of use cases when we might want to block just a single cell from being edited, in particular in cases like:

mdrake411 commented 8 months ago

@czerwinskilukasz1 I did not mean to suggest that "isCellEditable should be replaced with controlling editable at the row level only". I was only making the observation that currently it appears that is what it does, despite its property name.

I agree with your use cases, and I have one similar use case. I need the a row to remain editable while a particular cell in that row is not editable depending on the value of another cell in that same row. I believe that would be more representative of the property name.

Sebcio03 commented 8 months ago

@michelengelen could you assign me to this ticket? I can fix this

michelengelen commented 8 months ago

@Sebcio03 you're all set ... feel free to reach out if you need help.

kvenkatasivareddy commented 7 months ago

is this issue fixed @Sebcio03 @michelengelen ?

michelengelen commented 7 months ago

is this issue fixed @Sebcio03 @michelengelen ?

Not yet ... at least I haven't seen a PR opened for this.

Sebcio03 commented 7 months ago

is this issue fixed @Sebcio03 @michelengelen ?

I'll do it utill monday.

Sebcio03 commented 6 months ago

Hey is there any chat,irc where I can ask for help?

michelengelen commented 6 months ago

Hey is there any chat,irc where I can ask for help?

Yes, we do have a discord community server: MUI on Discord

Zetjen commented 2 months ago

Hi, is this issue already solved?

geh18 commented 3 days ago

Any update on this one @Sebcio03? :)