mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-24 20:55:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

test new layout

Browse source
This commit is contained in:
miloschwartz 2025-04-12 15:04:32 -04:00
parent f14379a1c8
commit 1a750e8279
No known key found for this signature in database
38 changed files with 992 additions and 1622 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/components/ui/data-table.tsx Normal file
View file

@ -0,0 +1,148 @@
"use client";
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
title?: string;
addButtonText?: string;
onAdd?: () => void;
searchPlaceholder?: string;
searchColumn?: string;
}
export function DataTable<TData, TValue>({
columns,
data,
title,
addButtonText,
onAdd,
searchPlaceholder = "Search...",
searchColumn = "name"
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters
}
});
return (
<div className="container mx-auto max-w-12xl">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<div className="flex items-center max-w-sm w-full relative">
<Input
placeholder={searchPlaceholder}
value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn(searchColumn)?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
</div>
{onAdd && addButtonText && (
<Button onClick={onAdd}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
)}
</CardHeader>
<CardContent>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</CardContent>
</Card>
</div>
);
}

122
src/components/ui/table.tsx
View file

@ -23,30 +23,24 @@ const Table = (
</div>)
Table.displayName = "Table"
const TableHeader = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"
const TableBody = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>)
const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
TableBody.displayName = "TableBody"
const TableFooter = (
@ -67,55 +61,49 @@ const TableFooter = (
/>)
TableFooter.displayName = "TableFooter"
const TableRow = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableRowElement> & {
ref: React.RefObject<HTMLTableRowElement>;
}
) => (<tr
ref={ref}
className={cn(
"border-b transition-colors data-[state=selected]:bg-muted",
className
)}
{...props}
/>)
const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
TableRow.displayName = "TableRow"
const TableHead = (
{
ref,
className,
...props
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<th
ref={ref}
className={cn(
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
/>)
const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
ref={ref}
className={cn(
"h-8 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
))
TableHead.displayName = "TableHead"
const TableCell = (
{
ref,
className,
...props
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<td
ref={ref}
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>)
const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
))
TableCell.displayName = "TableCell"
const TableCaption = (