Material-ui: table header/row alignment

[luisrudge]

I have just two columns and the header is completely misaligned with the rows:

[luisrudge]

Hey! Any news on this one?

[stephenjelfs]

You could try switching to fixed column widths (in both the table header and the body) to solve this issue.

[jeffshaver]

:+1:

This seems to be happening for me only when I use a fixed header and seems to be caused by the scrollbar shrinking only the body and not the header.

[tintin1343]

This is not an issue anymore.

If you still face this issue, try referring to the docs example and follow that structure. It should work.

I am closing this issue for now, if you feel its not been addressed completely feel free to comment below.

[abased]

same as @jeffshaver, adding fixedheader causes the column headers to shift according to the scroll bar of the table body,

[sesm]

The issue is clearly visible for version 16.6 on http://www.material-ui.com/#/components/table in "Complex example" section.

[uzairrahim]

Any solutions?

[sesm]

@uzairrahim this can be fixed with direct DOM manipulation, but since Table accepts only TableHeader and TableBody as children, it's tricky. Something like this:

class MyTable extends React.Component {
    adjustHeader() {
        let {header, body} = this.refs;
        if(body && header.clientWidth != body.clientWidth) {
            header.style.width = body.clientWidth + 'px';
        }
    },

    componentDidUpdate() {
        this.adjustHeader();
    },

    componentDidMount: function() {
        window.addEventListener('resize', this.adjustHeader);
        this.adjustHeader();
    },

    componentWillUnmount: function() {
        window.removeEventListener('resize', this.adjustHeader);
    },

    render: function() {
        return (
              <div>
                <div ref='header'>
                    <Table>
                        <TableHeader>
                            {/* actual header goes here */}
                        </TableHeader> 
                        <TableBody>{/* empty */}</TableBody>
                    </Table>
                </div>
                <div ref='body'>
                    <Table>
                        <TableHeader>{/* empty */}</TableHeader> 
                        <TableBody>
                            {/* actual body goes here */}
                        </TableBody>
                    </Table>
                    {list}
                </div>
            </div>      
        )
    }   
}

[uzair-rahim]

I came up with another solution, but this looks like a better approach, let me give it a try.
Thanks @sesm

[jspengeman]

@tintin1343 Where is this fixed?

Just the same way contributors and authors of issues should provide a reproducible example or a functioning demo to show that something is not working expected if you want to close an issue as it is fixed then a reproducible example or a functioning demo should be presented not a screen shot that could be from any version of this code base.

Further, readers are told to see the docs.. what docs? The latest 0.X docs or the beta @next docs?

For what it is worth, I did see the docs upon reading the comments and looked at @sesm's comment and saw that the issue was still in fact present in the demo on the docs page. Seems like the issue is not fixed, at least in the latest non beta release.

[pmosconi]

I was able to align header and content column widths using CSS grid:

<Table style={{display: 'grid', gridTemplateColumns: 'repeat(autofit, minmax(100px, 1fr))'}} >

[richierob62]

I solved this by having 2 table elements. The first is wrapped in a div that constrains its width to 98% and itself only has a TableHeader. The second only has the TableBody

<div style={{ width: '98%' }}>
<Table>
<TableHeader />
</Table>
</div>
<Table height={'450px'}>
<TableBody />
</Table>

[svmszcck]

I have solved this by aligning the texts to left... Just add style={{textAlign: 'left'}} to the columns you want... You should do this for both TableHead and TableBody

<TableHead>
   <TableRow>
      <TableCell >Title</TableCell>
      <TableCell style={{textAlign: 'left'}} numeric>Category</TableCell>
      <TableCell style={{textAlign: 'left'}} numeric>Views</TableCell>
      <TableCell numeric>Edit Post</TableCell>
   </TableRow>
</TableHead>