I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true.
Essentially, my goal is to change the background color for cells 2 & 3. Check out the screenshot below for reference:
https://i.stack.imgur.com/Z7B1v.png
Here's a snippet of the code:
{
title: 'WEST',
field: 'west',
cellStyle: { textAlign: 'center' },
headerStyle: { backgroundColor: '#006EB8' }
},
]}
data={[
{ id: 1, group_name: '1', northeast: 'Baran', central: 'ddd', west: '3' },
{ id: 2, parentId: 1, group_name: '2', northeast: 'Baran', central: 'ddd', west: '3' },
{ id: 3, parentId: 1, group_name: '3', northeast: 'Baran', central: 'ddd', west: '3' },
{ id: 4, group_name: '4', northeast: 'Baran', central: 'ddd', west: '3' },
{ id: 5, group_name: '5', northeast: 'Baran', central: 'ddd', west: '3' },
{ id: 6, group_name: '6', northeast: 'Baran', central: 'ddd', west: '3' },
]}
onTreeExpandChange={(row, rows) => {
if (rows) {
// Implement logic to change the backgroundColor of cell 2 & 3
}
}
}}
parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
options={{
search: false,
sorting: true,
exportButton: true,
paging: false,
Any suggestions on how to achieve this styling customization?
Thank you!