Changed the table header to sticky headers.

src/components/Table.js

@@ -243,6 +243,43 @@ function Table({
  useKeyPressEvent('?', () => {
  setIsInfoVisible(!isInfoVisible);
  });
+
+ useEffect(() =>{
+ let table = document.querySelector('.table-container>.table');
+ let headers = document.querySelectorAll('.table-container>.table>.row.heading:first-child>.cell');
+
+ // Set config values, set the special z indices for the header divs
+ const stickBottomLimit = 150;
+ const firstHeaderZ = 140;
+ const otherHeaderZ = 120;
+ headers.forEach((el, index)=>{
+ el.style.zIndex = index==0 ? firstHeaderZ : otherHeaderZ;
+ });
+
+ // Build the handler that makes headers stick
+ const handleScroll = ()=>{
+ const rect = table.getBoundingClientRect();
+ let offset = 0;
+ if (rect.top < 0) {
+ offset = Math.min(-rect.top, rect.height-stickBottomLimit);
+ }
+ headers.forEach((el)=>{
+ el.style.transform = 'translateY('+offset+'px)';
+ });
+ };
+
+ // Build debounced scroll listener
+ let ticking = false;
+ document.addEventListener('scroll', (e)=>{
+ if (!ticking) {
+ window.requestAnimationFrame(()=>{
+ handleScroll();
+ ticking = false;
+ });
+ ticking = true;
+ }
+ });
+ })
 
  return (
  <div className="Table">