我正在使用Google Material UI官方推荐的Material Table库作为数据表库,但在配置列宽时遇到了问题。列width属性一直有效,直到我们的内容适合单元格:CodeSandbox是否有解决方案?
width
e0uiprwp1#
如果你想给每一列设置特定的宽度,我相信你需要指定选项tableLayout: 'fixed',文档是这样引用的:表格布局|自动或固定|使列宽算法自动或固定所以你的代码可能是这样的:
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" }} />
这是sandbox。祝你好运!
ijnw1ujt2#
动态列宽和标题使用“下方”样式
columns={[ { title: 'Create Date', field: 'create_date', cellStyle: { whiteSpace: 'nowrap' }, ... ]} options={{ headerStyle: { backgroundColor: '#DEF3FA', color: 'Black', whiteSpace: 'nowrap' }, ... }
e0uiprwp3#
对我来说非常有效的是
<MaterialTable title="Users" options={{ rowStyle: { overflowWrap: 'break-word' } }} columns={[ { title: "Name", field: "name", width: "4%" } ]}, data={userData} />
lb3vh1jj4#
这里发布的解决方案都不适用于我最新版本的material-table(撰写本文时为v1.69.3),因此我创建了一个codesandbox来测试不同的设置组合,直到找到最适合我的一个。
<MaterialTable columns={[ { title: "Name", field: "name" }, { title: "Email", field: "email" }, { title: "Status", field: "status", cellStyle: { cellWidth: '15%' } } ]} data={users} options={{ tableLayout: 'auto' }} />
uajslkp65#
我自己也在为同样的问题而挣扎,这里提供的解决方案没有一个适合我,所以我会留下我的,以防有人觉得它有用。它有点过时,但我发现这是唯一一个适合我的页面设置。我甚至尝试从文档中粘贴示例,因为它在一些列上有固定的宽度,但在我的页面上也不起作用。
<MaterialTable title="Users" options={{ rowStyle: { overflowWrap: 'break-word' } }} columns={[ { title: "Name", field: "name", cellStyle: { minWidth: 200, maxWidth: 200 } } ]}, data={userData} />
jogvjijk6#
不支持高于4.11.4的材质-ui版本,请使用以下版本@材料-用户界面/核心= 4.11.4材料表=1.69.0这将解决问题
6条答案
按热度按时间e0uiprwp1#
如果你想给每一列设置特定的宽度,我相信你需要指定选项
tableLayout: 'fixed'
,文档是这样引用的:表格布局|自动或固定|使列宽算法自动或固定
所以你的代码可能是这样的:
这是sandbox。
祝你好运!
ijnw1ujt2#
动态列宽和标题使用“下方”样式
e0uiprwp3#
对我来说非常有效的是
lb3vh1jj4#
这里发布的解决方案都不适用于我最新版本的material-table(撰写本文时为v1.69.3),因此我创建了一个codesandbox来测试不同的设置组合,直到找到最适合我的一个。
uajslkp65#
我自己也在为同样的问题而挣扎,这里提供的解决方案没有一个适合我,所以我会留下我的,以防有人觉得它有用。它有点过时,但我发现这是唯一一个适合我的页面设置。我甚至尝试从文档中粘贴示例,因为它在一些列上有固定的宽度,但在我的页面上也不起作用。
jogvjijk6#
不支持高于4.11.4的材质-ui版本,请使用以下版本
@材料-用户界面/核心= 4.11.4材料表=1.69.0
这将解决问题