@olympusoss/canvas 2.20.2 → 4.0.0

package/src/components/organisms/dashboard-grid.tsx

@@ -1,369 +0,0 @@
-"use client";
-
-import { GripVertical, Trash2 } from "lucide-react";
-import * as React from "react";
-import type { Layout, Layouts } from "react-grid-layout";
-import GridLayout from "react-grid-layout";
-
-import { cn } from "../../lib/utils";
-
-// We bypass `WidthProvider` and feed `width` manually via our own
-// ResizeObserver. WidthProvider defaults its initial width to 1280px and
-// updates only on `window.resize`, which never fires for grids inside
-// iframes, modals, or any other container that resizes independently of the
-// window. The ResizeObserver below fires correctly in all those contexts.
-const ResponsiveGridLayout = GridLayout.Responsive;
-
-/* ---------- Types ---------- */
-
-export interface DashboardItem {
-	/** Stable widget id. Matches react-grid-layout's `i` field. */
-	i: string;
-	/** Column position (0-indexed). */
-	x: number;
-	/** Row position (0-indexed). */
-	y: number;
-	/** Width in columns. */
-	w: number;
-	/** Height in row units (`rowHeight` pixels each). */
-	h: number;
-	/** When true, this item never moves and can't be resized. */
-	static?: boolean;
-	/** Minimum width in columns. */
-	minW?: number;
-	/** Minimum height in row units. */
-	minH?: number;
-	/** Maximum width in columns. */
-	maxW?: number;
-	/** Maximum height in row units. */
-	maxH?: number;
-}
-
-export type DashboardGridBreakpoint = "lg" | "md" | "sm" | "xs" | "xxs";
-
-export interface DashboardGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-	/** Controlled item list. The component is purely controlled — pass changes to `onItemsChange`. */
-	items: DashboardItem[];
-	/** Fired with the next item snapshot whenever a drag or resize completes. */
-	onItemsChange?: (next: DashboardItem[]) => void;
-	/** Render the inner widget for an item. The wrapper is owned by the grid. */
-	renderItem: (item: DashboardItem) => React.ReactNode;
-	/** When true, drag handles + resize edges are active. Default `false`. */
-	editing?: boolean;
-	/** Pixel height of one row unit. Default `80`. */
-	rowHeight?: number;
-	/** Column count per breakpoint. Default `{ lg:12, md:8, sm:4, xs:2, xxs:1 }`. */
-	cols?: Partial<Record<DashboardGridBreakpoint, number>>;
-	/** Pixel breakpoint widths. Default react-grid-layout's standard set. */
-	breakpoints?: Partial<Record<DashboardGridBreakpoint, number>>;
-	/** Gutter between items in pixels (`[x, y]`). Default `[16, 16]` — kept even on both axes
-	 * so rows and columns share the same spacing. */
-	margin?: [number, number];
-	/** Rendered when `items.length === 0`. */
-	emptyState?: React.ReactNode;
-}
-
-const DEFAULT_COLS: Record<DashboardGridBreakpoint, number> = {
-	lg: 12,
-	md: 8,
-	sm: 4,
-	xs: 2,
-	xxs: 1,
-};
-
-const DEFAULT_BREAKPOINTS: Record<DashboardGridBreakpoint, number> = {
-	lg: 1200,
-	md: 996,
-	sm: 768,
-	xs: 480,
-	xxs: 0,
-};
-
-const ITEM_KEYS: Array<keyof DashboardItem> = [
-	"i",
-	"x",
-	"y",
-	"w",
-	"h",
-	"static",
-	"minW",
-	"minH",
-	"maxW",
-	"maxH",
-];
-
-/** @internal Exported for unit testing only. */
-export function toLibLayout(items: DashboardItem[]): Layout[] {
-	return items.map((item) => {
-		const out: Layout = { i: item.i, x: item.x, y: item.y, w: item.w, h: item.h };
-		if (item.static !== undefined) out.static = item.static;
-		if (item.minW !== undefined) out.minW = item.minW;
-		if (item.minH !== undefined) out.minH = item.minH;
-		if (item.maxW !== undefined) out.maxW = item.maxW;
-		if (item.maxH !== undefined) out.maxH = item.maxH;
-		return out;
-	});
-}
-
-/** @internal Exported for unit testing only. Returns true when the merged
- * snapshot's positional fields match the prev input — used to skip spurious
- * onItemsChange calls react-grid-layout fires on initial mount. */
-export function isSameLayout(prev: DashboardItem[], next: DashboardItem[]): boolean {
-	if (next.length !== prev.length) return false;
-	return next.every((n, idx) => {
-		const p = prev[idx];
-		return n.i === p.i && n.x === p.x && n.y === p.y && n.w === p.w && n.h === p.h;
-	});
-}
-
-/** @internal Exported for unit testing only. Scales a single item's `x` and `w`
- * proportionally from one breakpoint's column count to another. Preserves `y`,
- * `h`, and all constraint fields untouched.
- *
- * Rounding rules:
- *   - `w`: `Math.round(w * ratio)`, clamped to `[1, toCols]`. Items never become
- *     zero-width and never exceed the target column count.
- *   - `x`: `Math.floor(x * ratio)`, clamped to `[0, toCols - 1]`. Items always
- *     start at a valid column. RGL's vertical compactor handles any wraps that
- *     result.
- */
-export function scaleItem(item: DashboardItem, fromCols: number, toCols: number): DashboardItem {
-	if (fromCols === toCols) return item;
-	const ratio = toCols / fromCols;
-	return {
-		...item,
-		x: Math.min(Math.max(0, toCols - 1), Math.max(0, Math.floor(item.x * ratio))),
-		w: Math.max(1, Math.min(toCols, Math.round(item.w * ratio))),
-	};
-}
-
-/** @internal Exported for unit testing only. */
-export function mergeLibLayout(prev: DashboardItem[], next: Layout[]): DashboardItem[] {
-	const byKey = new Map(prev.map((p) => [p.i, p]));
-	return next.map((n) => {
-		const base = byKey.get(n.i) ?? {};
-		const merged: DashboardItem = {
-			...base,
-			i: n.i,
-			x: n.x,
-			y: n.y,
-			w: n.w,
-			h: n.h,
-		};
-		// Preserve constraints + static flag from the lib's snapshot.
-		if (n.static !== undefined) merged.static = n.static;
-		if (n.minW !== undefined) merged.minW = n.minW;
-		if (n.minH !== undefined) merged.minH = n.minH;
-		if (n.maxW !== undefined) merged.maxW = n.maxW;
-		if (n.maxH !== undefined) merged.maxH = n.maxH;
-		// Drop fields the lib zeroed out compared to the original.
-		for (const key of ITEM_KEYS) {
-			if (key in merged && merged[key] === undefined) {
-				delete merged[key];
-			}
-		}
-		return merged;
-	});
-}
-
-/**
- * Drag-to-reorder, drag-to-resize widget grid backed by `react-grid-layout`.
- * Fully controlled: pass `items` + `onItemsChange`. Toggle `editing` to gate
- * drag/resize affordances behind a customize-mode UX. The 12-col responsive
- * grid auto-packs collisions and adapts column count to viewport via the
- * `breakpoints` map.
- *
- * `items` is consumed in **lg-coords** (the `cols.lg` column count, default 12).
- * Per-breakpoint layouts are derived automatically by scaling each item's `x`
- * and `w` proportionally to the target breakpoint's column count via
- * `scaleItem`. This is the documented `react-grid-layout` pattern — each
- * breakpoint needs its own layout array, not a single layout fanned out
- * (fanning produces the cascading staircase bug at smaller breakpoints because
- * RGL clamps `w` but preserves `x`).
- *
- * **Edit at lg.** Drags performed at smaller breakpoints update only that
- * breakpoint's layout (per RGL); the canonical lg layout doesn't reflect those
- * edits, so they revert when the viewport resizes back to lg. Persist your
- * customize-mode UX at the lg breakpoint.
- *
- * Consumers must import the lib's stylesheet once at app entry:
- *
- *     import "@olympusoss/canvas/styles/dashboard-grid.css";
- *
- * That sheet pulls in `react-grid-layout/css/styles.css` and
- * `react-resizable/css/styles.css`, plus a small canvas-token override that
- * recolours the placeholder + resize handles.
- */
-export const DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(
-	(
-		{
-			items,
-			onItemsChange,
-			renderItem,
-			editing = false,
-			rowHeight = 80,
-			cols,
-			breakpoints,
-			margin = [16, 16],
-			emptyState,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const resolvedCols = { ...DEFAULT_COLS, ...cols };
-		const resolvedBreakpoints = { ...DEFAULT_BREAKPOINTS, ...breakpoints };
-
-		// Track the wrapper's width via ResizeObserver and pass it explicitly to
-		// react-grid-layout's Responsive component. See the `ResponsiveGridLayout`
-		// comment above for why we don't use WidthProvider.
-		//
-		// `useLayoutEffect` measures synchronously after DOM mount but before
-		// paint, so the first paint already has the correct width in real
-		// browsers (no flicker). In SSR / jsdom (no real layout), clientWidth
-		// is 0 — the fallback below kicks in.
-		const wrapperRef = React.useRef<HTMLDivElement | null>(null);
-		const [measuredWidth, setMeasuredWidth] = React.useState<number | undefined>(undefined);
-		// SSR-safe: useLayoutEffect warns when called in node — fall back to useEffect.
-		// jsdom always defines `window`, so the SSR branch is unreachable in tests.
-		/* v8 ignore start */
-		const useIsoLayoutEffect =
-			typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-		/* v8 ignore stop */
-		useIsoLayoutEffect(() => {
-			const el = wrapperRef.current;
-			/* v8 ignore next — `el` is always set after mount; defensive guard */
-			if (!el) return;
-			if (el.clientWidth > 0) setMeasuredWidth(el.clientWidth);
-		}, []);
-		React.useEffect(() => {
-			const el = wrapperRef.current;
-			if (!el || typeof ResizeObserver === "undefined") return;
-			const obs = new ResizeObserver((entries) => {
-				const w = entries[0]?.contentRect.width ?? el.clientWidth;
-				if (w > 0) setMeasuredWidth(w);
-			});
-			obs.observe(el);
-			return () => obs.disconnect();
-		}, []);
-
-		// Merge the forwarded ref with our internal wrapperRef so callers still
-		// get their ref set, while we keep a handle for ResizeObserver.
-		const setMergedRef = React.useCallback(
-			(node: HTMLDivElement | null) => {
-				wrapperRef.current = node;
-				if (typeof ref === "function") ref(node);
-				else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
-			},
-			[ref],
-		);
-
-		// Generate one layout PER breakpoint by scaling each item's `x` and `w`
-		// proportionally to that breakpoint's column count. Treats `lg` as the
-		// canonical source — `items` is consumed as `lg`-coords. Anything else is
-		// derived. This is the documented react-grid-layout pattern (their own
-		// demos hand-roll per-breakpoint layouts) — fanning a single layout into
-		// every breakpoint causes RGL to clamp `w` to `cols`, leaving wide items
-		// stacked diagonally with their original `x` offsets ("staircase" bug).
-		const lgCols = resolvedCols.lg;
-		const libLayouts = React.useMemo<Layouts>(
-			() => ({
-				lg: toLibLayout(items),
-				md: toLibLayout(items.map((it) => scaleItem(it, lgCols, resolvedCols.md))),
-				sm: toLibLayout(items.map((it) => scaleItem(it, lgCols, resolvedCols.sm))),
-				xs: toLibLayout(items.map((it) => scaleItem(it, lgCols, resolvedCols.xs))),
-				xxs: toLibLayout(items.map((it) => scaleItem(it, lgCols, resolvedCols.xxs))),
-			}),
-			[items, lgCols, resolvedCols.md, resolvedCols.sm, resolvedCols.xs, resolvedCols.xxs],
-		);
-
-		const handleLayoutChange = React.useCallback(
-			(currentLayout: Layout[], allLayouts: Layouts) => {
-				if (!onItemsChange) return;
-				// Merge from `allLayouts.lg` so we always feed lg-coord items back into
-				// state — even when the user is interacting at a smaller breakpoint, the
-				// canonical `items` shape stays in lg-coords. (Caveat: drags performed
-				// at sm/xs/xxs only edit that breakpoint's layout; the lg layout doesn't
-				// reflect those edits — drag at lg for the persisted change.)
-				const lgLayout = allLayouts?.lg ?? currentLayout;
-				const next = mergeLibLayout(items, lgLayout);
-				if (isSameLayout(items, next)) return;
-				onItemsChange(next);
-			},
-			[items, onItemsChange],
-		);
-
-		if (items.length === 0 && emptyState !== undefined) {
-			return (
-				<div
-					ref={setMergedRef}
-					className={cn("w-full", className)}
-					data-dashboard-grid-editing={editing ? "true" : "false"}
-					{...props}
-				>
-					{emptyState}
-				</div>
-			);
-		}
-
-		return (
-			<div
-				ref={setMergedRef}
-				className={cn("w-full", className)}
-				data-dashboard-grid-editing={editing ? "true" : "false"}
-				{...props}
-			>
-				<ResponsiveGridLayout
-					// Fallback width (1024) is used only when there's no real layout
-					// to measure (SSR, jsdom, first paint in some edge cases). In
-					// real browsers `useLayoutEffect` sets the actual width before
-					// first paint.
-					width={measuredWidth ?? 1024}
-					layouts={libLayouts}
-					cols={resolvedCols}
-					breakpoints={resolvedBreakpoints}
-					rowHeight={rowHeight}
-					margin={margin}
-					isDraggable={editing}
-					isResizable={editing}
-					draggableHandle=".dashboard-grid-handle"
-					onLayoutChange={handleLayoutChange}
-					compactType="vertical"
-					preventCollision={false}
-				>
-					{items.map((item) => (
-						<div key={item.i} className="group/dashboard-grid-item relative h-full overflow-hidden">
-							{/* Inner wrapper forces the rendered widget to fill the cell —
-							    consumers shouldn't have to add `h-full` to every card just to
-							    make rows align. Kept separate from the drag handle so the
-							    `*:h-full *:w-full` rule doesn't blow up the absolute handle. */}
-							<div className="h-full w-full *:h-full *:w-full">{renderItem(item)}</div>
-							{editing && (
-								<>
-									<div
-										role="button"
-										tabIndex={0}
-										className="dashboard-grid-handle absolute right-2 top-2 z-10 flex h-6 w-6 cursor-grab items-center justify-center rounded-md border border-border bg-background/80 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-accent hover:text-foreground active:cursor-grabbing"
-										aria-label={`Drag ${item.i}`}
-									>
-										<GripVertical className="h-3.5 w-3.5" />
-									</div>
-									<button
-										type="button"
-										onClick={() => onItemsChange?.(items.filter((it) => it.i !== item.i))}
-										className="absolute bottom-2 left-1/2 z-10 flex h-7 -translate-x-1/2 items-center gap-1.5 rounded-md border border-border bg-background/80 px-2.5 text-xs font-medium text-destructive shadow-sm backdrop-blur-sm transition-colors hover:bg-destructive hover:text-destructive-foreground"
-										aria-label={`Remove ${item.i}`}
-									>
-										<Trash2 className="h-3.5 w-3.5" />
-										Remove
-									</button>
-								</>
-							)}
-						</div>
-					))}
-				</ResponsiveGridLayout>
-			</div>
-		);
-	},
-);
-DashboardGrid.displayName = "DashboardGrid";

package/src/components/organisms/data-table.tsx

@@ -1,330 +0,0 @@
-"use client";
-
-import {
-	type ColumnDef,
-	type ColumnFiltersState,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	type RowSelectionState,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
-import { Plus, RefreshCw, Search } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-import { Checkbox } from "../atoms/checkbox";
-import { Input } from "../atoms/input";
-import { LoadingState } from "../molecules/loading-state";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../molecules/table";
-
-/**
- * Column descriptor. Accepts both the legacy API
- * (`field`/`headerName`/`renderCell`/`minWidth`/`maxWidth`/`sortable`)
- * and the TanStack-style API (`accessorKey`/`id`/`header`/`cell`).
- * Internally columns are normalized to TanStack `ColumnDef`.
- */
-export interface DataTableColumn<TData = unknown> {
-	field?: keyof TData | string;
-	headerName?: string;
-	width?: number;
-	minWidth?: number;
-	maxWidth?: number;
-	flex?: number;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	renderCell?: (value: any, row: any) => React.ReactNode;
-	sortable?: boolean;
-	accessorKey?: keyof TData | string;
-	id?: string;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	header?: React.ReactNode | ((ctx: any) => React.ReactNode);
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	cell?: (ctx: { row: { original: TData }; getValue: () => any }) => React.ReactNode;
-}
-
-export interface DataTableProps<TData> {
-	columns: DataTableColumn<TData>[];
-	data: TData[];
-	className?: string;
-	emptyMessage?: string;
-	pageSize?: number;
-	/** Row key field. Defaults to "id". */
-	keyField?: string;
-	loading?: boolean;
-	searchable?: boolean;
-	searchKey?: string;
-	searchValue?: string;
-	onSearchChange?: (v: string) => void;
-	searchPlaceholder?: string;
-	onRowClick?: (row: TData) => void;
-	onRefresh?: () => void;
-	onAdd?: () => void;
-	addButtonText?: string;
-	selectable?: boolean;
-	selectedKeys?: Set<string>;
-	onSelectionChange?: (keys: Set<string>) => void;
-	pagination?: boolean;
-	pageSizeOptions?: number[];
-}
-
-function normalizeColumn<TData>(col: DataTableColumn<TData>): ColumnDef<TData, unknown> {
-	const id = col.id ?? (col.field as string | undefined) ?? (col.accessorKey as string | undefined);
-	const accessorKey = col.accessorKey ?? col.field;
-	const header = col.headerName ?? col.header;
-	const cell =
-		col.cell ??
-		(col.renderCell
-			? (ctx: { row: { original: TData }; getValue: () => unknown }) =>
-					col.renderCell!(ctx.getValue(), ctx.row.original)
-			: undefined);
-
-	const def: Record<string, unknown> = {};
-	/* c8 ignore next -- false branch: callers always supply id/accessorKey/field */
-	if (id) def.id = String(id);
-	/* c8 ignore next -- false branch: callers always supply accessorKey/field */
-	if (accessorKey) def.accessorKey = String(accessorKey);
-	/* c8 ignore next -- false branch: callers always supply header/headerName */
-	if (header !== undefined) def.header = header;
-	if (cell) def.cell = cell;
-	if (col.sortable !== undefined) def.enableSorting = col.sortable;
-	const widthHint = col.minWidth ?? col.width;
-	if (widthHint !== undefined) {
-		def.size = widthHint;
-		def.minSize = widthHint;
-	}
-	if (col.maxWidth !== undefined) def.maxSize = col.maxWidth;
-	return def as unknown as ColumnDef<TData, unknown>;
-}
-
-function DataTable<TData>({
-	columns,
-	data,
-	className,
-	emptyMessage = "No results.",
-	pageSize = 10,
-	keyField = "id",
-	loading = false,
-	searchable = false,
-	searchKey,
-	searchValue,
-	onSearchChange,
-	searchPlaceholder = "Search...",
-	onRowClick,
-	onRefresh,
-	onAdd,
-	addButtonText = "Add",
-	selectable = false,
-	selectedKeys,
-	onSelectionChange,
-	pagination = true,
-	pageSizeOptions: _pageSizeOptions,
-}: DataTableProps<TData>) {
-	const [sorting, setSorting] = React.useState<SortingState>([]);
-	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-	const [localSearch, setLocalSearch] = React.useState<string>(searchValue ?? "");
-	const currentSearch = searchValue ?? localSearch;
-
-	const normalizedColumns = React.useMemo(() => columns.map((c) => normalizeColumn(c)), [columns]);
-
-	const tableColumns = React.useMemo<ColumnDef<TData, unknown>[]>(() => {
-		if (!selectable) return normalizedColumns;
-		const selectionCol: ColumnDef<TData, unknown> = {
-			id: "__select__",
-			enableSorting: false,
-			header: ({ table }) => (
-				<Checkbox
-					checked={
-						table.getIsAllPageRowsSelected() ||
-						(table.getIsSomePageRowsSelected() && "indeterminate")
-					}
-					onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
-					aria-label="Select all"
-				/>
-			),
-			cell: ({ row }) => (
-				<Checkbox
-					checked={row.getIsSelected()}
-					onCheckedChange={(v) => row.toggleSelected(!!v)}
-					aria-label="Select row"
-					onClick={(e) => e.stopPropagation()}
-				/>
-			),
-		};
-		return [selectionCol, ...normalizedColumns];
-	}, [normalizedColumns, selectable]);
-
-	const rowSelection = React.useMemo<RowSelectionState>(() => {
-		if (!selectable || !selectedKeys) return {};
-		const out: RowSelectionState = {};
-		selectedKeys.forEach((k) => {
-			out[k] = true;
-		});
-		return out;
-	}, [selectable, selectedKeys]);
-
-	React.useEffect(() => {
-		if (searchKey && currentSearch !== undefined) {
-			setColumnFilters([{ id: searchKey, value: currentSearch }]);
-		}
-	}, [searchKey, currentSearch]);
-
-	const getRowId = React.useCallback(
-		/* c8 ignore next -- fallback to "" only triggers if a row is missing keyField, which callers guarantee */
-		(row: TData) => String((row as Record<string, unknown>)[keyField] ?? ""),
-		[keyField],
-	);
-
-	const table = useReactTable<TData>({
-		data,
-		columns: tableColumns,
-		getRowId,
-		getCoreRowModel: getCoreRowModel(),
-		...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
-		onRowSelectionChange: (updater) => {
-			if (!onSelectionChange) return;
-			/* c8 ignore next -- TanStack always calls this with a function updater; the direct-object path is never exercised */
-			const newState = typeof updater === "function" ? updater(rowSelection) : updater;
-			onSelectionChange(new Set(Object.keys(newState).filter((k) => newState[k])));
-		},
-		state: { sorting, columnFilters, rowSelection },
-		...(pagination ? { initialState: { pagination: { pageSize } } } : {}),
-		enableRowSelection: !!selectable,
-	});
-
-	const hasToolbar = searchable || onRefresh || onAdd;
-
-	return (
-		<div className={cn("space-y-4", className)}>
-			{hasToolbar && (
-				<div className="flex items-center justify-between gap-4">
-					{searchable ? (
-						<div className="relative flex-1 max-w-sm">
-							<Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-							<Input
-								placeholder={searchPlaceholder}
-								value={currentSearch}
-								onChange={(e) => {
-									const v = e.target.value;
-									setLocalSearch(v);
-									onSearchChange?.(v);
-								}}
-								className="pl-8"
-							/>
-						</div>
-					) : (
-						<div />
-					)}
-					<div className="flex items-center gap-2">
-						{onRefresh && (
-							<Button variant="outline" size="sm" onClick={onRefresh}>
-								<RefreshCw className="h-4 w-4" />
-							</Button>
-						)}
-						{onAdd && (
-							<Button size="sm" onClick={onAdd}>
-								<Plus className="mr-1 h-4 w-4" /> {addButtonText}
-							</Button>
-						)}
-					</div>
-				</div>
-			)}
-
-			<div data-slot="data-table" className="rounded-md border border-border">
-				<Table>
-					<TableHeader>
-						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
-								{headerGroup.headers.map((header) => {
-									const colDef = header.column.columnDef as ColumnDef<TData, unknown> & {
-										minSize?: number;
-										maxSize?: number;
-									};
-									return (
-										<TableHead
-											key={header.id}
-											style={{
-												minWidth: colDef.minSize,
-												maxWidth: colDef.maxSize,
-											}}
-										>
-											{flexRender(header.column.columnDef.header, header.getContext())}
-										</TableHead>
-									);
-								})}
-							</TableRow>
-						))}
-					</TableHeader>
-					<TableBody>
-						{loading ? (
-							<TableRow>
-								<TableCell colSpan={tableColumns.length} className="h-24 p-0">
-									<LoadingState />
-								</TableCell>
-							</TableRow>
-						) : table.getRowModel().rows?.length ? (
-							table.getRowModel().rows.map((row) => (
-								<TableRow
-									key={row.id}
-									data-state={row.getIsSelected() ? "selected" : undefined}
-									className={onRowClick ? "cursor-pointer" : undefined}
-									onClick={() => onRowClick?.(row.original)}
-								>
-									{row.getVisibleCells().map((cell) => (
-										<TableCell key={cell.id}>
-											{flexRender(cell.column.columnDef.cell, cell.getContext())}
-										</TableCell>
-									))}
-								</TableRow>
-							))
-						) : (
-							<TableRow>
-								<TableCell
-									colSpan={tableColumns.length}
-									className="h-24 text-center text-muted-foreground"
-								>
-									{emptyMessage}
-								</TableCell>
-							</TableRow>
-						)}
-					</TableBody>
-				</Table>
-			</div>
-
-			{pagination && table.getPageCount() > 1 && (
-				<div className="flex items-center justify-between">
-					<p className="text-sm text-muted-foreground">
-						Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-					</p>
-					<div className="flex gap-2">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							Previous
-						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							Next
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export { DataTable };