Material-table: How to get Striped Rows possibly using the displayed RowIndex

[gxwheel152]

I have not been able to enable striped rows, but I would like to.

I think it would be possible if the displayed RowIndex were available in props or styling (such as discussed in https://github.com/mbrn/material-table/issues/273)

Are there other options such as ...
row: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.background.default,
},

OR

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

As mentioned in https://github.com/mbrn/material-table/issues/273, when I use the following, it references 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",
}),

[pak11273]

@gxwheel152 https://stackoverflow.com/questions/55611733/applying-specific-theme-for-react-material-table

[gxwheel152]

I'll take a look at https://material-table.com/#/docs/features/component-overriding and let you know

[gxwheel152]

Thanks for the reference to component-overriding. I tried this for the Row component, but am still having trouble. Probably something on my side, so thanks in advance for the help. Code BELOW, Results HERE:

1st example utilizing with MTableBodyRow gives an error:

773:18 error 'MTableBodyRow' is not defined react/jsx-no-undef
776:24 error 'MTableBodyRow' is not defined no-undef

2nd example utilizing Row does not give an error, but also does not adjust the style of any of the rows:

1st Example / Attempt
<HodgeChartsWOR columns={chartColumns} data={data} title={chartTitle} options={options} actions={actions} components={{ Row: props => ( <MTableBodyRow {...props}> <span style={{ backgroundColor: (MTableBodyRow.index + 1) % 2 === 0 ? "#EEE" : "#FFF", }} /> </MTableBodyRow> ), }} />

or
2nd Example / Attempt
<HodgeChartsWOR columns={chartColumns} data={data} title={chartTitle} options={options} actions={actions} components={{ Row: props => ( <Row style={{ backgroundColor: (Row.index + 1) % 2 === 0 ? "#EEE" : "#FFF", }} /> ), }} />

[pak11273]

I think you're making this out to be more harder than it is. There is no need to override the component. This can be done through the options:

````
options={{
sorting: false,
rowStyle: x => {
if (x.tableData.id % 2) {
return {backgroundColor: "#f2f2f2"}
}
}
}}
/>

````

[mbrn]

I think you're making this out to be more harder than it is. There is no need to override the component. This can be done through the options:

<MaterialTable
     options={{
         sorting: false,
         rowStyle: x => {
             if (x.tableData.id % 2) {
                 return {backgroundColor: "#f2f2f2"}
             }
         }
     }}
/>

Hi @pak11273 ,

This a great solution. But i realized that if you sort data stripes wont be correct. To solve this problem, we may pass dynamic index of row to this function as a second parameter.

[gxwheel152]

Great - Thanks for taking a look.
Wish I was further along on my development journey, so I could contribute (been more of a QA guy most of my career). Anyway, love the tool and thanks for the quick response!!

[mbrn]

I added index parameter to functional rowStyle.

 options={{
                    rowStyle: (rowData, index) => {
                        if (i % 2) {
                            return {backgroundColor: "#f2f2f2"}
                        }
                    }
                }}

It will be in next release

[mbrn]

This is done with version 1.38.0

[gxwheel152]

Good stuff --- thanks for the help.
https://www.3dwrestlerstats.com/d1-hodge-trophy-wrestling-stats

Here's the material-table component I utilize. I swap out the options, data, columns, etc. depending on the type of chart selected. For the Options I spread them out and add in the RowStyling because the data is needed to get the index.

   <HodgeChartsWOR
        columns={chartColumns}
        data={data}
        title={chartTitle}
        options={{
           ...options,
           rowStyle: (data, index) => {
              if (index % 2) {
                return { backgroundColor: "#ecf2f9" }
              }
           },
         }}
  />

[mbrn]

It looks well

Good stuff --- thanks for the help.
https://www.3dwrestlerstats.com/d1-hodge-trophy-wrestling-stats

[kl1mm]

Doesn't work if you have a grouped column. Index is always 0.

[nmwangxin]

Doesn't work if you have a grouped column. Index is always 0.

Same thing here, using V1.50.0, striped rows works after filtering now, but not work after grouping

[Feijo]

If you are using Typescript:

options={{
  rowStyle: (_data: any, index: number, _level: number) => {
    return index % 2 
      ? { backgroundColor: '#ecf2f9' }
      : {};
  },
}}