MUI X 数据网格非截断列宽

Question

如果单元格数据的内容溢出列宽，MUI X 数据网格默认会截断单元格数据。有没有办法防止这种情况，使列宽与标题的最长文本内容和该列中单元格的最长内容相匹配？

我知道您可以使用 MUI X Data Grid Pro 自动调整列宽。

但是有没有办法在非专业 MUI DataGrid 中做类似的事情？我已经尝试过使用

renderCell

和类似的自定义 JSX 单元组件来使用

textOverflow: ellipsis

，但它不起作用。

明确地说，这是我想避免的：

我想要这个：

Answer 1

这对我的非专业/高级版本有效。

我认为您正在寻找

autosizeOnMount

和

autosizeOptions

。

文档：https://mui.com/x/react-data-grid/column-dimensions/#autosizing。

这在普通的 MUI X DataGrid 中对我有用。但是，它并没有像文档中那样工作 %100：

autosizeOnMount

做了很多，但并不完美。请参阅下面的代码，其中我在 250 处使用

useEffect()

和

setTimout()

来获得“剩余的方式”。丑陋，丑陋，但它对我来说工作可靠。

interface MyProps {
  rows: GridRowsProp
  columns: GridColDef[]
}

export default function MyTable(props: MyProps) {

  const apiRef = useGridApiRef()

  useEffect(() => {
    // useEffect should fire after mounting. But, I had to add a little delay here for this to work properly and actually
    // autosize _after_ everything else has rendered.
    setTimeout(() => {
      console.log("Autosizing columns...")
      apiRef.current.autosizeColumns({
        includeOutliers: true,
        includeHeaders: true,
      })
    }, 250)
  }, [apiRef])

  return (
    <div style={{ width: '100%' }}>
      <DataGrid
        apiRef={apiRef}
        rows={props.rows}
        columns={props.columns}
        // Renders with columns sized to fit content, BUT, doesn't quite work as expected. So, I call autosizeColumns
        // again in useEffect above. Somehow, this gives everything a little extra nudge and improves the layout.
        autosizeOnMount
        autosizeOptions={{
          includeOutliers: true,                 // Columns sized to fit all cell content
          includeHeaders: true,                  // Columns sized to fit all header content
        }}
      />
    </div>
  )
}