[英]Material-table: How change width of the columns?
我正在使用 Google Material UI 官方推荐的Material Table库作为数据表库,并且在配置列宽时遇到了麻烦。
列width
属性一直有效,直到我们的内容适合单元格: CodeSandbox有什么解决方案可以解决这个问题吗?
如果你想为每一列设置特定的宽度,我相信你需要指定选项tableLayout: 'fixed'
。 文档是这样引用它的:
表布局 | 自动或固定 | 使列宽算法自动或固定
所以你的代码可能是这样的:
const tableColumns = [
{ title: "Lorem ipsum", field: "lorem", width: "10%" }, // fixed column width
{ title: "Name", field: "name", width: "80%" },
{ title: "Custom status", field: "customStatus", width: "10%" }]
<MaterialTable
tableRef={tableRef}
columns={tableColumns}
data={tableData}
onRowClick={(evt, selectedRow) =>
setSelectedRow(selectedRow.tableData.id)
}
title="Remote Data Example"
options={{
rowStyle: rowData => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
}),
tableLayout: "fixed"
}}
/>
这里是沙盒。
祝你好运!
对动态列宽和 header 使用以下样式
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
...
}
此处发布的解决方案均不适用于最新版本的材料表(撰写本文时为v1.69.3 ),因此我创建了一个代码框来测试不同的设置组合,直到找到最适合我的设置。
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{
title: "Status",
field: "status",
cellStyle: {
cellWidth: '15%'
}
}
]}
data={users}
options={{
tableLayout: 'auto'
}}
/>
我自己也一直在苦苦挣扎,这里提供的解决方案都不适合我,所以我会留下我的,以防有人发现它有帮助。 这有点 hacky,但我发现唯一一个可以与我的页面设置一起使用。 我什至尝试从文档中粘贴示例,因为它在某些列上具有固定宽度,但这在我的页面上也不起作用。
<MaterialTable
title="Users"
options={{
rowStyle: {
overflowWrap: 'break-word'
}
}}
columns={[
{
title: "Name",
field: "name",
cellStyle: {
minWidth: 200,
maxWidth: 200
}
}
]},
data={userData}
/>
什么对我很有效
<MaterialTable
title="Users"
options={{
rowStyle: {
overflowWrap: 'break-word'
}
}}
columns={[
{
title: "Name",
field: "name",
width: "4%"
}
]},
data={userData}
/>
Material-ui 4.11.4以上版本不支持,使用如下版本
@material-ui/core = 4.11.4 材料表=1.69.0
这将解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.