junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

save pagination

Browse source
This commit is contained in:
Jun-te Kim 2026-01-07 13:21:52 +00:00
parent 89db1d84e1
commit 0bb2ed3499
2 changed files with 30 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/portfolio/[slug]/components/dataTable.tsx
View file

@ -4,6 +4,7 @@ import {
ColumnDef,
ColumnFiltersState,
SortingState,
PaginationState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
@ -45,14 +46,19 @@ export default function DataTable<TData extends Record<string, any>>({
columns,
}: DataTableProps<TData>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] =
useState<ColumnFiltersState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState("");
const [currentPageIndex, setCurrentPageIndex] = useState(0);
// ✅ REQUIRED pagination state (fixes TS error)
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 7,
});
const table = useReactTable({
data,
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
@ -61,6 +67,7 @@ export default function DataTable<TData extends Record<string, any>>({
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onGlobalFilterChange: setGlobalFilter,
onPaginationChange: setPagination,
globalFilterFn: fuzzyFilter,
@ -68,10 +75,7 @@ export default function DataTable<TData extends Record<string, any>>({
sorting,
columnFilters,
globalFilter,
pagination: {
pageIndex: currentPageIndex,
pageSize: 7,
},
pagination,
},
});
@ -104,20 +108,14 @@ export default function DataTable<TData extends Record<string, any>>({
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
@ -126,11 +124,7 @@ export default function DataTable<TData extends Record<string, any>>({
</Table>
<div className="mb-2">
<DataTablePagination
table={table}
currentPageIndex={currentPageIndex}
setCurrentPageIndex={setCurrentPageIndex}
/>
<DataTablePagination table={table} />
</div>
</div>
);

64
src/app/portfolio/[slug]/components/propertyTablePagination.tsx
View file

@ -5,96 +5,62 @@ import {
ChevronDoubleLeftIcon,
} from "@heroicons/react/24/outline";
import { Table } from "@tanstack/react-table";
import { Button } from "@/app/shadcn_components/ui/button";
interface DataTablePaginationProps<TData> {
table: Table<TData>;
loadPaginatedData: () => void;
currentPageIndex: number;
setCurrentPageIndex: (index: number) => void;
}
export function DataTablePagination<TData>({
table,
loadPaginatedData,
currentPageIndex,
setCurrentPageIndex,
}: DataTablePaginationProps<TData>) {
// Check if the user has reached the last page
const requestMoreData = () => {
// Check if the next page is the last one
if (
table.getState().pagination.pageIndex + 1 ===
table.getPageCount() - 1
) {
console.log("requesting more data");
loadPaginatedData();
}
};
const goToFinalPage = () => {
console.log("Go to final page");
// Check if the next page is the last one
loadPaginatedData();
};
const { pageIndex } = table.getState().pagination;
return (
<div className="flex items-center justify-end px-2">
<div className="flex items-center space-x-6 lg:space-x-8">
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page{" "}
{table.getPageCount() === 0
? 0
: table.getState().pagination.pageIndex + 1}{" "}
of {table.getPageCount()}
<div className="flex w-[120px] items-center justify-center text-sm font-medium">
Page {pageIndex + 1} of {table.getPageCount()}
</div>
<div className="flex items-center space-x-2">
{/* First page */}
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {
setCurrentPageIndex(0);
}}
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<ChevronDoubleLeftIcon className="h-4 w-4" />
</Button>
{/* Previous */}
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => {
setCurrentPageIndex(currentPageIndex - 1);
}}
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<ChevronLeftIcon className="h-4 w-4" />
</Button>
{/* Next */}
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => {
requestMoreData();
setCurrentPageIndex(currentPageIndex + 1);
}}
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<ChevronRightIcon className="h-4 w-4" />
</Button>
{/* Last */}
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {
goToFinalPage();
setCurrentPageIndex(table.getPageCount() - 1);
}}
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<ChevronDoubleRightIcon className="h-4 w-4" />
</Button>
</div>