@campxdev/shared 1.11.36 → 1.11.37

package/package.json

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

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

@@ -9,13 +9,19 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  TextField,
   Typography,
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
-import TableFooter from '../BasicTable/TableFooter'
+import TableStats from '../common/TableStats'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-import { StyledLimitBox, StyledLimitMenu } from '../common/styles'
+import {
+  StyledLimitBox,
+  StyledLimitMenu,
+  StyledPagination,
+  StyledTableFooter,
+} from '../common/styles'
 import { ColumnProps, Sort, TableProps } from '../common/types'
 import BatchActionsHeader from './BatchActionsHeader'
 import { RenderTableBody } from './RenderTableBody'
@@ -226,14 +232,43 @@ export default function ReactTable({
         />
       </Table>
       {pagination && dataSource && !loading && (
-        <TableFooter
-          page={pagination.page + 1}
-          limit={pagination.limit}
-          totalCount={pagination.totalCount ?? 0}
-          handlePagination={pagination.onChange}
-          handlePageLimit={pagination.onChangeLimit}
-          handlePageInput={pagination.handlePageInput}
-        />
+        <StyledTableFooter>
+          <TableStats
+            limit={pageSize}
+            page={pageIndex + 1}
+            totalCount={pageCount}
+          />
+          <StyledPagination
+            variant="outlined"
+            shape="rounded"
+            onChange={handlePagination}
+            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>
       )}
     </>
   )