How to customize Material-ui Table Row and Columns (Sticky)

Question

I have a unique situation in which I need not only the header but the first row and first three columns to persist when scrolling down and/or to the right due to an overflow of columns.

Material UI Table allows for me to keep the header sticky when scrolling down without negatively affecting overflow, like in this example: https://codesandbox.io/s/209r3p0l3y

In my table the header does stick, but the first row must stick when scrolling down but not stick when scrolling left (the same behavior). This is to keep the overflow of values remaining consistent with the header labels. The first row (although not a header) will be compared to the rest of the rows of data when scrolling down and to the right. Also, this is the case for the first 3 columns. The other columns must remain matching with the header labels and first-row content, but the first 3 columns remain fixed to the left as this is done.

Is overlapping multiple Material UI tables truly the best and/or only plausible solution? I cannot think of a less hacky solution and wonder if anyone has encountered this when limited to Material UI Tables or developing unique table behavior.

Hakluyt

Did you find any apt solution, even I am facing similar kind of problem. Kindly share it? – Aeciospore

for those who found this question and wanted just first column to be sticky you need only apply styles position: sticky; left: 0; z-index: 1; background: #fff or similar – Dunford

Answer 1

You can make it without any library. All you you have to do is override it, and make it as you need.

I give you the example in this.

import React from "react";
import {
  makeStyles,
  TableContainer,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Table,
  withStyles
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3)
  },
  head: {
    backgroundColor: "#fff",
    minWidth: "50px"
  },
  tableContainer: {
    maxHeight: "400px"
  },
  cell: {
    minWidth: "100px"
  }
}));

const StickyTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    left: 0,
    position: "sticky",
    zIndex: theme.zIndex.appBar + 2
  },
  body: {
    backgroundColor: "#ddd",
    minWidth: "50px",
    left: 0,
    position: "sticky",
    zIndex: theme.zIndex.appBar + 1
  }
}))(TableCell);

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const App = () => {
  let id = 0;
  function createData(name, calories, fat, carbs, protein) {
    id += 1;
    return { id, name, calories, fat, carbs, protein };
  }

  const data = [
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Gingerbread", 356, 16.0, 49, 3.9),
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Gingerbread", 356, 16.0, 49, 3.9),
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Gingerbread", 356, 16.0, 49, 3.9),
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Gingerbread", 356, 16.0, 49, 3.9)
  ];

  const classes = useStyles();

  return (
    <div>
      Sticky Header + Column
      <TableContainer className={classes.tableContainer}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              <StickyTableCell className={classes.head}>
                <StyledTableCell className={classes.head} numeric>
                  Dessert (100g serving)
                </StyledTableCell>
                <StyledTableCell className={classes.head} numeric>
                  Calories
                </StyledTableCell>
              </StickyTableCell>
              <StyledTableCell className={classes.head} numeric>
                Calories
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Fat (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Carbs (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((n) => {
              return (
                <StyledTableRow key={n.id}>
                  <StickyTableCell>
                    <StyledTableCell
                      numeric
                      align="right"
                      className={classes.cell}
                    >
                      {n.name}
                    </StyledTableCell>
                    <StyledTableCell
                      numeric
                      align="right"
                      className={classes.cell}
                    >
                      {n.calories}
                    </StyledTableCell>
                  </StickyTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.calories}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.calories}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.calories}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                </StyledTableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
};

export default App;

this is codesandbox link: Codesanbox React + Material-UI Sticky Header and Column

Almoner

This worked. TableCell in TableCell for multiple columns – Posen

This is exactly what I was looking for, other than I needed the rightmost column to be sticky. This was easily accomplished by modifying your code in the sandbox. This is a huge time saver for me, now I don't have to figure out how to implement it myself. – Impious

Answer 2

I have been using: I have been using:

          <TableContainer sx={{ maxHeight: 600 }}>
            <Table stickyHeader>

for the Header:

              <TableHead>
                <TableRow>
                  <TableCell align="left" style={{ zIndex: 900 }}>Image</TableCell>
                  <TableCell align="left">Product</TableCell>
                  <TableCell align="left">User Name</TableCell>
                </TableRow>
              </TableHead>

For the body

              <TableBody>
                <TableRow style={{ background: 'white' }}>
                    <TableCell
                    align="left"
                    style={{
                        position: 'sticky',
                        left: 0,
                        background: 'white',
                        zIndex: 800,
                    }}>
                        Sticky
                    </TableCell>
                    <TableCell align="left">test0</TableCell>
                    <TableCell align="left"test</TableCell>
                </TableRow>
              </TableBody>

and

            </Table>
          </TableContainer>

Solenoid

Answer 3

Since as time passed, the Material-UI version upgrade from v1 to v4, and the question is still well reached. I'd like to give a solution for MUI table sticky both row and columns at this moment.

---

We can optionally use dx-react-grid-material-ui

A data grid for Material-UI with paging, sorting, filtering, grouping and editing features

• refer to the official document of Material-UI Table Complementary projects

---

We can additionally fix the columns via the plugin TableFixedColumns

A plugin that enables you to fix columns to the left and right sides of the grid.

Usage:

import { Grid as GridTable, TableFixedColumns } from '@devexpress/dx-react-grid-material-ui';

<GridTable
  rows={rows}
  columns={columns}
>
  ...
  <TableFixedColumns
    leftColumns={['colNameA', 'colNameB', 'colNameC']}
  />
</GridTable>

Frans