Material-Table 列不能调整大小，超过 5 列

Question

我正在使用 material-table 显示数据。我有 19 列要显示，我想为每一列设置固定大小。使用 width: 45% 不会进行任何视觉更改。我不能使用 whiteSpace: "nowrap"，因为这只会使 table 变得更长，并且当某些单元格包含大句子时更难使用。我已经尝试在所有 19 个专栏中使用 width、cellStyle 和 headerStyle，但没有任何区别。

这是我的一些专栏和我的 table:

const columns = [
        { title: "Sizing ID", field: "SizingId" },
        { title: "Intake ID", field: "IntakeID" },
        { title: "FCRID", field: "FCRID" },
        { title: "Taxonomy ID", field: "TaxonomyId" },
        { title: "Domain", field: "Domain" },
        { title: "Experience", field: "Experience" },
        { title: "Product Line", field: "ProductLine" },
        { title: "Sizing Contact", field: "SizingContact" },
        { title: "Q1Cost", field: "Q1Cost" },
        { title: "Sizing Comments", field: "SizingComments" },
];
...

<MaterialTable
    title="Sizing"
    data={sizing.sizing}
    columns={columns}
    options={{
        pageSize: 15,
        pageSizeOptions: [15, 25, 50],
        padding: "dense",
        headerStyle: {
            backgroundColor: "#0076CE",
            color: "#e5e6e7",
            fontFamily: "sans-serif",
            fontSize: 12,
            fontWeight: 600,
            maxWidth: 200,
        },
        rowStyle: (data, index) => {
            if (index % 2) {
                return {
                    backgroundColor: "#EEEEEE",
                    fontSize: 12,
                };
            } else {
                return { fontSize: 12 };
            }
        },
    }}
/>

Answer 1

文档中列数较多的情况下尽量使用Fixed columns https://material-table.com/#/docs/features/fixed-columns

Material-Table 列不能调整大小，超过 5 列

Material-Table columns not resizable with more than 5 columns

javascript

reactjs

material-table