Add equal width in Data Grid in Material UI

user_2174920 0
Viewed 205

I want to equally distribute the width of columns with respect to container width.

You can check this demo https://codesandbox.io/s/92qje?file=/demo.tsx

Here if I remove width then by default 100px width is applied. Is there any way to apply percentage in width or width to be equally distributed?

material-ui
1 Answers

I do not know about having it be with respect to container width. I was trying to use something like 10vw. But That wasn't working out well. So here is what I did.

    const width = window.innerWidth * 0.1; 

    const columns = [
        { field: 'id', headerName: 'ID', width: width },
        { field: 'user', headerName: 'User', width: width },
        { field: 'table', headerName: 'Table', width: width },
        { field: 'action', headerName: 'Action', width: width },
        { field: 'fileName', headerName: 'File Name', width: width },
        { field: 'fileSize', headerName: 'Size', width: width },
        { field: 'rows', headerName: 'Rows', type: 'number', width: width }

    ];

If you do some math, you should be able to calculate what percent of the screen each column should take up. And it should work. There may be a way of using container.innerWidth instead of the entire window but im not sure about that.

user_144763520
Related