Set Material UI react TableCell width dynamically - reactjs

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

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 3

Set width to each TableCell like this:
<TableCell style={{width: '20%'}}>Geburtsdatum</TableCell>

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>