@campxdev/shared 1.11.35 → 1.11.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.35",
+  "version": "1.11.37",
   "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

@@ -9,6 +9,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  TextField,
   Typography,
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
@@ -244,6 +245,28 @@ export default function ReactTable({
             count={Math.ceil(pageCount / pageSize)}
             page={pageIndex + 1}
           />
+          {pagination.handlePageInput && (
+            <Box
+              sx={{
+                '& .MuiBox-root': {
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                },
+              }}
+            >
+              <TextField
+                variant="outlined"
+                label={'Page :'}
+                size="small"
+                value={pageIndex + 1}
+                onChange={(e) =>
+                  pagination.handlePageInput(Number(e.target.value))
+                }
+                sx={{ width: '80px' }}
+              />
+            </Box>
+          )}
           <Limit pageSize={pageSize} setPageSize={setPageSize} />
         </StyledTableFooter>
       )}

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