How update table styling after sorting?

[gabrielizalo]

I created a Zebra Table with sort columns:

The did setup the zebra style in this way:

<MaterialTable
  data={data}
  columns={columns}
  ...
  options={{
    ...
    rowStyle: (rowData) => ({
      backgroundColor:
        rowData.tableData.id % 2 === 0
          ? "var(--white)"
          : "var(--wild-sand)",
    }),
  }}
/>

After sorting, the background colors remains in the original rows, so the table is not a zebra table anymore:

How I can update the "zebra styling" of the table after sorting?

Thanks

[Domino987]

Can you add a sandbox as requested? Thank you.``

[gabrielizalo]

@Domino987 Thanks.. I created this SandBox: https://codesandbox.io/s/material-table-zebra-with-order-pk4zvt?file=/src/index.js

If you click in any of the header columns rows will be sorted and zebra style is damaged.

[Domino987]

You need to use the index, not the id

rowStyle: (rowData, index) => {console.log(index, rowData);return { background: index % 2 === 0 ? "White" : "Gray" }},

[Domino987]

You need to use the index, not the id

rowStyle: (rowData, index) => {console.log(index, rowData);return { background: index % 2 === 0 ? "White" : "Gray" }},

[gabrielizalo]

It worked perfectly. Thanks @Domino987 !