How to style (add css) to material-table (React)?

Question

I've been searching for a few days now and can't find anything. I'm using material-table in React but can't figure how to add css in headers (columns of the table) and the content [like changing font size, width and making table rows of striped background].

Can anyone tell me how I can do it?

For reference, here's the current Material table I have and I want to make the rows striped and change the look of headers (column names)

<MaterialTable
    title="Title"
    columns={this.state.columns}
    data={newDataTable}
    options={{
      selection: true
    }}
    options={{
      search: false,
      sorting: true
    }}
    actions={[
      {
        icon: () => <Checkbox />,
        tooltip: 'checkbox'
      },
      {
        icon: () => <InfoIcon />,
        tooltip: 'info',
        onClick: (event, item) => {
          this.setState({
            isOpen: true,
            selectedItem: item
          });
        }
      }
    ]}
  />
</div>

Edit: Also, can't figure out how to change the content of the rows. Like for example I want to add an icon in front of every item corresponding to its data. Currently, I'm just using a js array to display the static data but I can't edit it.

Have you seen the docs? https://material-table.com/#/docs/features/styling — sdgluck, Jan 21 '20 at 13:28
@sdgluck saw this now but is there a way I can edit the contents too? Like add two substrings or add an icon? — Samidha Verma, Jan 21 '20 at 13:35

score 3 · Answer 1 · answered Jan 21 '20 at 13:36

3

Just define the styles within the columns property:

this.setState({
    columns: {[
        {
            title: 'Name', field: 'name',
            cellStyle: {
              backgroundColor: '#039be5',
              color: '#FFF'
            },
            headerStyle: {
              backgroundColor: '#039be5',
            }
          },
          // Other columns
    ]}
});

See https://material-table.com/#/docs/features/styling

answered Jan 21 '20 at 13:36

Axel Köhler

911
1
8
34

thanks for this! Can you suggest how can I edit the contents of the table? Like for example I want to add an icon in front of every item corresponding to its data. Currently, I'm just using a js array to display the static data but I can't edit it. – Samidha Verma Jan 21 '20 at 19:55
You could run all your data through a function and prepend or append an icon that way (FontAwesome or something). I'm not sure if there's a callback for that in Material Table (probably there is), but you can also run that function whenever you update your data. – Axel Köhler Jan 21 '20 at 22:19

score 1 · Answer 2 · answered Nov 25 '20 at 22:27

if you want to add an icon inside your data( rows/cells), you can use built-in render callback in columns definition like this :

const handleTableColumns = (cols) => {
    return cols.map((col) => ({
        ...col,
        render: (rowData) => {
            return ( 
                <span style = {{display: 'flex'}} >
                    <KeyboardArrowRightIcon /> 
                    { rowData[col.id]} 
                </span>
            );
        };

    }))
};

this will insert the icon <KeyboardArrowRightIcon /> in front of every cell of each row, so in materialTable component you have to use handleTableColumns as columns :

<MaterialTable
    style={{ padding: '0 8px' }}
    columns={this.handleTableColumns(this.state.columns)}
    data={data}
    ...
    ...
/>

score 0 · Answer 3 · answered Feb 21 '22 at 06:30

Options can be passed with a key rowstyle. Where you can configure the background colour.

< MaterialTable title = "Title"
columns = {
  this.state.columns
}
data = {
  newDataTable
}
options = {
  {
    selection: true,
    rowStyle: (row) => {
      const rowStyling = {
        fontSize: "14px",
        fontFamily: "latoregular"
      };
      if (row.sl % 2) {
        rowStyling.backgroundColor = "#f2f2f2";
      }
      return rowStyling;
    },
  }
}
options = {
  {
    search: false,
    sorting: true,
  }
}
actions = {
  [{
    icon: () =>
      <
      Checkbox / > ,
    tooltip: "checkbox",
  }, {
    icon: () =>
      <
      InfoIcon / > ,
    tooltip: "info",
    onClick: (event, item) => {
      this.setState({
        isOpen: true,
        selectedItem: item,
      });
    },
  }, ]
}
/>;

How to style (add css) to material-table (React)?

3 Answers3