[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

[kamek-pf]

Nothing quite special about this :

<TableCell style={{ width: '2rem' }}>

[zikangyao]

Is there any way to dynamically assign the width of col based on content ?

[theseancronin]

What I've been doing to set the widths of columns is for the

style, set table-layout to auto, as mentioned above, then I give widths in percentages to my columns. i.e. width 30% and width 70%. This would be a two-column layout example, with table header columns in first first column rather than in the header..

[kuzdogan]

This is good to go in v1 or above

const styles = { 
  narrowCell: {
    'width': '150px',
  }
};

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Company Name</TableCell>
      <TableCell style={classes.narrowCell} numeric>Amount</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
  <TableRow>
    <TableCell> name 1 </TableCell>
    <TableCell style={classes.narrowCell}> $100 </TableCell>
  </TableRow>
  </TableBody>
</Table>

Can also give percentage widths, rest of the cells span equally

[abhisheksoni27]

None of the solutions posted above work. Why is this so difficult to achieve?

[emersonbottero]

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

the second collumn is flex

[devenovil]

None of the solutions posted above work. Why is this so difficult to achieve?

Somehow i recognize why it's not work, because we only set width only forTableHead or TableBody! To make it work, we should define minWidth and maxWidth bot on TableCell in TableHead and TableBody, here the example

<Table>
	<TableHead>
		<TableRow>
			<TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
			<TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
		</TableRow>
	</TableHead>
	<TableBody>
	        <TableRow>
			<TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
			<TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
	        </TableRow>
	</TableBody>
</Table>

As you can see, we can use both value for style by integer and string. But for string, it's only work if you defined it by px, if you use percentage, like minWidth:'25%', it's not gonna work, i already try it.

Why do i use both of minWidth and maxWidth? Not width? Because I already try it, if you want to make your column with fixed width, you must use minWidth and maxWidth instead of width. I didn't know why, but width seems not work to solve this problem.

Note : Both of TableCell in TableHead and TableBody that contain same data, must have same style!

I hope this code help you guys, cheers

[crizant]

@devenovil Instead of maxWidth, if you want to use %, you can use width like:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>

[benjaminaaron]

For me it worked to set the width only for the cells in the header: <TableCell width={props.colWidths[index] + '%'}>, this results in the columns for the entire table behaving as expected.

[smcalilly]

I set the column widths with the percentage and it sort of works, but for some reason, it adds a phantom column on the far right. Via inspecting the element, it appears to add a "TableStubCell" element to the table. I have no idea where that came from.

I've had similar issues with other MUI tables, and my work-arounds are never that great. Would be cool if y'all opened up this issue and fixed it...clearly other folks are struggling with it too.

edit: the TableStubCell came from the dx-react-grid-material-ui npm package, so sorry for pointing fingers!

[aprilmintacpineda]

My solution is to do

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

But would be nice if we could just do

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

[nazrulcsebd]

This works for me with the version "@material-ui/core": "4.9.0"

    <TableContainer className={classes.container}>
              <Table className={classes.table} stickyHeader size="small">
                <TableHead>
                  <TableRow>
                    <TableCell width="30%">User Name</TableCell>
                    <TableCell width="20%">Designation</TableCell>
                    <TableCell width="10%">Nid</TableCell>
                    <TableCell width="20%">Email</TableCell>
                    <TableCell width="10%">Mobile</TableCell>
                    <TableCell width="10%">Gender</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {props.isGridLoading && (
                    <TableRow>
                      <TableCell colSpan={6}>
                        <LoadingGridSpinner open={props.isGridLoading} />
                      </TableCell>
                    </TableRow>
                  )}
    
                  {props.profileObj.lists &&
                    props.profileObj.lists.map(row => (
                      <TableRow key={row.userProfileId} hover={true}>
                        <TableCell width="30%">
                          {row.userName}
                        </TableCell>
                        <TableCell width="20%">{row.designation}</TableCell>
                        <TableCell width="10%">{row.nid}</TableCell>
                        <TableCell width="20%">{row.email}</TableCell>
                        <TableCell width="10%">{row.mobile}</TableCell>
                        <TableCell width="10%">{row.gender}</TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>

[Aditya94A]

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?

[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

[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.