DataTableHeaderLayout.tsx35 lines · main

1	import { forwardRef, PropsWithChildren, useEffect, useRef } from 'react'
2	import { cn } from 'ui'
3
4	export const DataTableHeaderLayout = forwardRef<
5	HTMLDivElement,
6	PropsWithChildren<{
7	setTopBarHeight: (height: number) => void
8	}>
9	>(({ setTopBarHeight, ...props }, _ref) => {
10	const topBarRef = useRef<HTMLDivElement>(null)
11
12	useEffect(() => {
13	const observer = new ResizeObserver(() => {
14	const rect = topBarRef.current?.getBoundingClientRect()
15	if (rect) {
16	setTopBarHeight(rect.height)
17	}
18	})
19
20	const topBar = topBarRef.current
21	if (!topBar) return
22
23	observer.observe(topBar)
24	return () => observer.unobserve(topBar)
25	}, [topBarRef])
26
27	return (
28	<div
29	ref={topBarRef}
30	className={cn('flex flex-col gap-4 bg-background p-2', 'top-0 z-10 pb-4')}
31	{...props}
32	/>
33	)
34	})
35	DataTableHeaderLayout.displayName = 'DataTableHeaderLayout'