Material-ui: TableHeaderColumn width

Created on 20 Feb 2016  路  3Comments  路  Source: mui-org/material-ui

Hi guys.
I'm trying to set custom widths to table columns with no success.
Doing this:

                    <TableRowColumn width={70}>

works, but doing the same on TableHeaderColumn has no effect.
I've also tried:

              <TableHeaderColumn style={{width: 70}}>

Same result. The table header column remains the same size.
Any suggestions?

Thanks in advance!

question

Most helpful comment

@Aweary - It's working by accident rather than by design. Non-MUI props are spread to the <td> / <th> elements respectively, and width is a pre-HTML5 attribute that might still work, but shouldn't be used.

Instead use style={{width: '50px'}} or style={{width: '50%'}}.

@reflog - a friendly reminder to please use the relevant channels for questions, and to keep issues for confirmed bugs, regressions etc.

All 3 comments

According to the API neither <TableRowColumn> nor <TableHeaderColumn/> take a width prop, so I'm curious how it's working with <TableRowColumn>

@Aweary - It's working by accident rather than by design. Non-MUI props are spread to the <td> / <th> elements respectively, and width is a pre-HTML5 attribute that might still work, but shouldn't be used.

Instead use style={{width: '50px'}} or style={{width: '50%'}}.

@reflog - a friendly reminder to please use the relevant channels for questions, and to keep issues for confirmed bugs, regressions etc.

better use className="" and define that className in css file.. that way you can manipulate the width

Was this page helpful?
0 / 5 - 0 ratings