How can I add dynamic scroll shadows to an MUI table with sticky headers in React?

Below is one approach. Essentially, you wrap your table in a scrollable container that listens to the scroll event. In the handler you check the scroll position—if scrollTop is greater than 0 you add a shadow below the header; if you aren’t yet at the bottom (i.e. scrollTop + clientHeight < scrollHeight) you add a shadow along the bottom. You might conditionally render CSS classes or elements (using position: sticky) for the shadows.

Below is a working example using React hooks and MUI:

---

JSXCopied
import React, { useState, useRef, useEffect } from 'react';
import { Paper, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
import { styled } from '@mui/system';

const Container = styled('div')({
  overflow: 'auto',
  maxHeight: 400,
  position: 'relative'
});

const TopShadowDiv = styled('div')(({ show }) => ({
  position: 'sticky',
  top: 0,
  height: 10,
  pointerEvents: 'none',
  transition: 'opacity 0.2s',
  opacity: show ? 1 : 0,
  boxShadow: '0px 2px 4px rgba(0,0,0,0.2)',
  zIndex: 2
}));

const BottomShadowDiv = styled('div')(({ show }) => ({
  position: 'sticky',
  bottom: 0,
  height: 10,
  pointerEvents: 'none',
  transition: 'opacity 0.2s',
  opacity: show ? 1 : 0,
  boxShadow: '0px -2px 4px rgba(0,0,0,0.2)',
  zIndex: 2
}));

export default function StickyHeaderTable() {
  const [showTopShadow, setShowTopShadow] = useState(false);
  const [showBottomShadow, setShowBottomShadow] = useState(false);
  const scrollContainerRef = useRef(null);

  const handleScroll = (e) => {
    const { scrollTop, clientHeight, scrollHeight } = e.target;
    setShowTopShadow(scrollTop > 0);
    setShowBottomShadow(scrollTop + clientHeight < scrollHeight);
  };

  // Optional: update shadows on mount so that initial state is correct.
  useEffect(() => {
    const container = scrollContainerRef.current;
    if (container) {
      const { scrollTop, clientHeight, scrollHeight } = container;
      setShowTopShadow(scrollTop > 0);
      setShowBottomShadow(scrollTop + clientHeight < scrollHeight);
    }
  }, []);

  return (
    <Paper elevation={3}>
      <Container ref={scrollContainerRef} onScroll={handleScroll}>
        {/* The shadow divs (they stick to the top/bottom of the scrolling container) */}
        <TopShadowDiv show={showTopShadow} />
        <BottomShadowDiv show={showBottomShadow} />

        <Table stickyHeader>
          <TableHead>
            <TableRow>
              <TableCell>Header A</TableCell>
              <TableCell>Header B</TableCell>
              <TableCell>Header C</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {Array.from(Array(50).keys()).map((n) => (
              <TableRow key={n}>
                <TableCell>Row {n} - A</TableCell>
                <TableCell>Row {n} - B</TableCell>
                <TableCell>Row {n} - C</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Container>
    </Paper>
  );
}

---

Explanation

1. Container
   • The container is a div with overflow: 'auto' and a fixed maxHeight so that it scrolls.
   • The scroll event is handled on this div.

2. Shadow Divs
   • The top shadow (TopShadowDiv) is positioned sticky at the top. When show is true, its opacity is 1 so that the box-shadow is visible.
   • The bottom shadow (BottomShadowDiv) is defined similarly at the bottom.

3. Scroll Event Handling
   • On every scroll event, we inspect scrollTop, clientHeight, and scrollHeight to update the state for showing the top or bottom shadow.
   • When at the very top or bottom, one or the other shadow might be hidden, and in between both are visible.

This approach provides a smooth way to dynamically adjust the shadows based on scroll position while using Material-UI components with sticky headers.