Styling Selected Row

Props

Field	Type	Description
options.rowStyle	style object or func	style to apply in all rows cells
onRowClick	func	to 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

function StyledSelectedRow() { const [selectedRow, setSelectedRow] = React.useState(null); return ( <MaterialTable data={[ { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63, }, { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34, }, ]} columns={[ { title: "Name", field: "name", }, { title: "Surname", field: "surname" }, { title: "Birth Year", field: "birthYear", type: "numeric" }, { title: "Birth Place", field: "birthCity", lookup: { 34: "İstanbul", 63: "Şanlıurfa" }, }, ]} onRowClick={(evt, selectedRow) => setSelectedRow(selectedRow.tableData.id) } options={{ rowStyle: (rowData) => ({ backgroundColor: selectedRow === rowData.tableData.id ? "#6ABAC9" : "#FFF", }), }} /> ); }

function StyledSelectedRow() {
  const [selectedRow, setSelectedRow] = React.useState(null);

  return (
    <MaterialTable
      data={[
        {
          name: "Mehmet",
          surname: "Baran",
          birthYear: 1987,
          birthCity: 63,
        },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34,
        },
      ]}
      columns={[
        {
          title: "Name",
          field: "name",
        },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
        },
      ]}
      onRowClick={(evt, selectedRow) =>
        setSelectedRow(selectedRow.tableData.id)
      }
      options={{
        rowStyle: (rowData) => ({
          backgroundColor:
            selectedRow === rowData.tableData.id ? "#6ABAC9" : "#FFF",
        }),
      }}
    />
  );
}

Result