I am utilizing a Material UI Table.
This is how I construct it:
tableValues.map((curRow, row) => {
tableRows.push(
<TableRow key={this.state.key + "_row_" + row}>
{curRow.map((cellContent, col) => {
let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}
return (
<TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
{col===0 && this.props.rowHeaders ?
<div className={classes.header}>{cellContent}</div> :
<Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
</TableCell>
)})}
</TableRow>
);
return null;
});
return (
<Table key={this.props.key + "_table"} className={classes.table}>
<TableHead>
<TableRow>
{this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{tableRows}
</TableBody>
</Table>
);
The Question essentially functions as an enhanced [TextField]2, implemented like so:
<div>
<TextField
value={this.state.value}
onChange={this.handleTextChange(this.props.key)}
key={this.props.key}
id={this.props.id}
label={this.props.label}
placeholder={realPlaceholder}
className={classes.textField}
fullWidth
xmlvalue={this.props.XMLValue}
/>
</div>
... and then enclosed in a Paper.
The styling details are:
tableCell: {
padding: 5,
},
textField: {
padding: 0,
margin: 0,
backgroundColor: "#191",
}
While this setup provides the desired content in each cell, the Question component appears to have excessive width and some unremovable padding.
The table spans full-width until a certain point, after which there is noticeable spacing at this juncture:
https://i.stack.imgur.com/TrY6I.png
Upon shrinking the window below that threshold, the table doesn't contract further, behaving as though its elements possess a minimum width attribute.
To investigate, changing the Question element to just display "Hi" results in this appearance:
https://i.stack.imgur.com/rnx3K.png
(improved compression, albeit excess top, bottom, and right padding)
Hence, the impediment may lie within my Question component. Notably, other Questions exhibit similar issues — suggesting a default minimal width unless embedded within a container like a Material UI Grid. When housed within a `Grid and subjected to window shrinkage, they scale appropriately:
https://i.stack.imgur.com/C5DXW.png
Why does the Table/TableCell fail to shrink textFields akin to the behavior of the Grid? (or rather, how do I eliminate the apparent minWidth on my textFields?) Is there an implicit minimum width for Material UI TextFields?
Attempts to establish column widths achieved success for expansive tables yet failed to address the presumed minimum width issue.
Even switching the Question to
<input type="text" name="fname" />Question to mere "hi," the quirk vanished, but resurfaced with input insertion.