Как я могу получить сетку MUI для регулировки высоты строки для динамического контента?

Я новичок в React MUI DataGrid, пытаюсь создать таблицу, похожую на следующую. Как создать столбец с тегами в качестве значений? Высота строки должна динамически регулироваться в зависимости от количества элементов в столбце тегов.

Как я могу получить сетку MUI для регулировки высоты строки для динамического контента?

Я сделал следующее, чтобы создать столбец тегов в сетке данных. Но высота строки статична, и элементы обрезаются, если количество тегов велико.

columns = [{
      field: "tags",
      headerName: "Tags",
      renderCell: (params) => (
        <Stack direction = "row" spacing = {0.25}>
          <Fragment>            
            {params.row.tags.map((tag) => (
              <Chip label = {tag} />
            ))}
          </Fragment>
        </Stack>
      ),
      editable: true,
      flex: 2.5,
    }]

🤔 А знаете ли вы, что...
React поддерживает создание анимаций и переходов между состояниями.


60
1

Ответ:

Решено

После некоторой помощи комментариев я смог получить ответ. Пришлось удалить <Stack> из опции renderCell и добавить getRowHeight = {() => "auto"} к <DataGrid />. <Stack> препятствовал переносу значений ячеек.