Set Material UI react TableCell width dynamically

Question

How can I set the width of a TableCell in Material UI react? I tried this, but it doesn't work:

return(
    <Paper className={classes.root}>
        <Table className={classes.table}>
            <TableHead>
                <TableRow>
                    <TableCell style={{width: '30%'}}>Vorname</TableCell>
                    <TableCell style={{width: '20%'}}>Nachname</TableCell>
                    <TableCell style={{width: '20%'}}>Soc. Vers. Nr.</TableCell>
                    <TableCell style={{width: '20%'}}>Geburtsdatum</TableCell>
                    <TableCell style={{width: '10%'}} colSpan={2}>Aktionen</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {delegates.map((delegateItem) => {
                    return(
                        <TableRow key={delegateItem.userData.id}>
                            <TableCell style={{width: '30%'}}>{delegateItem.userData.firstName}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.lastName}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.socSecNr}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.birthDateStr}</TableCell>
                            <TableCell style={{width: '5%'}}>
                                <Link to={`/delegateperms/${delegateItem.userData.id}`}>
                                    <SettingsIcon/>
                                </Link>
                            </TableCell>
                            <TableCell style={{width: '5%'}}>
                                <Link to={`/delegatedelete/:${delegateItem.userData.id}`}>
                                    <DeleteForeverIcon/>
                            </Link>
                        </TableCell>
                        </TableRow>
                    )
                })}
            </TableBody>
        </Table>
    </Paper>
)

All columns have the same width. I would like to have the width dynamically. How can I make this?

Answer 1

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>

Answer 2

Set width to each TableCell like this:

<TableCell style={{width: '20%'}}>Geburtsdatum</TableCell>

Answer 3

There's a Github thread here where they talk about this. If you have a look at the last comment at the bottom there's a code sample of making a table where you assign widths to certain cells using a class and the rest span equally. So I assume you could assign percents to all like you want, and the comment says percentages work as well as fixed pixel amounts.

Answer 4

This works for me with "@material-ui/core": "4.8.3":

<Table style={{ width: "auto", tableLayout: "auto" }}>
<TableBody>
 <TableRow>
   <TableCell component="th" scope="row" width={150}>lorem 1</TableCell>
  <TableCell component="th" scope="row" width={100}>lorem 2</TableCell>
  <TableCell component="th" scope="row">lorem 3</TableCell>
 </TableRow>
</TableBody>
</Table>