Реагировать на элемент массива настроек сетки кендо как поле столбца

Question

У меня есть файл products.json со всеми категориями в качестве объекта. Он отлично работает, если формат данных указан в ссылке ниже, но не работает, если категории в этом json являются массивом. Я пытаюсь создать сетку реагирования с одним столбцом из массива элементов категории.

Пример: https://stackblitz.com/edit/react-txwobq?file=app/products.json

Отлично работает с блоком категорий как

<Column field="Category.CategoryName" title="CategoryName" />

в коде сетки с указанным ниже объектом json

"Category" : {
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}

Но я получаю внешний API в формате массива для таких категорий, как

"Category" : [{
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}]

Я пытался прочитать это значение в сетке реагирующего кендо, но безуспешно. В чем была ошибка, которую я делаю?

<Column field="Category[0].CategoryName" title="CategoryName" />

Answer 1

Вы можете привязать столбец к полю «Категория» и определить пользовательский компонент ячейки, который будет отображать первый элемент из массива.Пожалуйста, проверьте пример ниже:

Определение столбца:

  <Column
    field="Category"
    title="Categories"
    cell={CategoryCell} 
  />

Пользовательская ячейка:

const CategoryCell = (props) => {
   const category = props.dataItem[props.field][0];

   return <td>{category.CategoryName}</td>;
};