CODEWITHSUNDEEP
cssreactjsmaterial-uimaterial-design
Kirk
Kirk

Reputation: 5077

React Material UI Column width property does not expand

So I am experimenting with React Material UI Tables. I am trying to set auto with property for the columns but it does not expand as expected. Here I wanted the columns to be fully extended and not wrapped.

I tried to add property in the <Table size="small" style={{ width: auto}}> but it does not respond. Also, I am afraid it would be a bad practice if I set value by pixel value here?

Is there a better way to set individual columns by percentage or some other flexible types? or table as a whole?

enter image description here

Upvotes: 0

Views: 894

Answers (1)

Majid M.
Majid M.

Reputation: 4954

Just set white-space: "nowrap" for th. Here's the changes based on your code:

const StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    root: {
      whiteSpace: "nowrap"
    },
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white
    },
    body: {
      fontSize: 14
    }
  })
)(TableCell);

Edit Material demo (forked)

Upvotes: 1

Related Questions