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">