mirror of
https://github.com/fosrl/pangolin.git
synced 2026-04-28 03:39:42 +00:00
add table empty state
This commit is contained in:
miloschwartz
parent
4f9f235398
commit
4df3613df7
3 changed files with 152 additions and 100 deletions
|
|
@ -17,6 +17,7 @@ import {
|
|||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { DataTableEmptyState } from "@/components/ui/data-table-empty-state";
|
||||
import { DataTablePagination } from "@app/components/DataTablePagination";
|
||||
import type { DataTableAddAction } from "@app/components/ui/data-table";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
|
|
@ -249,6 +250,38 @@ export function ControlledDataTable<TData, TValue>({
|
|||
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 (
|
||||
<div className="container mx-auto max-w-12xl">
|
||||
<Card>
|
||||
|
|
@ -367,51 +400,15 @@ export function ControlledDataTable<TData, TValue>({
|
|||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{addActions &&
|
||||
addActions.length > 0 &&
|
||||
addButtonText ? (
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
) : (
|
||||
onAdd &&
|
||||
addButtonText && (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onAdd}
|
||||
loading={isNavigatingToAddPage}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
{addAction && (
|
||||
<>
|
||||
<div className="sm:hidden">{addAction}</div>
|
||||
{!showAddActionInEmptyState && (
|
||||
<div className="hidden sm:block">
|
||||
{addAction}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
|
@ -606,14 +603,18 @@ export function ControlledDataTable<TData, TValue>({
|
|||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center"
|
||||
>
|
||||
No results found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<DataTableEmptyState
|
||||
colSpan={columns.length}
|
||||
action={
|
||||
showAddActionInEmptyState
|
||||
? (
|
||||
<div className="hidden sm:block">
|
||||
{addAction}
|
||||
</div>
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
|
|||
46
src/components/ui/data-table-empty-state.tsx
Normal file
46
src/components/ui/data-table-empty-state.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@ import {
|
|||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { DataTableEmptyState } from "@/components/ui/data-table-empty-state";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
|
|
@ -515,6 +516,36 @@ export function DataTable<TData, TValue>({
|
|||
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 (
|
||||
<div className="container mx-auto max-w-12xl">
|
||||
<Card>
|
||||
|
|
@ -651,45 +682,15 @@ export function DataTable<TData, TValue>({
|
|||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{addActions && addActions.length > 0 && addButtonText ? (
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
) : (
|
||||
onAdd &&
|
||||
addButtonText && (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onAdd}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
{addAction && (
|
||||
<>
|
||||
<div className="sm:hidden">{addAction}</div>
|
||||
{!showAddActionInEmptyState && (
|
||||
<div className="hidden sm:block">
|
||||
{addAction}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
|
@ -884,14 +885,18 @@ export function DataTable<TData, TValue>({
|
|||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center"
|
||||
>
|
||||
No results found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<DataTableEmptyState
|
||||
colSpan={columns.length}
|
||||
action={
|
||||
showAddActionInEmptyState
|
||||
? (
|
||||
<div className="hidden sm:block">
|
||||
{addAction}
|
||||
</div>
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue