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?

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?

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow edited Dec 20, 2018 at 15:06 Brett 12k3535 gold badges136136 silver badges222222 bronze badges asked Nov 23, 2016 at 19:49 user2426823user2426823

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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

There is a hidden prop in the <Table> ponent 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.

according to the answer of @François Zaninotto @Lane Rettig

...

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

ponentDidMount() {
    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
    }
}