ReactJS + Material-UI: How to reduce column width of Material-UI's <TableRow/>?
Solution 1
You can set the style of the TableHeaderColumn and its corresponding TableRowColumns. Below I set width to 12 pixels (and background color to yellow just to further demo custom styling)
working jsFiddle: https://jsfiddle.net/0zh1yfqt/1/
const {
Table,
TableHeader,
TableHeaderColumn,
TableBody,
TableRow,
TableRowColumn,
MuiThemeProvider,
getMuiTheme,
} = MaterialUI;
class Example extends React.Component {
render() {
const customColumnStyle = { width: 12, backgroundColor: 'yellow' };
return (
<div>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>A</TableHeaderColumn>
<TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
<TableHeaderColumn>C</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn style={customColumnStyle}>2</TableRowColumn>
<TableRowColumn>3</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn style={customColumnStyle}>5</TableRowColumn>
<TableRowColumn>6</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>7</TableRowColumn>
<TableRowColumn style={customColumnStyle}>8</TableRowColumn>
<TableRowColumn>9</TableRowColumn>
</TableRow>
</TableBody>
</Table>
</div>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
Solution 2
There is a hidden prop in the <Table>
component that makes it behave like a HTML <table>
element, i.e. adapt the column widths to the content:
<Table style={{ tableLayout: 'auto' }} fixedHeader={false} ...>
...
</Table>
It doesn't let you style columns one by one, but at least it's less ugly than large columns for small contents by default.
Related videos on Youtube
Comments
-
Brett almost 2 years
I'm currently using ReactJS + Material-UI, and with the Material-UI's
<Table>
, the columns width are automatically set depending on content. Currently it seems to enforce equal width on all columns, but I want some columns to take up more width than others.So is there a way to arbitrarily assign width of
<TableRow>
's column and still be dynamic based on content instead? -
Admin over 7 yearsbut that is hardcoded width, correct? I was looking for one that dynamically would change based on the content but still have wider width than other columns.
-
Jeff McCloud over 7 yearsYou can additionally use whiteSpace: 'nowrap', and/or minWidth/maxWidth
-
Admin over 7 yearscould you show the full code along with the whiteSpace?
-
Jeff McCloud over 7 yearsIs your content one line of text, or can it wrap?
-
Admin over 7 yearsCould you show both cases? Because, when the window is minimized, the content actually gets wrapped.
-
Jeff McCloud over 7 yearsIf you don't want wrapping, you can just do: const customColumnStyle = { width: 12, backgroundColor: 'yellow', whiteSpace: 'nowrap' }; If you actually want it to wrap, but only if it gets rather large, then instead add "maxWidth: 400" or whatever width in pixels you want to limit the width to.
-
Lane Rettig almost 7 yearsThis is great, but beware that it also causes the table to overflow the edge of the screen and become invisible if it becomes too wide/the window becomes too narrow. More interesting commentary in this thread.
-
opticyclic almost 5 yearsThis has nothing to do with column width