Styling Header & Cells#

Props#

Field	Type	Description
`column.cellStyle`	style object or func	style to apply in specified cells
`column.headerStyle`	style object	style to apply in all header cells

Usage#

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

<MaterialTable
    // ...
    columns={[
      {
          title: 'Name', field: 'name',
          cellStyle: {
            backgroundColor: '#039be5',
            color: '#FFF'
          },
          headerStyle: {
            backgroundColor: '#039be5',
          }
        }
      }
    ]}
    options={{
      headerStyle: {
        backgroundColor: '#01579b',
        color: '#FFF'
      }
    }}
/>

Live Demo#

note

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

Live Editor

function StyledHeaderAndCell() {
  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",
          cellStyle: {
            backgroundColor: "#039be5",
            color: "#FFF",
          },
          headerStyle: {
            backgroundColor: "#039be5",
          },
        },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
        },
      ]}
      options={{
        headerStyle: {
          backgroundColor: "#01579b",
          color: "#FFF",
        },
      }}
    />
  );
}

function StyledHeaderAndCell() {
  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",
          cellStyle: {
            backgroundColor: "#039be5",
            color: "#FFF",
          },
          headerStyle: {
            backgroundColor: "#039be5",
          },
        },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
        },
      ]}
      options={{
        headerStyle: {
          backgroundColor: "#01579b",
          color: "#FFF",
        },
      }}
    />
  );
}

Result