Material-table: How to override style for tablerow

[TimCodes]

how do i get rid of striped styling for table rows

[mbrn]

Unfortunately it does not have a feature about row styling. But i can add it. It would be usefull feature.

If your requirement is urgent you can override Row completely.
https://mbrn.github.io/material-table/#/docz-examples-10-example-component-overriding

[mbrn]

Hi @TimCodes ,

I added rowStyle feature to options. You can set a style object directly or return it with a function that takes rowData as parameter.

Example:

<MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
          options={{   
            //rowStyle: { backgroundColor: 'green'},
            rowStyle: rowData => {
              if(rowData.name === "Mehmet") {
                return {backgroundColor: 'yellow'};
              }

              return {};
            }
          }}
        />

This will be in version 1.12.0

[gxwheel152]

I have the opposite problem --- rows are not striped, but I would like them to be.
Is there an options such as ...
row: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.background.default,
},

OR

rowStyle: rowData => ({
backgroundColor: rowIndex % 2 === 0 ? "#EEE" : "#FFF",
}),

When I use the following, it seems to reference the original order of the data instead of the order of the rows as currently displayed :
rowStyle: rowData => ({
backgroundColor: rowData.tableData.id % 2 === 0 ? "#EEE" : "#FFF",
}),

[mbrn]

Hi @gxwheel152 ,

I will add stripeRows to options asap.

[rxhl]

@mbrn How do we change the hover color for the rows?

[Ainnop]

@mbrn have you been finished stripeRows option? I have been waiting for that update for sometime now

[skitsanos]

@mbrn How do we change the hover color for the rows?

You can do hover with css directly:

tbody.MuiTableBody-root > tr:hover {
    background-color: #efefef;
}

[skitsanos]

And as for stripes:

tbody.MuiTableBody-root >:nth-of-type(2n)
{
    background-color: #fafafa;
}

[ppitintern]

Hi, I want to add a backgroundColor fading out effect on newly added row, how can I achieve this?
I tried this, but it didn't work.

rowStyle: ()=>{
                        let color ='#FFF';
                        setTimeout(function(){color='#EEE'},2000)
                        return {backgroundColor: color}

                    }

[saeidalidadi]

This rowStyle does not change actions cell