I have a material table in react. The code for styling is as follows:
<MaterialTable
options={
{
exportButton: true,
exportAllData: true,
pageSize: 5,
pageSizeOptions: [5, 10, 15],
paging: true,
actionsColumnIndex: -1,
rowStyle:rowData =>({
backgroundColor: rowData[0] ?? 'blue',
})
}
columns={
[
{ align:'center',title: 'A', field: 'a'},
{ align:'center',title: 'B', field: 'b'},
{ align:'center',title: 'C', field: 'c'},
{ align:'center',title: 'D', field: 'd'},
]}
tableLayout='fixed'
data={tableData}
}
}
I want to highlight just the first row of the table. I tried to do that using rowStyle and rowData as shown on code but that just highlights all rows. How do I just highlight the first row of the table?
CodePudding user response:
You can change your rowStyle
like this:
rowStyle: (data, rowData) => rowData === 0 && { background: "blue" }
or like this:
rowStyle: (data, rowData) =>
data.tableData.id === 0 && { background: "blue" }
You decide which parameters is more convenient