Styling Rows#

Props#

Field	Type	Description
`options.rowStyle`	style object or func	style to apply in all rows cells

Usage#

import MaterialTable from "@material-table/core";

<MaterialTable
  // ...
  options={{
    rowStyle: {
      backgroundColor: "#6ABAC9",
    },
  }}
/>;

Live Demo#

note

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

Live Editor

function StyledRow() {
  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" },
        },
      ]}
      options={{
        rowStyle: {
          backgroundColor: "#6ABAC9",
        },
      }}
    />
  );
}

function StyledRow() {
  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" },
        },
      ]}
      options={{
        rowStyle: {
          backgroundColor: "#6ABAC9",
        },
      }}
    />
  );
}

Result