From 52204c4a6f00024d38d594f782cc9531d29ee1e9 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Wed, 13 Nov 2024 10:54:35 +0700
Subject: [PATCH] feat: add pagination state management to DataTable component

---
 src/components/dataTable.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/dataTable.tsx b/src/components/dataTable.tsx
index 16e5e3b..4b440e4 100644
--- a/src/components/dataTable.tsx
+++ b/src/components/dataTable.tsx
@@ -176,6 +176,10 @@ export function DataTable({ data }: { data: ModalProps[] }) {
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0, //initial page index
+    pageSize: 5, //default page size
+  });
 
   const table = useReactTable({
     data,
@@ -187,15 +191,16 @@ export function DataTable({ data }: { data: ModalProps[] }) {
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
     onRowSelectionChange: setRowSelection,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
+      pagination,
     },
   });
-  console.table(columnVisibility)
 
   return (
     <div className="w-full">