-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
638 additions
and
536 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { Button } from "@/components/ui/button"; | ||
import { | ||
DropdownMenu, | ||
DropdownMenuContent, | ||
DropdownMenuItem, | ||
DropdownMenuSeparator, | ||
DropdownMenuTrigger, | ||
} from "@/components/ui/dropdown-menu"; | ||
import { cn } from "@/lib/utils"; | ||
import { | ||
ArrowDownIcon, | ||
ArrowUpIcon, | ||
CaretSortIcon, | ||
EyeNoneIcon, | ||
} from "@radix-ui/react-icons"; | ||
import { Column } from "@tanstack/react-table"; | ||
|
||
interface DataTableColumnHeaderProps<TData, TValue> | ||
extends React.HTMLAttributes<HTMLDivElement> { | ||
column: Column<TData, TValue>; | ||
title: string; | ||
} | ||
|
||
export function DataTableColumnHeader<TData, TValue>({ | ||
column, | ||
title, | ||
className, | ||
}: DataTableColumnHeaderProps<TData, TValue>) { | ||
if (!column.getCanSort()) { | ||
return <div className={cn(className)}>{title}</div>; | ||
} | ||
|
||
return ( | ||
<div className={cn("flex items-center space-x-2", className)}> | ||
<DropdownMenu> | ||
<DropdownMenuTrigger asChild> | ||
<Button | ||
variant="ghost" | ||
size="sm" | ||
className="-ml-3 h-8 data-[state=open]:bg-accent" | ||
> | ||
<span>{title}</span> | ||
{column.getIsSorted() === "desc" ? ( | ||
<ArrowDownIcon className="ml-2 h-4 w-4" /> | ||
) : column.getIsSorted() === "asc" ? ( | ||
<ArrowUpIcon className="ml-2 h-4 w-4" /> | ||
) : ( | ||
<CaretSortIcon className="ml-2 h-4 w-4" /> | ||
)} | ||
</Button> | ||
</DropdownMenuTrigger> | ||
<DropdownMenuContent align="start"> | ||
<DropdownMenuItem onClick={() => column.toggleSorting(false)}> | ||
<ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" /> | ||
Asc | ||
</DropdownMenuItem> | ||
<DropdownMenuItem onClick={() => column.toggleSorting(true)}> | ||
<ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" /> | ||
Desc | ||
</DropdownMenuItem> | ||
<DropdownMenuSeparator /> | ||
<DropdownMenuItem onClick={() => column.toggleVisibility(false)}> | ||
<EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" /> | ||
Hide | ||
</DropdownMenuItem> | ||
</DropdownMenuContent> | ||
</DropdownMenu> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
import { Badge } from "@/components/ui/badge"; | ||
import { Button } from "@/components/ui/button"; | ||
import { | ||
Command, | ||
CommandEmpty, | ||
CommandGroup, | ||
CommandInput, | ||
CommandItem, | ||
CommandList, | ||
CommandSeparator, | ||
} from "@/components/ui/command"; | ||
import { | ||
Popover, | ||
PopoverContent, | ||
PopoverTrigger, | ||
} from "@/components/ui/popover"; | ||
import { Separator } from "@/components/ui/separator"; | ||
import { cn } from "@/lib/utils"; | ||
import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"; | ||
import { Column } from "@tanstack/react-table"; | ||
|
||
interface DataTableFacetedFilterProps<TData, TValue> { | ||
column?: Column<TData, TValue>; | ||
title?: string; | ||
options: { | ||
label: string; | ||
value: string; | ||
icon?: React.ComponentType<{ className?: string }>; | ||
}[]; | ||
} | ||
|
||
export function DataTableFacetedFilter<TData, TValue>({ | ||
column, | ||
title, | ||
options, | ||
}: DataTableFacetedFilterProps<TData, TValue>) { | ||
const facets = column?.getFacetedUniqueValues(); | ||
const selectedValues = new Set(column?.getFilterValue() as string[]); | ||
|
||
return ( | ||
<Popover> | ||
<PopoverTrigger asChild> | ||
<Button variant="outline" size="sm" className="h-8 border-dashed"> | ||
<PlusCircledIcon className="mr-2 h-4 w-4" /> | ||
{title} | ||
{selectedValues?.size > 0 && ( | ||
<> | ||
<Separator orientation="vertical" className="mx-2 h-4" /> | ||
<Badge | ||
variant="secondary" | ||
className="rounded-sm px-1 font-normal lg:hidden" | ||
> | ||
{selectedValues.size} | ||
</Badge> | ||
<div className="hidden space-x-1 lg:flex"> | ||
{selectedValues.size > 2 ? ( | ||
<Badge | ||
variant="secondary" | ||
className="rounded-sm px-1 font-normal" | ||
> | ||
{selectedValues.size} selected | ||
</Badge> | ||
) : ( | ||
options | ||
.filter((option) => selectedValues.has(option.value)) | ||
.map((option) => ( | ||
<Badge | ||
variant="secondary" | ||
key={option.value} | ||
className="rounded-sm px-1 font-normal" | ||
> | ||
{option.label} | ||
</Badge> | ||
)) | ||
)} | ||
</div> | ||
</> | ||
)} | ||
</Button> | ||
</PopoverTrigger> | ||
<PopoverContent className="w-[200px] p-0" align="start"> | ||
<Command> | ||
<CommandInput placeholder={title} /> | ||
<CommandList> | ||
<CommandEmpty>No results found.</CommandEmpty> | ||
<CommandGroup> | ||
{options.map((option) => { | ||
const isSelected = selectedValues.has(option.value); | ||
return ( | ||
<CommandItem | ||
key={option.value} | ||
onSelect={() => { | ||
if (isSelected) { | ||
selectedValues.delete(option.value); | ||
} else { | ||
selectedValues.add(option.value); | ||
} | ||
const filterValues = Array.from(selectedValues); | ||
column?.setFilterValue( | ||
filterValues.length ? filterValues : undefined, | ||
); | ||
}} | ||
> | ||
<div | ||
className={cn( | ||
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", | ||
isSelected | ||
? "bg-primary text-primary-foreground" | ||
: "opacity-50 [&_svg]:invisible", | ||
)} | ||
> | ||
<CheckIcon className={cn("h-4 w-4")} /> | ||
</div> | ||
{option.icon && ( | ||
<option.icon className="mr-2 h-4 w-4 text-muted-foreground" /> | ||
)} | ||
<span>{option.label}</span> | ||
{facets?.get(option.value) && ( | ||
<span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs"> | ||
{facets.get(option.value)} | ||
</span> | ||
)} | ||
</CommandItem> | ||
); | ||
})} | ||
</CommandGroup> | ||
{selectedValues.size > 0 && ( | ||
<> | ||
<CommandSeparator /> | ||
<CommandGroup> | ||
<CommandItem | ||
onSelect={() => column?.setFilterValue(undefined)} | ||
className="justify-center text-center" | ||
> | ||
Clear filters | ||
</CommandItem> | ||
</CommandGroup> | ||
</> | ||
)} | ||
</CommandList> | ||
</Command> | ||
</PopoverContent> | ||
</Popover> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import { Button } from "@/components/ui/button"; | ||
import { | ||
Select, | ||
SelectContent, | ||
SelectItem, | ||
SelectTrigger, | ||
SelectValue, | ||
} from "@/components/ui/select"; | ||
import { | ||
ChevronLeftIcon, | ||
ChevronRightIcon, | ||
DoubleArrowLeftIcon, | ||
DoubleArrowRightIcon, | ||
} from "@radix-ui/react-icons"; | ||
import { Table } from "@tanstack/react-table"; | ||
|
||
interface DataTablePaginationProps<TData> { | ||
table: Table<TData>; | ||
} | ||
|
||
export function DataTablePagination<TData>({ | ||
table, | ||
}: DataTablePaginationProps<TData>) { | ||
return ( | ||
<div className="flex items-center justify-between px-2"> | ||
<div className="flex-1 text-sm text-muted-foreground"> | ||
{table.getFilteredSelectedRowModel().rows.length} of{" "} | ||
{table.getFilteredRowModel().rows.length} row(s) selected. | ||
</div> | ||
<div className="flex items-center space-x-6 lg:space-x-8"> | ||
<div className="flex items-center space-x-2"> | ||
<p className="text-sm font-medium">Rows per page</p> | ||
<Select | ||
value={`${table.getState().pagination.pageSize}`} | ||
onValueChange={(value) => { | ||
table.setPageSize(Number(value)); | ||
}} | ||
> | ||
<SelectTrigger className="h-8 w-[70px]"> | ||
<SelectValue placeholder={table.getState().pagination.pageSize} /> | ||
</SelectTrigger> | ||
<SelectContent side="top"> | ||
{[10, 20, 30, 40, 50].map((pageSize) => ( | ||
<SelectItem key={pageSize} value={`${pageSize}`}> | ||
{pageSize} | ||
</SelectItem> | ||
))} | ||
</SelectContent> | ||
</Select> | ||
</div> | ||
<div className="flex w-[100px] items-center justify-center text-sm font-medium"> | ||
Page {table.getState().pagination.pageIndex + 1} of{" "} | ||
{table.getPageCount()} | ||
</div> | ||
<div className="flex items-center space-x-2"> | ||
<Button | ||
variant="outline" | ||
className="hidden h-8 w-8 p-0 lg:flex" | ||
onClick={() => table.setPageIndex(0)} | ||
disabled={!table.getCanPreviousPage()} | ||
> | ||
<span className="sr-only">Go to first page</span> | ||
<DoubleArrowLeftIcon className="h-4 w-4" /> | ||
</Button> | ||
<Button | ||
variant="outline" | ||
className="h-8 w-8 p-0" | ||
onClick={() => table.previousPage()} | ||
disabled={!table.getCanPreviousPage()} | ||
> | ||
<span className="sr-only">Go to previous page</span> | ||
<ChevronLeftIcon className="h-4 w-4" /> | ||
</Button> | ||
<Button | ||
variant="outline" | ||
className="h-8 w-8 p-0" | ||
onClick={() => table.nextPage()} | ||
disabled={!table.getCanNextPage()} | ||
> | ||
<span className="sr-only">Go to next page</span> | ||
<ChevronRightIcon className="h-4 w-4" /> | ||
</Button> | ||
<Button | ||
variant="outline" | ||
className="hidden h-8 w-8 p-0 lg:flex" | ||
onClick={() => table.setPageIndex(table.getPageCount() - 1)} | ||
disabled={!table.getCanNextPage()} | ||
> | ||
<span className="sr-only">Go to last page</span> | ||
<DoubleArrowRightIcon className="h-4 w-4" /> | ||
</Button> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { TableCell, TableRow } from "@/components/ui/table"; | ||
import { cn } from "@/lib/utils"; | ||
import { Row, flexRender } from "@tanstack/react-table"; | ||
import { useRouter } from "next/navigation"; | ||
|
||
export type RowLink = { | ||
url: string; | ||
field: string; | ||
}; | ||
|
||
interface DataTableRowProps<TData> { | ||
row: Row<TData>; | ||
rowLink?: RowLink; | ||
} | ||
|
||
export function DataTableRow<TData>({ | ||
row, | ||
rowLink, | ||
}: DataTableRowProps<TData>) { | ||
const router = useRouter(); | ||
|
||
return ( | ||
<TableRow | ||
data-state={row.getIsSelected() && "selected"} | ||
className={cn(rowLink && "hover:cursor-pointer")} | ||
onClick={ | ||
rowLink | ||
? () => router.push(`${rowLink.url}${row.getValue(rowLink.field)}`) | ||
: undefined | ||
} | ||
> | ||
{row.getVisibleCells().map((cell) => ( | ||
<TableCell key={cell.id}> | ||
{flexRender(cell.column.columnDef.cell, cell.getContext())} | ||
</TableCell> | ||
))} | ||
</TableRow> | ||
); | ||
} |
Oops, something went wrong.