add table empty state

2026-08-20 03:02:58 +02:00 · 2026-04-21 20:40:56 -07:00
parent 4f9f235398
commit 4df3613df7
3 changed files with 152 additions and 100 deletions
@@ -0,0 +1,46 @@
+"use client";
+
+import { TableCell, TableRow } from "@/components/ui/table";
+import { useTranslations } from "next-intl";
+import { type ReactNode } from "react";
+
+const PLACEHOLDER_ROW_COUNT = 5;
+
+type DataTableEmptyStateProps = {
+    colSpan: number;
+    action?: ReactNode;
+};
+
+export function DataTableEmptyState({
+    colSpan,
+    action
+}: DataTableEmptyStateProps) {
+    const t = useTranslations();
+    return (
+        <TableRow className="hidden sm:table-row hover:bg-transparent data-[state=selected]:bg-transparent">
+            <TableCell colSpan={colSpan} className="p-0">
+                <div className="relative min-h-[11rem] w-full overflow-hidden">
+                    <div
+                        className="absolute inset-0 flex flex-col justify-start"
+                        aria-hidden
+                    >
+                        {Array.from({ length: PLACEHOLDER_ROW_COUNT }).map(
+                            (_, i) => (
+                                <div
+                                    key={i}
+                                    className="h-10 shrink-0 border-b border-border/30"
+                                />
+                            )
+                        )}
+                    </div>
+                    <div className="relative flex min-h-[11rem] w-full flex-col items-center justify-center gap-4 px-4 py-8">
+                        <p className="text-sm text-muted-foreground">
+                            {t("noResults")}
+                        </p>
+                        {action}
+                    </div>
+                </div>
+            </TableCell>
+        </TableRow>
+    );
+}