Merge pull request #11 from mnzsss/fix-pagination-table

.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [],
   "access": "restricted",
-  "baseBranch": "main",
+  "baseBranch": "master",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

.changeset/curvy-carpets-relax.md

@@ -0,0 +1,5 @@
+---
+'react-chakra-pagination': major
+---
+
+Fix table pagination

apps/vite-table/package.json

@@ -6,23 +6,24 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "update-deps": "npx npm-check-updates -u"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.4.9",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "framer-motion": "^8.5.0",
+    "@chakra-ui/react": "^2.7.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.12.16",
     "react": "^18.2.0",
-    "react-chakra-pagination": "2.0.7",
+    "react-chakra-pagination": "2.1.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1"
+    "react-icons": "^4.9.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   }
 }

apps/vite-table/src/App.tsx

@@ -1,13 +1,12 @@
 import {
-  Flex,
   Avatar,
-  Text,
   Box,
-  Icon,
   Button,
+  Flex,
   Heading,
+  Icon,
+  Text,
 } from '@chakra-ui/react';
-import * as React from 'react';
 
 // Use Chakra Ui for create a custom component for display field data in table
 
@@ -160,9 +159,6 @@ const users: User[] = [
 ];
 
 export default function App() {
-  // Control current Page
-  const [page, setPage] = React.useState(1);
-
   // Formatter for each user
   const tableData = users.map(user => ({
     name: (
@@ -225,10 +221,11 @@ export default function App() {
             icon: FiUser,
             text: 'Nobody is registered here.',
           }}
-          totalRegisters={users.length}
-          page={page}
+          // Control registers to show
+          // Exemple: show 10 registers of 15
+          totalRegisters={10}
           // Listen change page event and control the current page using state
-          onPageChange={page => setPage(page)}
+          onPageChange={page => console.log(page)}
           columns={columns}
           data={tableData}
         />

package.json

@@ -26,19 +26,19 @@
   },
   "version": "0.0.1",
   "dependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
     "@commitlint/types": "^17.4.4",
-    "@manypkg/cli": "^0.20.0",
+    "@manypkg/cli": "^0.21.0",
     "commitizen": "^4.3.0",
-    "dotenv": "^16.0.3",
-    "dotenv-cli": "^7.0.0",
-    "eslint-config-base": "0.0.1",
+    "dotenv": "^16.3.1",
+    "dotenv-cli": "^7.2.1",
+    "eslint-config-base": "1.0.0",
     "git-cz": "^4.9.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
-    "prettier": "^2.8.4",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
     "shx": "^0.3.4",
-    "turbo": "^1.8.2"
+    "turbo": "^1.10.3"
   }
 }

packages/chackra-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chakra-pagination",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "author": "Gabriel Menezes <gabrielsmenezes99@gmail.com>",
   "license": "MIT",
   "description": "Easy way for paginate anything using Chakra UI.",
@@ -35,34 +35,35 @@
     "release": "./scripts/release.sh",
     "publish": "changeset publish",
     "lint": "eslint src/**/*.ts* --fix",
-    "ts-check": "tsc --noEmit"
+    "ts-check": "tsc --noEmit",
+    "update-deps": "npx npm-check-updates -u"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.4.9",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "framer-motion": "^8.5.0",
+    "@chakra-ui/react": "^2.7.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.12.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.16",
-    "@tanstack/react-table": "^8.7.6",
-    "csstype": "^3.1.1"
+    "@chakra-ui/icons": "^2.0.19",
+    "@tanstack/react-table": "^8.9.2",
+    "csstype": "^3.1.2"
   },
   "devDependencies": {
-    "@chakra-ui/react": "^2.4.9",
-    "@changesets/cli": "^2.26.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@chakra-ui/react": "^2.7.0",
+    "@changesets/cli": "^2.26.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
     "check-export-map": "^1.3.0",
-    "framer-motion": "^8.5.0",
+    "framer-motion": "^10.12.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "release-it": "15.6.0",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.3"
+    "release-it": "15.11.0",
+    "tsup": "^7.0.0",
+    "typescript": "^5.1.3"
   }
 }

packages/chackra-pagination/src/components/List.tsx

@@ -1,14 +1,13 @@
 import {
   Box,
   List as ChakraList,
-  ListIcon,
   ListItem as ChakraListItem,
   ListProps as ChakraListProps,
+  ListIcon,
   OrderedList,
   Text,
   UnorderedList,
 } from '@chakra-ui/react';
-import React from 'react';
 
 import { usePagination } from '../hooks/usePagination';
 
@@ -27,7 +26,6 @@ export function List({
   items,
   listStyle: style = 'none',
   onPageChange,
-  page,
   totalRegisters,
   ...props
 }: ListProps) {
@@ -40,7 +38,7 @@ export function List({
 
   const { pageItems, ...pagination } = usePagination({
     items,
-    page,
+    page: 0,
     totalRegisters,
   });
 

packages/chackra-pagination/src/components/Pagination.tsx

@@ -1,5 +1,4 @@
 import { Stack, Text, ThemeTypings } from '@chakra-ui/react';
-import React from 'react';
 
 import { PaginationItem } from './PaginationItem';
 
@@ -23,15 +22,16 @@ export function Pagination({
   colorScheme,
 }: PaginationProps) {
   return (
-    <Stack direction="row" mt="8" justify="flex-end" align="center" spacing="6">
-      <Stack direction="row" spacing="4">
+    <Stack direction="row" mt="8" justify="flex-end" align="center" spacing={6}>
+      <Stack direction="row" spacing={4}>
         {currentPage > 1 + siblingsCount ? (
           <>
             <PaginationItem
               colorScheme={colorScheme}
               onPageChange={onPageChange}
               page={1}
             />
+
             {currentPage > 2 + siblingsCount ? (
               <Text color="gray.300" w="8" textAlign="center">
                 ...

packages/chackra-pagination/src/components/Table.tsx

@@ -1,22 +1,22 @@
 import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
 import {
   Box,
-  chakra,
   Table as ChakraTable,
   Tbody,
   Td,
   Th,
   Thead,
   ThemeTypings,
   Tr,
+  chakra,
 } from '@chakra-ui/react';
 import {
   ColumnDef,
+  PaginationState,
+  SortingState,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
-  PaginationState,
-  SortingState,
   useReactTable,
 } from '@tanstack/react-table';
 import * as React from 'react';
@@ -58,24 +58,32 @@ interface TableProps<Data extends object> extends Partial<BasePagination> {
 export function Table<Data extends object>({
   data,
   columns,
-  page = 0,
+  initialPage = 1,
   itemsPerPage = 10,
   emptyData = {},
   onPageChange = () => {},
   colorScheme = 'teal',
   totalRegisters = data.length,
   sortIcons = { up: TriangleUpIcon, down: TriangleDownIcon },
 }: TableProps<Data>) {
+  const realTotalRegisters = React.useMemo(() => {
+    if (totalRegisters > data.length) {
+      return data.length;
+    }
+
+    return totalRegisters;
+  }, [data.length, totalRegisters]);
+
   const [{ pageIndex, pageSize }, setPagination] =
     React.useState<PaginationState>({
-      pageIndex: page,
+      pageIndex: initialPage - 1,
       pageSize: itemsPerPage,
     });
 
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
   const paginationState = usePagination<Data>({
-    totalRegisters,
+    totalRegisters: realTotalRegisters,
     page: pageIndex + 1,
     items: data,
     itemsPerPage: pageSize,

packages/chackra-pagination/src/types/Pagination.ts

@@ -21,10 +21,13 @@ export type Pagination<I> = {
 };
 
 export interface BasePagination {
-  page: number;
   /**
-   * If you paginate your list in server use this
-   * prop to pass the total length of list.
+   * Initial page of pagination.
+   * @default 1
+   */
+  initialPage: number;
+  /**
+    Control registers to show
    */
   totalRegisters: number;
   /** Listener change page */