calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-12 15:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add table empty state

Browse Source
This commit is contained in:
miloschwartz
2026-04-21 20:40:56 -07:00
parent 4f9f235398
commit 4df3613df7
3 changed files with 152 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/ui/controlled-data-table.tsx
View File

@@ -17,6 +17,7 @@ import {
TableHeader, TableHeader,
TableRow TableRow
} from "@/components/ui/table"; } from "@/components/ui/table";
import { DataTableEmptyState } from "@/components/ui/data-table-empty-state";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTablePagination } from "@app/components/DataTablePagination";
import type { DataTableAddAction } from "@app/components/ui/data-table"; import type { DataTableAddAction } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
@@ -249,6 +250,38 @@ export function ControlledDataTable<TData, TValue>({
return ""; return "";
}; };
const tableRows = table.getRowModel().rows;
const hasRows = tableRows.length > 0;
const hasAddAction = Boolean(
addButtonText && ((addActions && addActions.length > 0) || onAdd)
);
const showAddActionInEmptyState = !hasRows && hasAddAction;
const addAction = addActions && addActions.length > 0 && addButtonText ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
disabled={addButtonDisabled || isNavigatingToAddPage}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem key={i} onSelect={() => action.onSelect()}>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : onAdd && addButtonText ? (
<Button onClick={onAdd} loading={isNavigatingToAddPage} disabled={addButtonDisabled}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
) : null;
return ( return (
<div className="container mx-auto max-w-12xl"> <div className="container mx-auto max-w-12xl">
<Card> <Card>
@@ -367,51 +400,15 @@ export function ControlledDataTable<TData, TValue>({
</Button> </Button>
</div> </div>
)} )}
{addActions && {addAction && (
addActions.length > 0 && <>
addButtonText ? ( <div className="sm:hidden">{addAction}</div>
<div> {!showAddActionInEmptyState && (
<DropdownMenu> <div className="hidden sm:block">
<DropdownMenuTrigger asChild> {addAction}
<Button </div>
disabled={ )}
addButtonDisabled || </>
isNavigatingToAddPage
}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem
key={i}
onSelect={() =>
action.onSelect()
}
>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
onAdd &&
addButtonText && (
<div>
<Button
onClick={onAdd}
loading={isNavigatingToAddPage}
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
</div>
)
)} )}
</div> </div>
</CardHeader> </CardHeader>
@@ -606,14 +603,18 @@ export function ControlledDataTable<TData, TValue>({
</TableRow> </TableRow>
)) ))
) : ( ) : (
<TableRow> <DataTableEmptyState
<TableCell colSpan={columns.length}
colSpan={columns.length} action={
className="h-24 text-center" showAddActionInEmptyState
> ? (
No results found. <div className="hidden sm:block">
</TableCell> {addAction}
</TableRow> </div>
)
: undefined
}
/>
)} )}
</TableBody> </TableBody>
</Table> </Table>

46
src/components/ui/data-table-empty-state.tsx Normal file
View File

@@ -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>
);
}

99
src/components/ui/data-table.tsx
View File

@@ -29,6 +29,7 @@ import {
TableHeader, TableHeader,
TableRow TableRow
} from "@/components/ui/table"; } from "@/components/ui/table";
import { DataTableEmptyState } from "@/components/ui/data-table-empty-state";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
@@ -515,6 +516,36 @@ export function DataTable<TData, TValue>({
return ""; return "";
}; };
const tableRows = table.getRowModel().rows;
const hasRows = tableRows.length > 0;
const hasAddAction = Boolean(
addButtonText && ((addActions && addActions.length > 0) || onAdd)
);
const showAddActionInEmptyState = !hasRows && hasAddAction;
const addAction = addActions && addActions.length > 0 && addButtonText ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button disabled={addButtonDisabled}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem key={i} onSelect={() => action.onSelect()}>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : onAdd && addButtonText ? (
<Button onClick={onAdd} disabled={addButtonDisabled}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
) : null;
return ( return (
<div className="container mx-auto max-w-12xl"> <div className="container mx-auto max-w-12xl">
<Card> <Card>
@@ -651,45 +682,15 @@ export function DataTable<TData, TValue>({
</Button> </Button>
</div> </div>
)} )}
{addActions && addActions.length > 0 && addButtonText ? ( {addAction && (
<div> <>
<DropdownMenu> <div className="sm:hidden">{addAction}</div>
<DropdownMenuTrigger asChild> {!showAddActionInEmptyState && (
<Button <div className="hidden sm:block">
disabled={addButtonDisabled} {addAction}
> </div>
<Plus className="mr-2 h-4 w-4" /> )}
{addButtonText} </>
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem
key={i}
onSelect={() =>
action.onSelect()
}
>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
onAdd &&
addButtonText && (
<div>
<Button
onClick={onAdd}
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
</div>
)
)} )}
</div> </div>
</CardHeader> </CardHeader>
@@ -884,14 +885,18 @@ export function DataTable<TData, TValue>({
</TableRow> </TableRow>
)) ))
) : ( ) : (
<TableRow> <DataTableEmptyState
<TableCell colSpan={columns.length}
colSpan={columns.length} action={
className="h-24 text-center" showAddActionInEmptyState
> ? (
No results found. <div className="hidden sm:block">
</TableCell> {addAction}
</TableRow> </div>
)
: undefined
}
/>
)} )}
</TableBody> </TableBody>
</Table> </Table>