Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends?
Outlined below is my current table setup:
<Table className={classes.table} size="small">
<TableHead>
<TableRow>
<TableCell width="???">CA</TableCell> <--- The width should be determined by "Fit to data" + X pixels margin
<TableCell width="140px">CB</TableCell>
<TableCell width="240px">CC</TableCell>
<TableCell width="200px">CD</TableCell>
<TableCell>CE</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.ca}</TableCell>
<TableCell>{row.cb}</TableCell>
<TableCell>{row.cc}</TableCell>
<TableCell>{row.cd}</TableCell>
<TableCell>{row.ce}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
I aim for column CA to have a minimal width, enough to accommodate the data plus additional space around it, preventing any content from touching the column borders.
In trying to achieve this, I've experimented with:
- Omitting the declaration of
widthaltogether - yielded no results - Setting
width="auto"- also proved unsuccessful