Function useStickyTable

common/hooks/table.ts:64–105

()

}

export function useStickyTable() {
  const tableRef = useRef<HTMLTableElement>(null)
  const fixedHeaderRef = useRef<HTMLDivElement>(null)
  const wrapperRef = useRef<HTMLDivElement>(null)

  function onScroll() {
    if (!tableRef.current) return
    const table = tableRef.current
    const rect = table.getBoundingClientRect()
    if (rect.top < 0) {
      wrapperRef.current!.style.display = "block"
    } else {
      wrapperRef.current!.style.display = "none"
    }
  }

  function onTableScroll(e: Event) {
    if (!fixedHeaderRef.current) return
    fixedHeaderRef.current.scrollLeft =
      tableRef.current?.parentElement?.scrollLeft ?? 0
  }

  useEffect(() => {
    if (!tableRef.current) return
    const table = tableRef.current
    const [wrapper, fixedHeader] = cloneHeader(table)
    fixedHeaderRef.current = fixedHeader
    wrapperRef.current = wrapper
    const debouncedOnScroll = throttle(onScroll, 100)
    window.addEventListener("scroll", debouncedOnScroll)
    tableRef.current.parentElement?.addEventListener("scroll", onTableScroll)
    return () => {
      window.removeEventListener("scroll", debouncedOnScroll)
      tableRef.current?.parentElement?.removeEventListener(
        "scroll",
        onTableScroll
      )
    }
  }, [])

  return { tableRef }
}