Devextreme-reactive: Alternate color row with Tree data

[ccamusso]

Is it possible to alternate color row in the virtual table with Tree data?

I added a persistent row index to identify a row bud it is no best solution:
https://codesandbox.io/s/yv1wopw239

Are you a workaround?
Carlo

[SergeyAlexeev]

Hi,

Let's take a look at your example.
The following line adds a row index for each row:

const dataWithRowIndex = data ? rows.map((row, index) => ({ ...row, rowIndex: index })) : data;

Then, you pass the dataWithRowIndex array to the rows property of the Grid component. Next, you use the CustomTreeData plugin. As you can see in our documentation, the CustomTreeData plugin modifies Grid rows. That's why your row indices don't make sense. At the same time, the TableTreeColumn plugin exports the tableBodyRows Getter, which contains rows that will be rendered. Thus, you can override this Getter to apply a row index:

const tableBodyRowsComputed = ({ tableBodyRows }) =>
  tableBodyRows.map((tableBodyRow, i) => ({
    ...tableBodyRow,
    ROW_INDEX: i
  }));

<Getter name="tableBodyRows" computed={tableBodyRowsComputed} />

Then, you can use the ROW_INDEX field to highlight odd rows.

I've updated your sample as well.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.