mirror of
https://github.com/supabase/supabase.git
synced 2026-07-02 16:44:20 +08:00
ec43e11c11
* Fix z-index position of row * Fix column widths to make it fit a laptop viewport better * Fix auto fetching when scrolling to the bottom * Small style fixes + decouple count loading state from table loading state * Refactor row uuid to just id, add de-duping logic to logs data, standardise unified logs query options * Clean up logs * Misc styling tweaks * Reinstate prev cursor and direction for live mode * Clean * Revert text sizes * Remove now resolved comments
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { CSSProperties, ReactNode, useMemo } from 'react'
|
|
|
|
import { cn } from 'ui'
|
|
import { useDataTable } from './providers/DataTableProvider'
|
|
|
|
interface DataTableSideBarLayoutProps {
|
|
children: ReactNode
|
|
className?: string
|
|
topBarHeight?: number
|
|
}
|
|
|
|
export function DataTableSideBarLayout({
|
|
children,
|
|
className,
|
|
topBarHeight = 0,
|
|
}: DataTableSideBarLayoutProps) {
|
|
const { table } = useDataTable()
|
|
|
|
/**
|
|
* https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance
|
|
* Instead of calling `column.getSize()` on every render for every header
|
|
* and especially every data cell (very expensive),
|
|
* we will calculate all column sizes at once at the root table level in a useMemo
|
|
* and pass the column sizes down as CSS variables to the <table> element.
|
|
*/
|
|
const columnSizeVars = useMemo(() => {
|
|
const headers = table.getFlatHeaders()
|
|
const colSizes: { [key: string]: string } = {}
|
|
for (let i = 0; i < headers.length; i++) {
|
|
const header = headers[i]!
|
|
// REMINDER: replace "." with "-" to avoid invalid CSS variable name (e.g. "timing.dns" -> "timing-dns")
|
|
colSizes[`--header-${header.id.replace('.', '-')}-size`] = `${header.getSize()}px`
|
|
colSizes[`--col-${header.column.id.replace('.', '-')}-size`] = `${header.column.getSize()}px`
|
|
}
|
|
return colSizes
|
|
}, [
|
|
// TODO: check if we need this
|
|
table.getState().columnSizingInfo,
|
|
table.getState().columnSizing,
|
|
table.getState().columnVisibility,
|
|
])
|
|
|
|
return (
|
|
<div
|
|
className={cn('flex flex-row w-full h-full', className)}
|
|
// topBarHeight is the height of the chart and search bar, and 64px is the height of the top bar
|
|
style={{ '--top-bar-height': `${topBarHeight + 64}px`, ...columnSizeVars } as CSSProperties}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|