Is it possible to change background-color property to DataGridCell ?

[vignesh-sivaprakasam]

Hi Team,
I have gone through the paste doc and found that we can use striped prop in DataGrid Component.
But for my usecase I need to change the background color of DataGridCell component. Is this possible ?

Code sandbox: https://codesandbox.io/s/divine-cdn-p028rc?file=/src/App.js

[TheSisb]

Hi @vignesh-sivaprakasam,

Currently there is no way to change the background color on DataGrid cells. Can you share some context around what you're trying to achieve?

[vignesh-sivaprakasam]

Hi @TheSisb ,
In my case I have a multiple select all checkbox - when I click on that checkbox it will select all the checkboxes in that section
If I can highlight the checkboxes on hover which are going to be checked that will improve user experience.

Please check this code pen : https://codesandbox.io/s/icy-http-28cyee?file=/src/App.js

[nkrantz]

Thanks for the context @vignesh-sivaprakasam. Could you tell me more about the decision to highlight the checkboxes on hover? Since there's currently no way to change the background color on DataGrid cells, we'll be able to provide you with the most useful guidance if we first have a little more insight. You mentioned that this behavior will improve the user experience - does that knowledge come from usability tests you've conducted with customers? Happy to take a look at your designs and make some informed suggestions too.

For now, you can probably achieve the same result (of clearly indicating which cells will be selected) with one or more of the following options:

• Indentation - indent the selectable rows under their given "select all" checkboxes to create hierarchy
• Separate the tables - display different tables for the different types of selectable data so that it's clear what rows are being selected on "select all"
• Adjust the copy - instead of "select all", label your checkboxes to more clearly represent the data that will be selected (e.g. "Select all phone numbers", "Select all SIDs", etc.)

[shleewhite]

Hi @vignesh-sivaprakasam Do you have what you need or would you like more assistance with this?