[Table] Set table column width

[celiao]

Is it possible to set the width of Table columns?

StackOverflow equivalent question: https://stackoverflow.com/questions/51216285/material-ui-v1-set-table-column-widths

[aprilmintacpineda]

@oliviertassinari I did not convert the existing code to native <table> element.

This example works by setting width of all columns https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js

[fsarter]

I solved the problem by wrapping TableCell content with Box component and set the Box's style, like this:

...
const useStyles = makeStyles((theme: Theme) => createStyles({
  ...
  longTextStyle: {
    wordWrap: 'break-word',
    maxWidth: 1000,
  },
  ...
}));
...
<TableCell>
  <Box className={classes.longTextStyle}>
    {longText}
  </Box>
</TableCell>
...

[RossHathaway]

Does anyone know a way to let the table scroll in x direction if there are too many columns? I'm only able to make this happen by giving minWidth=something hardcoded (which is not great for unknown number of columns)

It seems like fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} are ignored in the latest version.

Any ideas?

You can try wrapping the whole table in a container element with max-width set and overflow: auto.

[omidazm94]

@oliviertassinari I did not convert the existing code to native <table> element.

This example works by setting width of all columns https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js

thanks this works for material v5 too.