Material-ui: Reducing the height of material ui table header

[apurvgandhwani]

Is there any way to reduce or give custom height to material ui table's header. I tried doing this but nothing happened

<TableHeader
                    className='table-header'
                    style={{fontFamily: 'montserratregular', height:'30px'}}    //tried setting height
                    adjustForCheckbox={true}>
                    <TableRow className='table-header-row'>
                        <TableHeaderColumn  className='th-filename'> Filename </TableHeaderColumn>
                        <TableHeaderColumn> Channel </TableHeaderColumn>

[slavab89]

It might be that something inside the header (one of the columns etc) have a height greater than 30px. By default i think they are set with a height of 48px.
I believe that if you change TableHeaderColumn style to set its height to 30px then it will work

[apurvgandhwani]

Still not working

<TableHeader
                    className='table-header'
                    style={{fontFamily: 'montserratregular'}}
                    adjustForCheckbox={true}>
                    <TableRow className='table-header-row' style={{height:'30'}}>
                        <TableHeaderColumn style={{height:'30'}}  className='th-filename'> Filename </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> Channel </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> File Type </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> Uploaded </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> TX Date </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> Process </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> Assigned </TableHeaderColumn>
                        <TableHeaderColumn style={{height:'30'}}> Status </TableHeaderColumn>
                    </TableRow>
                </TableHeader>

[DrNightmare]

This is not only true for the TableHeader, but also for any row in the table. I am unable to change the height of the rows, whether I specify the height in TableRow or TableRowColumn or both.

[ralexand56]

I have the same issue. Seems to be an issue with not being able to set the height of the checkbox column. Any way to access to the properties of that column.

[redpmorg]

Change TableRow and if exists the Checkbox styles to style = {{height: '30px'}} or if using withStyle just create a class-name object with height: '30px' and assign it to TableRow and Checkbox

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[pebanfield]

I tried the update library solution, but I need the row selection functionality. The beta does not yet include a Toggle. Nor is there any documentation yet. I understand this takes time.

My workaround is to add a class to the parent thead or TableHeader. Then you can add a selector for th like so -

.custom-table-header {
  background-color: #f2f2f2;
  height: 42px;
  th {
    height: 42px !important;
  }
}

This works for me. But yes from the developer experience perspective it is a good decision to move away from inline styles. Aside from the difficulty of styling the component I really like the Table API design. Thank you.

Peter

[w4-geonhokim]

I'm using mui in version 1.0.0-beta.18. But still have similar issue. There're only plain texts in table row like text"
And I tried to adjust height of rows but I could expand them but couldn't reduce under 56px.

[oliviertassinari]

@w4-geonhokim TableRow has a hardcoded height. You need to override it.

[maxim-xu]

@oliviertassinari Hi Oliver, could you elaborate on how to override it? I tried overriding with inline style or theme class style overriding but it didn't change the computed style.

[oliviertassinari]

@maxim-xu Do you have a live example of what's not working so I can have a look?

[maxim-xu]

@oliviertassinari Hi Oliver, thank you for your quick reply.
In this codesandbox demo, could you take a look on how to reduce the height of table rows to under 48px? Much appreciated...

[bexoss]

This issue is not solved yet, The default row height is too big, How can we reduce it?

[WAGuerra]

You should create a theme with createMuiTheme and override MuiTableRow (see Customization > Overrides ).
Example:

import {MuiThemeProvider,createMuiTheme} from '@material-ui/core/styles'
const theme = createMuiTheme({
    overrides:{
        MuiTableRow: {
            root: { //for the body
                height: "100%"
            }
            head: { //for the head
                height: "100%"
            }
        }
    }
})

Then:

<MuiThemeProvider theme={theme}>
      <YourApp/>
</MuiThemeProvider>

See Themes for further details.

Don't forget to reduce cell padding (Ex: <Table padding={"none"}>)

Hope this help.