Я новичок в React MUI DataGrid
, пытаюсь создать таблицу, похожую на следующую.
Как создать столбец с тегами в качестве значений? Высота строки должна динамически регулироваться в зависимости от количества элементов в столбце тегов.
Я сделал следующее, чтобы создать столбец тегов в сетке данных. Но высота строки статична, и элементы обрезаются, если количество тегов велико.
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 Да, я читал документацию. Автоматическая регулировка высоты строки не работает, если я использую опцию renderCell, как указано выше в примере кода.
Я понимаю. Возможно, вам придется обновить строки после рендеринга. Вот аналогичный вопрос: Динамическая высота строки Material-UI DataGrid на основе текстового содержимого
@isherwood Спасибо, getRowHeight = {() => 'auto'} сработало. Но мне пришлось удалить <Stack> из приведенного выше кода. Из-за этого он не заворачивался.
После некоторой помощи комментариев я смог получить ответ. Пришлось удалить <Stack>
из опции renderCell
и добавить getRowHeight = {() => "auto"}
к <DataGrid />
. <Stack>
препятствовал переносу значений ячеек.
К тегам это не имеет никакого отношения. Это вопрос разрешения сетке содержать любой контент, который вы в нее помещаете. Я предлагаю пересмотреть заголовок и вопрос. Пожалуйста, возьмите экскурсию .