How to apply css on table header of Material ui Table stickyHeader?

Question

I am using Material UI table with stickyHeader prop as i want my table header to be fixed. But then other css is not applying on the header part.

const useStyles = makeStyles((theme) => ({
    tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
  },
}))


const CustomTable = () => {
return(
<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>
)
}

When I am removing "stickyHeader" props. I am getting blue border at the bottom of header but not in case of stickyHeader.

Kraw24 · Accepted Answer · 2021-12-01 15:12:17Z

Updated answer for MUI 5 as I had the same issue - anytime I would set the stickyHeader prop for my <Table> my styling would go away.

I targeted the MuiTableCell-root class in my TableHead component and it was just fine.

Example with styled-components:

export const StyledTableHead = styled(TableHead)`
  & .MuiTableCell-root {
    background-color: red;
  }
`;

It appears that in the stickyHeader prop will not function as intended without first setting a maxHeight for the <Table> in the <TableContainer>.

Example with styled-components:

export const StyledTableContainer = styled(TableContainer)`
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  max-height: 500px;
`;

This could then be used like so:

<StyledTableContainer>
  <Table stickyHeader>
    <StyledTableHead>
      <TableRow>
        [your table header cells here]
      </TableRow>
    </StyledTableHead>
  </Table>
</StyledTableContainer>

Rajiv · Accepted Answer · 2021-02-03 17:43:02Z

1

by adding the props stickyHeader a class gets added which sets the border-collapse:separate. this needs to be removed for the header border to be visible.
Target the stickyHeader Mui class from Table.

<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader classes={{stickyHeader:classes.stickyHeader}} aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>

const useStyles = makeStyles((theme) => ({
    tableHead: {
        borderBottomStyle: "solid",
        borderBottomColor: "blue"
    },
    stickyHeader:{
        borderCollapse:'collapse'
    }
}));

Update

To make the border to be fixed, there's a workaround is that just add a borderBottom in the TableCell of the TableHead.

<Table stickyHeader aria-label="simple table">
    <TableHead>
        <TableRow>
            <TableCell
                style={{
                    borderBottom: "5px solid blue"
                }}
            >
                Hii
            </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {//Tablebody items}
    </TableBody>
</Table>

Working demo:

edited Feb 3, 2021 at 17:43

answered Feb 3, 2021 at 17:06

Rajiv

3,8622 gold badges19 silver badges33 bronze badges

5 Comments

Ankit Jaishwal Over a year ago

Yes, Now i can see the blue border but the border is also getting scrolled.

Ankit Jaishwal Over a year ago

How to stick that blue border with the header?

Ankit Jaishwal Over a year ago

Nope! The border is still scrolling

Rajiv Over a year ago

have you checked the codesandbox demo??? In this case, there's no need to add any style for border-collapse or anything..

Ankit Jaishwal Over a year ago

Oh! I didn't notice that! Yes, i just saw it. It is working perfectly in CodeSandBox. I'll check it in my code tomorrow. Thank You so much for your help. I'm marking this as Answer as of now! Will let u know if i face and difficulty once i check it in my code.

Collectives™ on Stack Overflow

How to apply css on table header of Material ui Table stickyHeader?

2 Answers 2

Comments

Update

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related