Ag-Grid Tree-подобная структура присоединяет cellClass к ячейкам NodeChildren на основе проверки

Question

В моем Jquery & JavaScript, Angular, во всех отдельных приложениях я включил Ag-Grid с columnDefs, как показано ниже: -

 this.columnDefs = [
  {
    headerName: "Age",
    field: "age",
    cellRenderer: "agGroupCellRenderer"
  },
  {
    headerName: "Name",
    field: "name"
  },
  {
    headerName: "Year",
    field: "year"
  },
  {
    headerName: "Country",
    field: "country"
  }
];

, и моя строка данных выглядит как ниже

 this.rowData = [
  {
    age: "Group A",
    participants: [
      {
        age: 1,
        name: "Michael Phelps",
        year: "2008",
        country: "United States"
      },
      {
        name: "A.2",
        age: 2,
        year: "2008",
        country: "United States"
      },
      {
        name: "A.3",
        age: 50,
        year: "2008",
        country: "United States"
      }
    ]}];

this.getNodeChildDetails = function getNodeChildDetails(rowItem) {
  if (rowItem.participants) {
    return {
      group: true,
      children: rowItem.participants,
    };
  } else {
    return null;
  }

Сейчася хочу прикрепить cellClass к значениям сетки детей, основанным на проверке, например: -

 if(age< 23 || ''){
  return['classNameThatiWantToAttach'];
 }

Как это сделать ??

Вы можете внести изменения в нижеприведенный элемент также и для этого: -

https://plnkr.co/edit/lmjtuqfId4FIsTI5luL8?p=preview

Answer 1

Пожалуйста, смотрите обновленный plunkr, показывающий ячейку красного цвета в соответствии с проверкой возраста:

https://plnkr.co/edit/QZd2MM1LflQaruxdCmym?p=preview

this.columnDefs = [
    // ...
    {
        headerName: "Age",
        field: "age",
        cellClassRules: this.getCssClass()
    }
    // ...
];

getCssClass(): {[cssClassName: string]: (Function | string)} {
    return {
        'invalid-age': this.validateAge(),
    };
}

Answer 2

Вы можете сделать это так

редактировать определения столбцов и добавлять к нему функцию cellClass

 {
    headerName: "Year",
    field: "year",
    editable: true,
    cellClass: this.cellClass
  }

Затем определите функцию, добавьте необходимые условия и верните строку со значением класса

  cellClass(params) {
    if (params.value >= 2015)
      return "redClass"
  }

Не забудьте добавить стиль CSS для классов.

Пример