how to highlight only first row of material table in react-CodePudding

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