Как установить динамическое поле столбца в AG-Grid?

Question

Скажем, в приведенном ниже примере вместо трех отдельных столбцов для медалей (золотых, серебряных и бронзовых) я бы хотел иметь только один столбец для всех различных медалей.

---

(Я знаю, что это совершенно нереалистичный пример, но ради изучения концепций) Я хотел бы показать:

• золотых медалей ТОЛЬКО, когда возраст спортсмена меньше20 (19 лет и младше)

• серебряные медали, когда возраст спортсмена составляет от 20 до 30 лет (включая 20–30)

• бронзовые медали, если возраст спортсменавыше 30 (31 и выше).

И только один столбец называется «Медали».

---

this.columnDefs = [
  {
    headerName: "Athlete",
    field: "athlete"
  },
  {
    headerName: "Sport",
    field: "sport"
  },
  {
    headerName: "Age",
    field: "age",
    type: "numberColumn"
  },
  {
    headerName: "Year",
    field: "year",
    type: "numberColumn"
  },
  {
    headerName: "Date",
    field: "date",
    type: ["dateColumn", "nonEditableColumn"],
    width: 200
  },

  {
    headerName: "Gold",
    field: "gold",
  },
  {
    headerName: "Silver",
    field: "silver",
  },
  {
    headerName: "Bronze",
    field: "bronze",
  }
];

Полный пример использования плунжера здесь: https://plnkr.co/edit/R0JFJwXuyiM7320rNTtx?p=preview

Answer 1

Вы можете использовать valueGetter для этой цели. ValueGetter - это функция, которая возвращает значение для столбца и получает аргумент типа ValueGetterParams.

    {
      headerName: "Medals",
      valueGetter: (params) => {
        if (params.data.age < 20) {
          return params.data.gold;
        } else if (params.data.age >= 20 && params.data.age < 30) {
          return params.data.silver;
        } else if (params.data.age > 30) {
          return params.data.bronze;
        } else {
        return '';
        }
      },
      type: ["nonEditableColumn"],
      width: 200
    }

Вот плункер рабочего демо - https://plnkr.co/edit/okKOsICJ0GHyHnjh8VRY?p=preview

Узнайте больше о valueGetters здесь - https://www.ag -grid.com / javascript-grid-value-getters / # value-getter