calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-05 20:13:58 +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

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

@@ -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>