@campxdev/shared 1.11.35 → 1.11.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.35",
+  "version": "1.11.36",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Tables/BasicTable/Table.tsx

@@ -48,6 +48,7 @@ interface TableProps<T> {
     totalCount: number
     onChange: (v: number) => void
     onChangeLimit?: (v: number) => void
+    handlePageInput?: (v: number) => void
   }
   onSort?: (sort: any) => void
   dense?: boolean
@@ -274,6 +275,7 @@ export default function Table<T>({
             totalCount={pagination.totalCount ?? 0}
             handlePagination={pagination.onChange}
             handlePageLimit={pagination.onChangeLimit}
+            handlePageInput={pagination.handlePageInput}
           />
         )}
       </>

package/src/components/Tables/BasicTable/TableFooter.tsx

@@ -1,7 +1,8 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import DropDownButton from '../../DropDownButton/DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../common/styles'
+import { TextField } from '../../Input'
 import TableStats from '../common/TableStats'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
 
 interface TableFooterProps {
   totalCount: number
@@ -9,6 +10,7 @@ interface TableFooterProps {
   handlePagination: (v: number) => void
   page: number
   handlePageLimit?: (v: number) => void
+  handlePageInput?: (v: number) => void
 }
 
 export default function TableFooter({
@@ -17,6 +19,7 @@ export default function TableFooter({
   handlePagination,
   page,
   handlePageLimit,
+  handlePageInput,
 }: TableFooterProps) {
   const onChange = (v: number) => {
     handlePagination(v)
@@ -24,13 +27,36 @@ export default function TableFooter({
   return (
     <StyledTableFooter>
       <TableStats limit={limit} totalCount={totalCount} page={page} />
-      <StyledPagination
-        page={page}
-        count={Math.ceil(totalCount / limit)}
-        onChange={(e, v) => onChange(v)}
-        variant="outlined"
-        shape="rounded"
-      />
+      <Stack direction={'row'} gap={2} alignItems={'center'}>
+        <StyledPagination
+          page={page}
+          count={Math.ceil(totalCount / limit)}
+          onChange={(e, v) => onChange(v)}
+          variant="outlined"
+          shape="rounded"
+        />
+
+        {handlePageInput && (
+          <Box
+            sx={{
+              '& .MuiBox-root': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '5px',
+              },
+            }}
+          >
+            <TextField
+              variant="outlined"
+              label={'Page :'}
+              size="small"
+              value={page}
+              onChange={(e) => handlePageInput(Number(e.target.value))}
+              sx={{ width: '80px' }}
+            />
+          </Box>
+        )}
+      </Stack>
       {handlePageLimit ? (
         <LimitField handlePageLimit={handlePageLimit} limit={limit} />
       ) : (

package/src/components/Tables/ReactTable/ReactTable.tsx

@@ -13,14 +13,9 @@ import {
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
-import TableStats from '../common/TableStats'
+import TableFooter from '../BasicTable/TableFooter'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-import {
-  StyledLimitBox,
-  StyledLimitMenu,
-  StyledPagination,
-  StyledTableFooter,
-} from '../common/styles'
+import { StyledLimitBox, StyledLimitMenu } from '../common/styles'
 import { ColumnProps, Sort, TableProps } from '../common/types'
 import BatchActionsHeader from './BatchActionsHeader'
 import { RenderTableBody } from './RenderTableBody'
@@ -231,21 +226,14 @@ export default function ReactTable({
         />
       </Table>
       {pagination && dataSource && !loading && (
-        <StyledTableFooter>
-          <TableStats
-            limit={pageSize}
-            page={pageIndex + 1}
-            totalCount={pageCount}
-          />
-          <StyledPagination
-            variant="outlined"
-            shape="rounded"
-            onChange={handlePagination}
-            count={Math.ceil(pageCount / pageSize)}
-            page={pageIndex + 1}
-          />
-          <Limit pageSize={pageSize} setPageSize={setPageSize} />
-        </StyledTableFooter>
+        <TableFooter
+          page={pagination.page + 1}
+          limit={pagination.limit}
+          totalCount={pagination.totalCount ?? 0}
+          handlePagination={pagination.onChange}
+          handlePageLimit={pagination.onChangeLimit}
+          handlePageInput={pagination.handlePageInput}
+        />
       )}
     </>
   )

package/src/components/Tables/common/types.ts

@@ -25,6 +25,7 @@ export interface TableProps {
     totalCount: number
     onChange: (offset: number) => void
     onChangeLimit?: (v: number) => void
+    handlePageInput?: (v: number) => void
   }
   select?: {
     enable: boolean