ENG-1191: Shadow for table when overflow

[timmyjose]

Changes:

• added a handler for scroll events for the results table.
• shadow effects applied based on scroll position.

[linear]

ENG-1191 Shadow for table when overflow

To give a shadow to the table when it goes off the edge of the page (specifically when a horizontal scrollbar appears due to overflow), you need to check for the horizontal scrollbar's position and presence dynamically and then add a shadow accordingly.

You can achieve this by:

1. Add a ref to the TableContainer to be able to access its properties.
2. Listen for the scroll event of the TableContainer to detect when the scrollbar is moved.
3. Adjust the shadow based on whether the scrollbar is at the start, end, or somewhere in between.

Here's how you can implement the shadow effect:

1. Add a ref to the TableContainer:

const tableRef = useRef(null);

And update the TableContainer:

<TableContainer ref={tableRef} overflowX="auto" overflowY="unset">

1. Set an initial state for the shadow:

const [shadow, setShadow] = useState("");

1. Create a function to update the shadow:

const handleScroll = () => {
  const { scrollLeft, scrollWidth, clientWidth } = tableRef.current;
  
  if (scrollLeft <= 0) {
    setShadow("right");
  } else if (scrollWidth - scrollLeft === clientWidth) {
    setShadow("left");
  } else {
    setShadow("both");
  }
};

1. Attach and detach the scroll event listener using React hooks:

useEffect(() => {
  const tableElement = tableRef.current;
  tableElement.addEventListener("scroll", handleScroll);
  return () => {
    tableElement.removeEventListener("scroll", handleScroll);
  };
}, []);

1. Apply shadows based on the state:

To give the shadow effect, we can conditionally apply styles to the Box that wraps your TableContainer.

<Box 
  border='1px solid' 
  borderBottomWidth={0} 
  borderColor='bw.100' 
  borderRadius={5}
  boxShadow={
    shadow === "right" ? "5px 0px 15px rgba(0,0,0,0.2)" :
    shadow === "left" ? "-5px 0px 15px rgba(0,0,0,0.2)" :
    shadow === "both" ? "5px 0px 15px rgba(0,0,0,0.2), -5px 0px 15px rgba(0,0,0,0.2)" : "none"
  }
>

Remember to import necessary hooks and elements at the top:

import { useRef, useState, useEffect } from 'react';

Now, when the table overflows off the edge of the page and the scrollbar appears, you should see a shadow based on the position of the scrollbar.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zk-benchmarks	✅ Ready (Inspect)	Visit Preview	Sep 29, 2023 11:25am