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

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.

Answer 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

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

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