Creating a Sticky Table Header with Dynamic Height in React using Material-UI

Question

Creating a Sticky Table Header with Dynamic Height in React using Material-UI

I am currently utilizing the Material-UI library in React to present a table on my webpage. My goal is to have a sticky header on the table without specifying a fixed height, allowing it to scroll along with the page. However, the code snippet provided does not achieve this functionality unless a height is set on the TableContainer element.

Link to example

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>
  );
}

javascript css reactjs material-ui

Answer 1

Answer №1

To make it work, simply remove the TableContainer with overflow-x: auto

const applyStyles = makeStyles({
  personalizedTableContainer: {
    overflowX: "initial"
  }
})

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

https://codesandbox.io/s/cool-shadow-59lrh?file=/src/App.js

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

Answer 2

To make it work, simply remove the TableContainer with overflow-x: auto

const applyStyles = makeStyles({
  personalizedTableContainer: {
    overflowX: "initial"
  }
})

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

https://codesandbox.io/s/cool-shadow-59lrh?file=/src/App.js

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

Answer 3

Answer №2

Recently, I encountered a similar issue where I needed my table to occupy 100% of the available height. Instead of applying the 100% height directly to the table, I decided to set it on the parent tag. To achieve this, I calculated the parent's height by referencing my table's container. Here is an example implementation:

// 1. Create a reference
const tableContainerRef = useRef(null);

// 2. Calculate and retrieve the parent's height once the ref is populated
const containerMaxHeight = useMemo(() => {
  if (!tableFormRef.current) return null;

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

// 3. Set the parent's height as the maxHeight for your table
return (
  <div ref={tableContainerRef}>
    <TableContainer style={{maxHeight: containerMaxHeight}}>
      <Table>
       ...
      </Table>
    </TableContainer>
  </div>
);

Answer 4

Recently, I encountered a similar issue where I needed my table to occupy 100% of the available height. Instead of applying the 100% height directly to the table, I decided to set it on the parent tag. To achieve this, I calculated the parent's height by referencing my table's container. Here is an example implementation:

// 1. Create a reference
const tableContainerRef = useRef(null);

// 2. Calculate and retrieve the parent's height once the ref is populated
const containerMaxHeight = useMemo(() => {
  if (!tableFormRef.current) return null;

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

// 3. Set the parent's height as the maxHeight for your table
return (
  <div ref={tableContainerRef}>
    <TableContainer style={{maxHeight: containerMaxHeight}}>
      <Table>
       ...
      </Table>
    </TableContainer>
  </div>
);

Answer 5

Answer №3

It seems that simply replacing 100% with 100vh solves the issue:

export default function MainPage() {
  return (
    <Container style={{ height: "100vh" }}>
      <Content stickyHeader>

Answer 6

It seems that simply replacing 100% with 100vh solves the issue:

export default function MainPage() {
  return (
    <Container style={{ height: "100vh" }}>
      <Content stickyHeader>

Creating a Sticky Table Header with Dynamic Height in React using Material-UI

Answer №1

Answer №2

Answer №3

Similar questions

Selecting the initial and final elements in a list without utilizing pseudo-classes

What is causing the network tab requests not to appear in the browser when I am utilizing NextJS SSR?

Limit Javascript Regex to accept only one specific possibility and exclude all others

Utilizing a CSS file within a YAML configuration in R Quarto

Achieving a seamless scrolling effect using CSS

Leveraging a vacant CSS class to locate specific HTML elements

Error: Gulp task needs to have a function assigned to it at Gulp.set

Expressjs route encountering issue with imported database function failing to return a value

Unable to manipulate mesh rotation using React Three Fiber

When the parent element has a fixed position, the child element will no longer maintain its floating property

A guide on immediately invoking a method when a class is initialized in JavaScript

Error: Identical div IDs detected

Issue with Jquery code on Mac OS Chrome - it's functional on Windows 10 Chrome though!

Navigating with React Router v4 using NavLink to highlight the active route

Steps for including a path to a base64 encoded image

Is there a substitute for bootstrap select in Rails?

Ways to trigger the React component to refresh when it receives an update via a web socket

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Exploring Nested Views in a MEAN Application using UI Router

When using console.log in Node.js, an empty object may be displayed as the