Search code examples
reactjshtml-tablematerial-ui

ReactJS and MaterialUI: equal width for all columns of a Table

Using ReactJS and MaterialUI I'm trying to have the same width for all columns of a Table. I expected to have this as a default behavior when I'm not setting any width, but it's not the case: the last column is always smaller.

I've made a small example on codesandbox: https://codesandbox.io/s/18l6nn393q

Actually I could set the width of all columns to 33% and it would work for this specific case, but it gets complicated if the number of columns is variable. What is the standard way to have columns of equal width using ReactJS and the Table of MaterialUI?

Solution

  • I make column have width: 'calc(100%/3)' so it will have 3 equal width column I made a CustomTableCell to contain common style width: 'calc(100%/3)'

    const CustomTableCell = withStyles(theme => ({
  root: { 
    width: 'calc(100%/3)'
  }
}))(TableCell);

    Sandbox: https://codesandbox.io/s/6l1ypx6v3r (have issue on FireFox)

    Result like this enter image description here

    Edit: after @fitz feedback my solution not work on FireFox. I made some change so it can better support with Firefox also

    with this CustomTableCell

    const CustomTableCell = withStyles(theme => ({
  root: {
    width: "calc(100vw/3)",
    padding: "10px 24px",
    display: "table-cell"
  }
}))(TableCell);

    Sandbox (fix issue with FireFox): https://codesandbox.io/s/xolxro983p