mui数据表列宽选项不可用
mui数据表列宽选项不可用
提问于 2019-12-12 19:14:45
我正在尝试为每一列设置不同的列宽。但在mui数据表列选项中没有设置列宽度的选项。我也尝试过覆盖css属性，但同样不起作用。是否有其他选项来设置列宽。根：{ MUIDataTableBodyCell：{ height：'30px'，width：'200px‘} }，
回答 2
Stack Overflow用户
发布于 2020-10-17 09:10:37
经过大量的试验和错误，我能够找到一个对我有效的解决方案。我使用的是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>}
},
},Stack Overflow用户
发布于 2019-12-13 10:59:44
您必须提供自己的columns，它是一个对象数组。
import { myCustomColumns } from "./my_custom_columns.js";
...
<MuiDataTable ... columns={myCustomColumns} />数组中的每个对象都是一列，您将在该列的options属性上为该对象设置自己的customHeadRender。请看下面的代码片段。
// 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的一个组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59303328
复制相关文章
相似问题
腾讯云开发者
