How to adjust the width of the Material Table?

Question

I am using material-table and I would like to know if there is any way to adjust the width of this table. I have a table with only two columns and I can't get it to spread across the entire screen. Try as follows without result.

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

The only way that worked for me to extend the width of the table was as follows. Any suggestions!!! Grateful in advance..

    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 }
        },
    ];

score 1 · Answer 1 · answered Dec 23 '20 at 22:40

This is how I am resizing the Material Table Cell width of a column in the material table

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

This works well on my React project.

How to adjust the width of the Material Table?

1 Answers1