fix: small pagination part issue fix

Author: dhavalveera

apps/web/examples/table/table.paginationButton.tsx

@@ -11,7 +11,7 @@ import { useState } from "react"
 import { Table } from "flowbite-react";
 
 function Component() {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
 
   const [rowsPerPage] = useState(10);
 
@@ -101,7 +101,7 @@ function Component() {
 `;
 
 function Component() {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
 
   const [rowsPerPage] = useState(10);
 

apps/web/examples/table/table.paginationNumber.tsx

@@ -11,7 +11,7 @@ import { useState } from "react"
 import { Table } from "flowbite-react";
 
 function Component() {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
 
   const [rowsPerPage] = useState(10);
 
@@ -101,7 +101,7 @@ function Component() {
 `;
 
 function Component() {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
 
   const [rowsPerPage] = useState(10);
 

packages/ui/src/components/Table/Table.stories.tsx

@@ -89,7 +89,7 @@ export const DefaultTable = Template.bind({});
 DefaultTable.storyName = "Default";
 
 const TPageNumberTemplate: StoryFn<TableProps> = (args) => {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
   const [rowsPerPage] = useState(10);
 
   const handlePageChange = (newPage: number) => setPageNo(newPage);
@@ -189,7 +189,7 @@ export const PaginationNumberTable = TPageNumberTemplate.bind({});
 PaginationNumberTable.storyName = "Pagination with Numbers";
 
 const TPageButtonTemplate: StoryFn<TableProps> = (args) => {
-  const [pageNo, setPageNo] = useState(1);
+  const [pageNo, setPageNo] = useState(0);
   const [rowsPerPage] = useState(10);
 
   const handlePageChange = (newPage: number) => setPageNo(newPage);

packages/ui/src/components/Table/TablePagination.tsx

@@ -50,7 +50,7 @@ export const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
     const pageNumbers = [...Array(nPages + 1).keys()].slice(1);
 
     const goToPrevPage = (): void => {
-      if (page !== 1) {
+      if (page !== 0) {
         onPageChange(page - 1);
       }
     };
@@ -87,19 +87,17 @@ export const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
         </span>
 
         <ul className={theme.page.base}>
-          <button onClick={goToPrevPage} className={theme.page.previous} disabled={page === 1}>
+          <button onClick={goToPrevPage} className={theme.page.previous} disabled={page === 0}>
             Previous
           </button>
           {paginationType === "numbers" ? (
             <>
               {pageNumbers.map((pgNumber, index) => {
                 return (
                   <button
-                    onClick={() => {
-                      directPageChange(index + 1);
-                    }}
-                    key={index + 1}
-                    className={twMerge(theme.page.pageNo, index + 1 === page ? "bg-blue-50 text-blue-600" : "")}
+                    onClick={() => directPageChange(index)}
+                    key={index}
+                    className={twMerge(theme.page.pageNo, index === page ? "bg-blue-50 text-blue-600" : "")}
                   >
                     {pgNumber}
                   </button>