1

我正在尝试为每一列设置不同的列宽。但是在 mui 数据表列选项中没有设置列宽的选项。我也尝试覆盖 css 属性，但这也不起作用。是否有任何其他选项来设置列宽。MUIDataTableBodyCell：{根：{高度：'30px'，宽度：'200px'}}，

4

2 回答 2

7

经过大量的反复试验，我找到了适合我的解决方案。我正在使用 mui-datatables 3.5.0。

我可以通过设置单元格道具（setCellProps）来设置列宽。最初，我对单元格和标题都这样做了，但没有证明标题是必要的。

    export const columns = [
    {
        name: "category",
        label: "Category",
        options: {
            setCellProps: () => ({ style: { minWidth: "800px", maxWidth: "800px" }}),
            customBodyRender: (data, type, row) => {return <pre>{data}</pre>}
      },
    },
于 2020-10-17T01:10:36.927 回答
3

您必须提供自己columns的对象数组。

import { myCustomColumns } from "./my_custom_columns.js";

...

<MuiDataTable ... columns={myCustomColumns} />

数组上的每个对象都是一列，您可以在其中设置自己customHeadRender的options对象属性。看看下面的代码片段。

// my_custom_columns.js


/* 
   Since you are providing your own columns, the default column styling
   will be 'cleared'. The columnStyleWithWidth below will bring back the default 
   styling with the width that you would like to define.
*/

const columnStyleWithWidth = {
   top: "0px",
   left: "0px",
   zIndex: "100",
   position: "sticky",
   backgroundColor: "#fff",
   width: "300px"
}

export const columns = [
{
   name: "category",
   label: "Category",
   options: {
     ...,
     customHeadRender: ({index, ...column}) {
        return (
          <TableCell key={index} style={columnStyleWithWidth}>
              <CustomColumn label={column.label} />   
          </TableCell>
        )
     }
   }
},
...
]

请注意，它TableCell是Material-UI.

于 2019-12-13T02:59:43.907 回答