pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-21 12:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix client side pagination issue

Browse Source
This commit is contained in:
miloschwartz
2025-12-12 22:41:04 -05:00
parent a012369f83
commit 3d857c3b52
3 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/DataTablePagination.tsx
View File

@@ -24,6 +24,8 @@ interface DataTablePaginationProps<TData> {
isServerPagination?: boolean;
isLoading?: boolean;
disabled?: boolean;
pageSize?: number;
pageIndex?: number;
}
export function DataTablePagination<TData>({
@@ -33,10 +35,24 @@ export function DataTablePagination<TData>({
totalCount,
isServerPagination = false,
isLoading = false,
disabled = false
disabled = false,
pageSize: controlledPageSize,
pageIndex: controlledPageIndex
}: DataTablePaginationProps<TData>) {
const t = useTranslations();
// Use controlled values if provided, otherwise fall back to table state
const pageSize = controlledPageSize ?? table.getState().pagination.pageSize;
const pageIndex = controlledPageIndex ?? table.getState().pagination.pageIndex;
// Calculate page boundaries based on controlled state
// For server-side pagination, use totalCount if available for accurate page count
const pageCount = isServerPagination && totalCount !== undefined
? Math.ceil(totalCount / pageSize)
: table.getPageCount();
const canNextPage = pageIndex < pageCount - 1;
const canPreviousPage = pageIndex > 0;
const handlePageSizeChange = (value: string) => {
const newPageSize = Number(value);
table.setPageSize(newPageSize);
@@ -51,7 +67,7 @@ export function DataTablePagination<TData>({
action: "first" | "previous" | "next" | "last"
) => {
if (isServerPagination && onPageChange) {
const currentPage = table.getState().pagination.pageIndex;
const currentPage = pageIndex;
const pageCount = table.getPageCount();
let newPage: number;
@@ -77,18 +93,24 @@ export function DataTablePagination<TData>({
}
} else {
// Use table's built-in navigation for client-side pagination
// But add bounds checking to prevent going beyond page boundaries
const pageCount = table.getPageCount();
switch (action) {
case "first":
table.setPageIndex(0);
break;
case "previous":
table.previousPage();
if (pageIndex > 0) {
table.previousPage();
}
break;
case "next":
table.nextPage();
if (pageIndex < pageCount - 1) {
table.nextPage();
}
break;
case "last":
table.setPageIndex(table.getPageCount() - 1);
table.setPageIndex(Math.max(0, pageCount - 1));
break;
}
}
@@ -98,13 +120,13 @@ export function DataTablePagination<TData>({
<div className="flex items-center justify-between text-muted-foreground">
<div className="flex items-center space-x-2">
<Select
value={`${table.getState().pagination.pageSize}`}
value={`${pageSize}`}
onValueChange={handlePageSizeChange}
disabled={disabled}
>
<SelectTrigger className="h-8 w-[73px]" disabled={disabled}>
<SelectValue
placeholder={table.getState().pagination.pageSize}
placeholder={pageSize}
/>
</SelectTrigger>
<SelectContent side="bottom">
@@ -121,16 +143,11 @@ export function DataTablePagination<TData>({
<div className="flex items-center justify-center text-sm font-medium">
{isServerPagination && totalCount !== undefined
? t("paginator", {
current:
table.getState().pagination.pageIndex + 1,
last: Math.ceil(
totalCount /
table.getState().pagination.pageSize
)
current: pageIndex + 1,
last: Math.ceil(totalCount / pageSize)
})
: t("paginator", {
current:
table.getState().pagination.pageIndex + 1,
current: pageIndex + 1,
last: table.getPageCount()
})}
</div>
@@ -140,7 +157,7 @@ export function DataTablePagination<TData>({
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => handlePageNavigation("first")}
disabled={
!table.getCanPreviousPage() || isLoading || disabled
!canPreviousPage || isLoading || disabled
}
>
<span className="sr-only">{t("paginatorToFirst")}</span>
@@ -151,7 +168,7 @@ export function DataTablePagination<TData>({
className="h-8 w-8 p-0"
onClick={() => handlePageNavigation("previous")}
disabled={
!table.getCanPreviousPage() || isLoading || disabled
!canPreviousPage || isLoading || disabled
}
>
<span className="sr-only">
@@ -164,7 +181,7 @@ export function DataTablePagination<TData>({
className="h-8 w-8 p-0"
onClick={() => handlePageNavigation("next")}
disabled={
!table.getCanNextPage() || isLoading || disabled
!canNextPage || isLoading || disabled
}
>
<span className="sr-only">{t("paginatorToNext")}</span>
@@ -175,7 +192,7 @@ export function DataTablePagination<TData>({
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => handlePageNavigation("last")}
disabled={
!table.getCanNextPage() || isLoading || disabled
!canNextPage || isLoading || disabled
}
>
<span className="sr-only">{t("paginatorToLast")}</span>