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

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.

cssreactjsmaterial-uimaterial-table


Solution 1:[1]

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

Solution 2:[2]

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}
    ...
    ...
/>

Solution 3:[3]

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,
      });
    },
  }, ]
}
/>;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Axel Köhler
Solution 2 a. mahdo
Solution 3 Pranay Boreddy

Related Questions