Custom Row Color in the nuxeo-data-table

Hello,

First, thank you for your work :)

I would like to custom each row color of the data-table but I have a problem, I can collect each row and add a new class (with the new color) but the color change *after * the table was full. So, each time all rows have the wrong color (the previous color). What can i do ?

Below, my code :

//Listener on the event "nuxeo-page-loaded", it's fire by the table
listeners: {
    'nuxeo-page-loaded': 'updateOccurrenceColor'
},


 //The function to search all rows and update the color
updateOccurrenceColor: function() {
    this.dataRows = this.$.dataModuleTable.querySelectorAll('#items nuxeo-data-table-row');
    if (this.dataRows) {
        for (var i = 0; i < this.dataRows.length; i++) {
            this.setColorOnRow(valueOccurrence, this.dataRows[i]);
        }
    }
},

//The function to change the color
setColorOnRow: function(occurrence, row) {
    //Here i add a random class color ;
    var rowColor;
    row.classList.add(rowColor);
},

Thank you for your help,

Best regards,

Charly CARRERE

0 votes

1 answers

900 views

ANSWER



I Find a solution, I add a setTimeout to update the color row for the next js cycle :

updateOccurrenceColor: function() {
    var self = this;
    setTimeout(function() {
        self.dataRows = self.$.dataModuleTable.querySelectorAll('#items nuxeo-data-table-row');
        if (self.dataRows) {
            for (var i = 0; i < self.dataRows.length; i++) {
                self.setColorOnRow(valueOccurrence, self.dataRows[i]);
            }
        }
    });
},
0 votes