Ag-Grid : Est-il possible de styliser une ligne sur une minuterie plutôt que sur la base des données de la ligne ?

Question

Je dois changer la couleur d'arrière-plan d'une ligne après un certain temps. Il y a une colonne dans la grille avec le temps en secondes et je dois changer la couleur de la ligne après 50 % de ce temps.

Les données de la grille elle-même ne changent pas, donc l'utilisation de rowClassRules ne semble pas fonctionner car rien ne change pour déclencher l'évaluation des données par rapport aux règles. Au lieu de cela, j'ai pensé à utiliser la fonction setTimeout() avec un délai, mais je n'ai pas pu comprendre ce qui serait fait à l'intérieur du bloc setTimeout pour appliquer la classe CSS au rowNode. Je ne souhaite modifier aucune donnée dans la ligne elle-même. Dans le pire des cas, je suppose que je pourrais ajouter une nouvelle colonne cachée et modifier la valeur de cette colonne après le minuteur, mais je préfère éviter cela. J'utilise React.

J'essaie de faire quelque chose comme ceci :

let red_warnings = [] 

let yellow_warnings = []

const rowClassRules = {
    '.red': (params) => { return red_warnings.includes(params.data.Id) }, 
    '.yellow': (params) => { return yellow_warnings.includes(params.data.Id) } 
}

<AgGridReact
    rowClassRules={rowClassRules}
/>

// when a new row is added
setTimeout(() => {
    yellow_warnings.push(Id)
}, 1000 * Timeout * 0.5)

setTimeout(() => {
    red_warnings.push(Id)
}, 1000 * Timeout * 0.8)

Mais comme il n'y a aucune donnée réellement modifiée dans la ligne, les rowClassRules ne sont pas déclenchées pour être réévaluées une fois que j'ajoute l'ID au tableau d'avertissement.

Answer 1

C'est tout à fait possible.

L'idée est de mettre à jour les données de la grille pour appliquer certains styles prédéfinis.

Par exemple, nous mettons à jour le champ âge de chaque enregistrement à 100 après 3 secondes. Selon nos rowClassRules, toutes les données dont l'âge est supérieur à 98 seront candidates à nos styles prédéfinis.

function onFirstDataRendered(params) {
  setTimeout(function () {
    params.api.forEachNode((node) => {
      var newData = {
        ...node.data,
        person: {
          ...node.data.person,
          age: 100,
        },
      }
      node.data = newData
      params.api.redrawRows()
    })
  }, 3000)
}

Regarde cet idiot

https://plnkr.co/plunk/wVt8QvavUM1UrblC