最小宽度适合内容MUI数据网格弹性列

Question

我使用的是MUI数据网格(MIT许可版本(。

我将列设置为flex，因为我希望它们填充可用的宽度。但是，如果表的大小太小，我希望它溢出(需要滚动(。

例如，对于电子邮件列，我希望它的宽度永远不要小于最长的电子邮件(因此文本永远不会有...(，而是让它扩展宽度，以填充可用空间。

我知道我可以为列设置numberminWidth，但不能设置auto或类似的值。我有没有办法做到这一点，如果列中有一些数据太大，数据网格就会溢出？

Answer 1

这是MUI的一个开放问题，尽管您可以使用包装器使其工作。

从社区对这个问题的回答(署名为@alxndrsn(中，您可以使用类似的东西来实现所需的功能。

import React, { Component } from 'react';
import _ from 'lodash';
import { DataGrid } from '@mui/x-data-grid';
import CircularProgress from '@material-ui/core/CircularProgress';
import Grid from '@material-ui/core/Grid';
export default class StretchyDataGrid extends Component {
constructor(props) {
super(props);
this.ref = React.createRef();
const { columns } = props;
this.state = { mappedColumns:_.clone(columns) };
}
autoSizeColumns = () => {
const domRows = [ ...this.ref.current?.querySelectorAll('.MuiDataGrid-row') ];
const domReady = (this.props.rows?.length === 0) || domRows.length;
if(!domReady) {
setTimeout(this.autoSizeColumns);
return;
}
this.setState(previousState => {
const mappedColumns = _.clone(previousState.mappedColumns);
mappedColumns
.forEach((col, idx) => {
const maxContentWidth = domRows
.reduce((previousMax, dR) => Math.max(previousMax, dR.childNodes[idx].scrollWidth), 0);
if(maxContentWidth < this.ref.current.clientWidth / mappedColumns.length) {
col.width = maxContentWidth;
delete col.flex;
} else {
delete col.width;
col.flex = 1;
}
});
return { mappedColumns, resized:true };
});
}
render() {
const { mappedColumns, resized } = this.state;
const { columns, ...props } = this.props;
return (
<>
{!resized &&
<Grid container alignItems="center" justifyContent="center" style={{height:'100%', position:'absolute', opacity:0.8, backgroundColor:'white', textAlign:'center', zIndex:1}}>
<Grid item xs={12}>
<CircularProgress/>
</Grid>
</Grid>
}
<DataGrid
ref={this.ref}
onResize={this.autoSizeColumns}
columns={mappedColumns}
{...props /* eslint-disable-line react/jsx-props-no-spreading */}
/>
</>
);
}
}

Answer 2

在不使用最小宽度的情况下显示全文，并避免。。。只需添加两行CSS即可正常工作

flex: 1 0 auto; // flex gro 1 and item teks its space full
white-space: pre; // text will never break into 2 line

有关更多细节，请添加一些照片或更多细节，以便我们更好地理解。

Answer 3

根据这个github线程，它仍在他们的开发路线图中。但回复中有一些社区代码，你可能想看看，比如这个。

Answer 4

const columns = [
{
field: "firstName",
headerName: "First name",
width: "max-content",
editable: true
}
]

u需要设置宽度："；最大内容">，工作正常。

但我不确定，因为我不知道你确切的表结构和样式属性。