I used a material ui data grid for showing some data.
import { DataGrid } from "@material-ui/data-grid"const
columns = [
{
id: "...",
name: "...",
},
...]
const rows = .....
<DataGrid rows={rows} columns={columns} autoHeight={true} />
Now I want to change the rows color based on their "name" property. I mean I want to set a different color for each row that has a different name. How should I do this?
CodePudding user response:
MUI has an example for styling the rows that can be found here: https://mui.com/x/react-data-grid/style/#styling-rows
You'll want to use the getRowClassName
prop and provide it with a function with whatever logic you want to produce the classes you wish to style.