Как я могу получить сетку 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,
    }]

К тегам это не имеет никакого отношения. Это вопрос разрешения сетке содержать любой контент, который вы в нее помещаете. Я предлагаю пересмотреть заголовок и вопрос. Пожалуйста, возьмите экскурсию .

isherwood 02.07.2024 15:23

Вы читали документацию?

isherwood 02.07.2024 15:24

@isherwood Да, я читал документацию. Автоматическая регулировка высоты строки не работает, если я использую опцию renderCell, как указано выше в примере кода.

Wraith 02.07.2024 15:31

Я понимаю. Возможно, вам придется обновить строки после рендеринга. Вот аналогичный вопрос: Динамическая высота строки Material-UI DataGrid на основе текстового содержимого

isherwood 02.07.2024 15:51

@isherwood Спасибо, getRowHeight = {() => 'auto'} сработало. Но мне пришлось удалить <Stack> из приведенного выше кода. Из-за этого он не заворачивался.

Wraith 02.07.2024 15:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Другие вопросы по теме