'How can i style conditionally one row in material-table
I would like to style on row based on a certain props of one row, here is the code :
<MaterialTable
className="ciao"
title="One Detail Panel Preview"
columns={[
{title: "Icon", field: "icon"},
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Value', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa', 45: "Genova" },
},
]}
data={[
{ icon: <AccessAlarmIcon />,id:0, name: 'Andrea', surname: 'Castello', birthYear: 1987, birthCity: 63 },
{ id:1,name: 'Francesco', surname: 'Giostra', birthYear: 1987, birthCity: 63 },
{ id:2,name: 'Pietro', surname: 'Casa', birthYear: 1987, birthCity: 63 },
{ id:3,name: 'Giulio', surname: 'Villa', birthYear: 1987, birthCity: 34 },
{ id:4,name: 'Paolo', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ id:5,name: 'Mehmet', surname: 'Tazza', birthYear: 1987, birthCity: 45 },
]}
detailPanel={rowData => {
return (
<div>Ehi ciao</div>
)
}}
options={{
actionsColumnIndex: -1,
selection: true,
sorting: true,
rowStyle: {
background: 'linear-gradient(to right, #fdf32e 0%, #ffffff 2%)',
}
}}
onSelectionChange={(rows) => alert('You selected ' + rows.length + ' rows')}
/>
For example if the name is Pietro I want the background red.
Thanks for the help :D
Solution 1:[1]
options={{rowStyle: (rowData) => {
if(rowData.name === "Pietro") {
return {
backgroundColor: "red"
}
} else {
return {};
}
}}}
Old question but using the above would do it.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Dermo909 |