-
-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): ✨🚧 add paginations to FilterLists table
- Loading branch information
1 parent
31968be
commit c7b38c3
Showing
5 changed files
with
358 additions
and
0 deletions.
There are no files selected for viewing
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,97 @@ | ||
import { | ||
ChevronLeftIcon, | ||
ChevronRightIcon, | ||
DoubleArrowLeftIcon, | ||
DoubleArrowRightIcon, | ||
} from "@radix-ui/react-icons"; | ||
import { Table } from "@tanstack/react-table"; | ||
|
||
import { Button } from "@/components/ui/button"; | ||
import { | ||
Select, | ||
SelectContent, | ||
SelectItem, | ||
SelectTrigger, | ||
SelectValue, | ||
} from "@/components/ui/select"; | ||
|
||
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
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,164 @@ | ||
"use client" | ||
|
||
import * as React from "react" | ||
import { | ||
CaretSortIcon, | ||
CheckIcon, | ||
ChevronDownIcon, | ||
ChevronUpIcon, | ||
} from "@radix-ui/react-icons" | ||
import * as SelectPrimitive from "@radix-ui/react-select" | ||
|
||
import { cn } from "@/lib/utils" | ||
|
||
const Select = SelectPrimitive.Root | ||
|
||
const SelectGroup = SelectPrimitive.Group | ||
|
||
const SelectValue = SelectPrimitive.Value | ||
|
||
const SelectTrigger = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.Trigger>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> | ||
>(({ className, children, ...props }, ref) => ( | ||
<SelectPrimitive.Trigger | ||
ref={ref} | ||
className={cn( | ||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", | ||
className | ||
)} | ||
{...props} | ||
> | ||
{children} | ||
<SelectPrimitive.Icon asChild> | ||
<CaretSortIcon className="h-4 w-4 opacity-50" /> | ||
</SelectPrimitive.Icon> | ||
</SelectPrimitive.Trigger> | ||
)) | ||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName | ||
|
||
const SelectScrollUpButton = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> | ||
>(({ className, ...props }, ref) => ( | ||
<SelectPrimitive.ScrollUpButton | ||
ref={ref} | ||
className={cn( | ||
"flex cursor-default items-center justify-center py-1", | ||
className | ||
)} | ||
{...props} | ||
> | ||
<ChevronUpIcon /> | ||
</SelectPrimitive.ScrollUpButton> | ||
)) | ||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName | ||
|
||
const SelectScrollDownButton = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> | ||
>(({ className, ...props }, ref) => ( | ||
<SelectPrimitive.ScrollDownButton | ||
ref={ref} | ||
className={cn( | ||
"flex cursor-default items-center justify-center py-1", | ||
className | ||
)} | ||
{...props} | ||
> | ||
<ChevronDownIcon /> | ||
</SelectPrimitive.ScrollDownButton> | ||
)) | ||
SelectScrollDownButton.displayName = | ||
SelectPrimitive.ScrollDownButton.displayName | ||
|
||
const SelectContent = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.Content>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> | ||
>(({ className, children, position = "popper", ...props }, ref) => ( | ||
<SelectPrimitive.Portal> | ||
<SelectPrimitive.Content | ||
ref={ref} | ||
className={cn( | ||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", | ||
position === "popper" && | ||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", | ||
className | ||
)} | ||
position={position} | ||
{...props} | ||
> | ||
<SelectScrollUpButton /> | ||
<SelectPrimitive.Viewport | ||
className={cn( | ||
"p-1", | ||
position === "popper" && | ||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" | ||
)} | ||
> | ||
{children} | ||
</SelectPrimitive.Viewport> | ||
<SelectScrollDownButton /> | ||
</SelectPrimitive.Content> | ||
</SelectPrimitive.Portal> | ||
)) | ||
SelectContent.displayName = SelectPrimitive.Content.displayName | ||
|
||
const SelectLabel = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.Label>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
>(({ className, ...props }, ref) => ( | ||
<SelectPrimitive.Label | ||
ref={ref} | ||
className={cn("px-2 py-1.5 text-sm font-semibold", className)} | ||
{...props} | ||
/> | ||
)) | ||
SelectLabel.displayName = SelectPrimitive.Label.displayName | ||
|
||
const SelectItem = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.Item>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
>(({ className, children, ...props }, ref) => ( | ||
<SelectPrimitive.Item | ||
ref={ref} | ||
className={cn( | ||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
className | ||
)} | ||
{...props} | ||
> | ||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
<SelectPrimitive.ItemIndicator> | ||
<CheckIcon className="h-4 w-4" /> | ||
</SelectPrimitive.ItemIndicator> | ||
</span> | ||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
</SelectPrimitive.Item> | ||
)) | ||
SelectItem.displayName = SelectPrimitive.Item.displayName | ||
|
||
const SelectSeparator = React.forwardRef< | ||
React.ElementRef<typeof SelectPrimitive.Separator>, | ||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
>(({ className, ...props }, ref) => ( | ||
<SelectPrimitive.Separator | ||
ref={ref} | ||
className={cn("-mx-1 my-1 h-px bg-muted", className)} | ||
{...props} | ||
/> | ||
)) | ||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName | ||
|
||
export { | ||
Select, | ||
SelectGroup, | ||
SelectValue, | ||
SelectTrigger, | ||
SelectContent, | ||
SelectLabel, | ||
SelectItem, | ||
SelectSeparator, | ||
SelectScrollUpButton, | ||
SelectScrollDownButton, | ||
} |
Oops, something went wrong.