Width is not working Material-UI Enhanced Table

[RajuTicvic]

Hi!
I using material UI theme for react-table
i tried many way to set width but not working for me
please help me fix it

{
Header: header.name,
accessor: String(I),
width:"400"
//width:'10%'
//width:400
//width:"400px"
// Cell: row => <a href="#!" onClick={()=>alert(row)}> {row.value}
}

[alvinbabujohn]

Assuming you are using the useTable() hook, I recommend using the additional layout hooks like useFlexLayout, useAbsoluteLayout, or useBlockLayout.

[alvinbabujohn]

Judging by your original question, I had assumed you meant setting the width of your columns, in which your example does work. Changing the widths at the memoized columns sets the column widths in the preview.

Did you mean the width of the entire table? In that case you should be able to style the parent container either through MUI styles, classNames, or direct style.

[alvinbabujohn]

[RajuTicvic]

No if i used use block layout or use flex layout my fixed header is not working that's why I attached the url. If i remove the useFlexLayout the width is not work and stickyheader working.
is there any connectivity?

[alvinbabujohn]

See here for workaround using styles.

[RajuTicvic]

Awesome.
Thanks @aaronschwartz

[tdavis3]

Instead of the Enhanced Table example, I'm using the other material-ui example (https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components) that auto scales the table to fullWidth. But like OP width doesn't work, as I want to put a minWidthand maxWidth on a column while the other columns still auto scale. And using one of the layout hooks do not seem to work. Help?