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

Question

我正在使用 MUI 数据网格（麻省理工学院许可版本）。

我将列设置为flex，因为我希望它们填满可用宽度。但是，如果表格调整得太小，我希望表格溢出（需要滚动）。

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

我知道我可以number为列设置 minWidth，但无法设置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 */}
        />
      </>
    );
  }
}