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

Table Title

Name	Surname	Birth Year	Birth Place
Mehmet	Baran	1987	Şanlıurfa
Zerya Betül	Baran	2017	İstanbul