如何调整材料台的宽度?

时间:2019-10-29 19:24:58

标签: reactjs material-table

我正在使用材料表,我想知道是否有任何方法可以调整此表的宽度。 我有一个只有两列的表格,我无法让它散布在整个屏幕上。 尝试以下操作,没有结果。

        <div style={{ maxWidth: "100%" }}>
            <MaterialTable
                title="All zones"
                columns={columns}
                data={data}
                options={options} 
            />
        </div>

对我来说,扩展表格宽度的唯一方法如下。有什么建议么!!!预先感谢。.

    const columns = [
        {
            field: "name",
            title: "Name",
            cellStyle: { width: 600, maxWidth: 600 },
            headerStyle: { width: 600, maxWidth: 600 }
        },
        {
            field: "description",
            title: "Description",
            cellStyle: { width: 1000, maxWidth: 1000 },
            headerStyle: { width: 1000, maxWidth: 1000 }
        },
    ];

1 个答案:

答案 0 :(得分:0)

这就是我如何调整材料表中列的材料表单元格宽度

const columns = [
    {
        field: "firstName",
        title: "First Name",
        width: 300    // 1st way        
    },
    {
        field: "lastName",
        title: "Last Name",
        width: '20%'  // 2nd way          
    },
];

这在我的 React 项目中运行良好。