Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Material-Ui Sticky Table Header with Dynamic Height

I am using the Material-UI framework for React to display a table. I would like to use a sticky header; however, I do not want to set a height on my table, as I'd like it to scroll with the page. The following snippet does not stick the header unless I set a height on the TableContainer.

https://codesandbox.io/s/winter-firefly-5wlx2?file=/src/App.js

import React from "react";
import {
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableCell
} from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <TableContainer>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell>Value</TableCell>
          </TableRow>
        </TableHead>
        {
          Array(100).fill("Test").map((e) => <TableRow><TableCell>{e}</TableCell></TableRow>)
        }
      </Table>
    </TableContainer>
  );
}
like image 737
Dynamic Avatar asked Oct 02 '20 00:10

Dynamic


People also ask

How to group column headers in react-virtualized with the table component?

You can group column headers by rendering multiple table rows inside a table head: An example of a table with expandable rows, revealing more information. It utilizes the Collapse component. A simple example with spanning rows & columns. In the following example, we demonstrate how to use react-virtualized with the Table component.

What are the default values for headerz and wrapperref in react?

headerZ: int - default: 2 (sticky corners are the greater of their two sides + 1) wrapperRef: default: undefined, value: React ref - a reference you can use for the wrapper element that has scroll events on it

How do you apply a sticky header in HTML?

The sticky header (or fixed header) is applied using the stickyHeader prop, but what’s really happening is position: sticky is being applied to each th element in the TableHeader. MUI Link and MUI Button be children of a TableCell and rendered in each row.

Is there a material-UI table pagination library for react?

Class-based overriding and Styled Components can often provide the solution you need for Material-UI customization. Another option is exploring Material Table for React, an enhanced Material-UI Table library. Here’s everything you need to know about Material-UI Table Pagination.


2 Answers

Get rid of the TableContainer overflow-x: auto and it should work

const useStyles = makeStyles({
  customTableContainer: {
    overflowX: "initial"
  }
})

export default function App() {
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.customTableContainer}}>
      <Table stickyHeader>
      
      ...

Edit cool-shadow-59lrh

Reference: https://css-tricks.com/dealing-with-overflow-and-position-sticky/

like image 145
95faf8e76605e973 Avatar answered Oct 17 '22 20:10

95faf8e76605e973


Actually I was facing something similar, I wanted my table to be 100% of the available height, so I gave 100% height to the parent tag instead of the table, then in my table a made the calc of the parents height with my table's container reference, the implementation would be something like this

// 1. create a ref
const tableContainerRef = useRef(null);

// 2. wait until the container ref is populated and retrieve the parents height
const containerMaxHeight = useMemo(() => {
  if (!tableFormRef.current) return null;

  return tableFormRef.current.parentElement.clientHeight;
}, [tableFormRef.current]);

// 3. use the height of the parent as your table's maxHeight
return (
  <div ref={tableContainerRef}>
    <TableContainer style={{maxHeight: containerMaxHeight}}>
      <Table>
       ...
      </Table>
    </TableContainer>
  </div>
);
like image 1
Juan Francisco Vazquez Torres Avatar answered Oct 17 '22 21:10

Juan Francisco Vazquez Torres