Material-ui: [Table] Table fixed header broken when height property not specified in Table component

[danielcnorris]

I'd like to make a table with a fixed header whose height is set by CSS rather than the height property on the component.

When I leave the height property empty, though, the header is no longer fixed.

This gives a fixed header:

<Table height="225" fixedHeader={true}>

This does not:

 <Table style={{height: 225}} fixedHeader={true}>

And this does not:

 <Table className="myClass" fixedHeader={true}>

.myClass {
  height: 225px;
}

Thoughts? Thanks for your help!

[Kingdutch]

The issue of <Table style={{height: 225}}> not working is because the style set on the table gets merged with the internal styles.root and not the styles.bodyTable which is where the <Table height="255"> goes to.

The last example doesn't work because the classname is applied on the table element itself and not on the bodyTable element (as with the second example above) so the bodyTable still has no width.

The illustrating lines of code from material-ui/lib/table/tables.js are in the getStyles function:

getStyles: function getStyles() {
    var styles = {
      root: {
        backgroundColor: this.getTheme().backgroundColor,
        padding: '0 ' + this.state.muiTheme.rawTheme.spacing.desktopGutter + 'px',
        width: '100%',
        borderCollapse: 'collapse',
        borderSpacing: 0,
        tableLayout: 'fixed'
      },
      bodyTable: {
        height: this.props.fixedHeader || this.props.fixedFooter ? this.props.height : 'auto',
        overflowX: 'hidden',
        overflowY: 'auto'
      },
      tableWrapper: {
        height: this.props.fixedHeader || this.props.fixedFooter ? 'auto' : this.props.height,
        overflow: 'auto'
      }
    };

    return styles;
  },

Although not totally related to the issue, seeing as the issue title for this related case would be the same: is it possible to have a fixedHeader without a height specified (so with height: 'auto'). That would fix the problem above and move the above issue to (specifying a Table height through style or class does not work as expected).

[tintin1343]

@Kingdutch : A table with a fixed header will have a scrollable body if the content is longer than the height of the table body. When you say height: 'auto', it will always ensure that the table rows will adjust the height of the containing div as per the number of rows/ data present in the table and there will be no scroll and hence you won't get an effect of a table with a fixed header. Hence it is necessary to have a height mentioned.

@danielcnorris: I tried reproducing the issue in the docs website and this does not seem to be an issue. I commented out the height component.

The height is being picked up from the CSS.

I am closing this issue. Do let us know in comments below, if you still need any help with the issue.

[danielcnorris]

OK. Thanks for investigating!

On Tue, Apr 19, 2016 at 3:38 PM, Nitin Shetty [email protected]
wrote:

@Kingdutch https://github.com/Kingdutch : A table with a fixed header
will have a scrollable body if the content is longer than the height of the
table body. When you say height: 'auto', it will always ensure that the
table rows will adjust the height of the containing div as per the number
of rows/ data present in the table and there will be no scroll and hence
you won't get an effect of a table with a fixed header. Hence it is
necessary to have a height mentioned.

@danielcnorris https://github.com/danielcnorris: I tried reproducing
the issue in the docs website and this does not seem to be an issue. I
commented out the height component.
[image: table-scroll]
https://cloud.githubusercontent.com/assets/15271922/14652919/2d958a88-063c-11e6-8956-5b88707879ce.gif

[image: screen shot 2016-04-19 at 2 35 46 pm]
https://cloud.githubusercontent.com/assets/15271922/14652884/06b51cb2-063c-11e6-90cb-f623f5647fb7.png

The height is being picked up from the CSS.
[image: screen shot 2016-04-19 at 2 37 41 pm]
https://cloud.githubusercontent.com/assets/15271922/14652951/484fb858-063c-11e6-8f43-b45a92204554.png

I am closing this issue. Do let us know in comments below, if you still
need any help with the issue.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/callemall/material-ui/issues/2369#issuecomment-212085075

[golinmarq]

You should think about this issue and add some feature to do that

[lrettig]

In case, like me, you just want a table with a fixed header that fills the entire view, try this:

<Table
  height={window.innerHeight-59}
  fixedHeader={true}
>

59 is the height of the TableHeader, which is auto-computed based on the height of the table header row, which you could also specify. There's probably a cleaner way to do this using flexbox but I couldn't figure it out.

It would be really nice if this could be specified on the component as a simple toggle.

[antonfisher]

In my case I fixed the issue with flexible wrapperStyle:

<Table fixedHeader wrapperStyle={{display: 'flex', flexDirection: 'column'}}>
  ...
</Table>

Here is my whole solution (including fix for "jumping" scrolling): https://gist.github.com/antonfisher/d35156f83d148a2902bc60f937318e66