Skip to content

Commit

Permalink
feat: hide pagination when no data
Browse files Browse the repository at this point in the history
  • Loading branch information
@TinsFox
TinsFox committed Sep 20, 2024
1 parent 7b1b466 commit 7911c33
Showing 1 changed file with 102 additions and 100 deletions.
202 changes: 102 additions & 100 deletions src/pages/(admin)/(with-layout)/list/basic-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,119 +307,121 @@ export function Component() {
</TableBody>
</Table>
</div>
<div className="flex items-center justify-end space-x-2 py-4">

<div className="flex-1 text-sm text-muted-foreground">
Page
{" "}
{table.getState().pagination.pageIndex + 1}
{" "}
of
{" "}
{table.getPageCount() ? table.getPageCount().toLocaleString() : "-"}
</div>
<div className="space-x-2">
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} />
</PaginationItem>
{table.getPageCount() > 1 && (
<div className="flex items-center justify-end space-x-2 py-4">
<div className="flex-1 text-sm text-muted-foreground">
Page
{" "}
{table.getState().pagination.pageIndex + 1}
{" "}
of
{" "}
{table.getPageCount() ? table.getPageCount().toLocaleString() : "-"}
</div>
<div className="space-x-2">
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} />
</PaginationItem>

{(() => {
const currentPage = table.getState().pagination.pageIndex
const totalPages = table.getPageCount()
const visiblePages = []
const addPage = (index: number) => {
visiblePages.push(
<PaginationItem key={index}>
<PaginationLink
onClick={() => {
setPagination({
...pagination,
pageIndex: index,
})
}}
isActive={currentPage === index}
>
{(() => {
const currentPage = table.getState().pagination.pageIndex
const totalPages = table.getPageCount()
const visiblePages = []
const addPage = (index: number) => {
visiblePages.push(
<PaginationItem key={index}>
<PaginationLink
onClick={() => {
setPagination({
...pagination,
pageIndex: index,
})
}}
isActive={currentPage === index}
>

{String(index + 1)}
</PaginationLink>
</PaginationItem>,
)
}
{String(index + 1)}
</PaginationLink>
</PaginationItem>,
)
}

// Always show first page
addPage(0)
// Always show first page
addPage(0)

if (totalPages <= 7) {
// If total pages are 7 or less, show all pages
for (let i = 1; i < totalPages; i++) {
addPage(i)
}
} else {
let startPage = Math.max(1, currentPage - 1)
let endPage = Math.min(totalPages - 2, currentPage + 1)
if (totalPages <= 7) {
// If total pages are 7 or less, show all pages
for (let i = 1; i < totalPages; i++) {
addPage(i)
}
} else {
let startPage = Math.max(1, currentPage - 1)
let endPage = Math.min(totalPages - 2, currentPage + 1)

// Adjust start and end page to always show 3 pages when possible
if (startPage === 1) {
endPage = Math.min(3, totalPages - 2)
} else if (endPage === totalPages - 2) {
startPage = Math.max(1, totalPages - 4)
}
// Adjust start and end page to always show 3 pages when possible
if (startPage === 1) {
endPage = Math.min(3, totalPages - 2)
} else if (endPage === totalPages - 2) {
startPage = Math.max(1, totalPages - 4)
}

// Show ellipsis at the start if needed
if (startPage > 1) {
visiblePages.push(
<PaginationEllipsis
key="ellipsis1"
onClick={() => setPagination({ ...pagination, pageIndex: Math.max(0, currentPage - PAGINATION_STEP) })}
/>,
)
}
// Show ellipsis at the start if needed
if (startPage > 1) {
visiblePages.push(
<PaginationEllipsis
key="ellipsis1"
onClick={() => setPagination({ ...pagination, pageIndex: Math.max(0, currentPage - PAGINATION_STEP) })}
/>,
)
}

// Add visible pages
for (let i = startPage; i <= endPage; i++) {
addPage(i)
}
// Add visible pages
for (let i = startPage; i <= endPage; i++) {
addPage(i)
}

// Show ellipsis at the end if needed
if (endPage < totalPages - 2) {
visiblePages.push(
<PaginationEllipsis
key="ellipsis2"
onClick={() => setPagination({ ...pagination, pageIndex: Math.min(totalPages - 1, currentPage + PAGINATION_STEP) })}
/>,
)
}
// Show ellipsis at the end if needed
if (endPage < totalPages - 2) {
visiblePages.push(
<PaginationEllipsis
key="ellipsis2"
onClick={() => setPagination({ ...pagination, pageIndex: Math.min(totalPages - 1, currentPage + PAGINATION_STEP) })}
/>,
)
}

// Always show last page
addPage(totalPages - 1)
}
// Always show last page
addPage(totalPages - 1)
}

return visiblePages
})()}
return visiblePages
})()}

<PaginationItem>
<PaginationNext onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} />
</PaginationItem>
<PaginationItem>
<Select value={pagination.pageSize.toString()} onValueChange={(value) => setPagination({ ...pagination, pageSize: Number(value) })}>
<SelectTrigger>
<SelectValue placeholder="Select a page size" />
</SelectTrigger>
<SelectContent>
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={pageSize.toString()}>
{pageSize} / page
</SelectItem>
))}
</SelectContent>
</Select>
</PaginationItem>
</PaginationContent>
</Pagination>
<PaginationItem>
<PaginationNext onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} />
</PaginationItem>
<PaginationItem>
<Select value={pagination.pageSize.toString()} onValueChange={(value) => setPagination({ ...pagination, pageSize: Number(value) })}>
<SelectTrigger>
<SelectValue placeholder="Select a page size" />
</SelectTrigger>
<SelectContent>
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={pageSize.toString()}>
{pageSize} / page
</SelectItem>
))}
</SelectContent>
</Select>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div>
</div>
)}
</div>
)
}

0 comments on commit 7911c33

Please sign in to comment.