Material-UI DataGrid 根据文本内容动态行高

Question

使用 DataGrid 时，我无法弄清楚如何使行高可变，以便行高动态地基于单元格中文本内容的长度。

我想我需要renderCell在列上添加较长的文本，并使用该<Typography>组件，但我不知道使用什么参数来设置这种样式。

有很多关于如何处理截断、省略等的文档，但我似乎无法弄清楚我需要根据内容申请可变行高。

Answer 1

从数据网格版本5.12.0开始，支持动态行高。

使用方法：

<DataGrid getRowHeight={() => 'auto'} />

请参阅此处的文档了解更多详细信息。

Answer 2

const StyledDataGrid = withStyles({
    root: {
        '& .MuiDataGrid-renderingZone': {
            maxHeight: 'none !important',
        },
        '& .MuiDataGrid-cell': {
            lineHeight: 'unset !important',
            maxHeight: 'none !important',
            whiteSpace: 'normal',
        },
        '& .MuiDataGrid-row': {
            maxHeight: 'none !important',
        },
    },
})(DataGrid);

请参阅此演示的示例。

Answer 3

基于此线程，这是不可能的。

@ronnyroeller 感谢您的功能请求。这绝对是我们所期待的。我们很高兴看到它浮出水面:)。为了使虚拟化发挥作用，网格需要知道所有行的大小。