Set Component Header Sticky @mui/material/Table

Question

I have Material Table component to render data, i try to make the render rows component to be sticky but it dont works at all,i try to set spanning rows on the header to be sticky so when i scroll the header will stick and not scroll, here is what i try:

**import * as React from "react";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import { MONTHS, COLUMNS, MAIN_COLUMN } from "./constant";
import DUMMY from "./dummy";

export default function ColumnGroupingTable() {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <Paper sx={{ width: "100%" }}>
      <TableContainer sx={{ maxHeight: 440 }}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {MAIN_COLUMN.map((col) => (
                <TableCell
                  align="center"
                  rowSpan={col.heading === "Price" ? 1 : 2}
                  colSpan={col.heading === "Price" ? 12 : 1}
                >
                  {col.heading}
                </TableCell>
              ))}
            </TableRow>
            <TableRow stickyHeader aria-label="sticky table">
              {MONTHS.map((el) => (
                <TableCell
                  stickyHeader
                  aria-label="sticky table"
                  align="center"
                >
                  {el.heading}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {DUMMY.map((row) => (
              <TableRow>
                {COLUMNS.map((col) => (
                  <TableCell align="center">{row[col.dataKey]}</TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={10}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </Paper>
  );
}

can someone tellme where did i do wrong here actually, here is my code at sand box..... https://codesandbox.io/s/delicate-wood-nix50t?file=/demo.js:0-2379

here is the non sticky header:

I can see the table header is sticky in codesandbox, what's the error exactly? — dreambold
– dreambold, Commented Jan 2, 2023 at 3:42

John Li · Accepted Answer · 2023-01-02 04:50:54Z

2

Accord to the example from MUI document, if the goal is to make the full 2 row header sticky, perhaps try add a top value to the second row in header, so that it offset some space for the first row to stay visible.

Example: (forked live on: codesandbox)

<TableRow aria-label="sticky table">
  {MONTHS.map((el) => (
    <TableCell sx={{ top: 57 }} aria-label="sticky table" align="center">
      {el.heading}
    </TableCell>
  ))}
</TableRow>

The stickyHeader property should only be needed once on Table, by the way.

answered Jan 2, 2023 at 4:50

John Li

7,4973 gold badges7 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set Component Header Sticky @mui/material/Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related