Question

我正在尝试为每列设置不同的列宽。但是在mui datatable列选项中没有设置列宽的选项。我也尝试覆盖css属性，这也不起作用。还有其他设置列宽的选项吗？ MUIDataTableBodyCell：{ 根： { 高度：“ 30px”，宽度：“ 200px” } }

Answer 1

经过反复试验，我找到了对我有用的解决方案。我正在使用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>}
      },
    },

Answer 2

您将必须提供自己的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的组成部分。

mui datatable列宽选项不可用

2 个答案: