Styling Selected Row#

Props#

FieldTypeDescription
options.rowStylestyle object or funcstyle to apply in all rows cells
onRowClickfuncto handle row click (event, rowData)

Usage#

import MaterialTable from "@material-table/core";
<MaterialTable
// ...
onRowClick={(evt, selectedRow) => setSelectedRow(selectedRow.tableData.id)}
options={{
rowStyle: (rowData) => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#6ABAC9" : "#FFF",
}),
}}
/>;

Live Demo#

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor
Result
Table Title
Name
Surname
Birth Year
Birth Place
MehmetBaran1987┼×anl─▒urfa
Zerya Bet├╝lBaran2017─░stanbul