ReactJS + Material-UI: how to reduce column width Material-UI <TableRow / ">?

Question

I am currently using ReactJS + Material-UI, and with Material-UI <Table> the column width is automatically set depending on the content. Currently, it seems that all columns are the same width, but I want some columns to be wider than others.

So is there a way to arbitrarily set the width of the <TableRow> and still be dynamic based on the content?

Answer 1

You can set the TableHeaderColumn style and the corresponding TableRowColumns. Below I set the width to 12 pixels (and the background color is yellow to add another demo style)

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') ); 

Answer 2

The <Table> component has a hidden footing that makes it behave like an HTML <Table> element, i.e. adapt column width to content:

 <Table style={{ tableLayout: 'auto' }} fixedHeader={false} ...> ... </Table> 

It does not allow you to create columns one at a time, but at least it is less ugly than large columns for small content by default.

Answer 3

according to @ François Zaninotto @Lane Rettig's answer

...

and adding with this, you can get a scroll table with infinite columns ...

 componentDidMount() { let tbody = $(this.refs.table) if (tbody && tbody.length == 1) { let div = tbody[0].refs.tableDiv div.style.overflowX = 'auto' div.parentElement.style.overflowX = 'hidden' } else { // error handling } }