From 2c593b95dd34d58315fc0094453d89eff26bb03a Mon Sep 17 00:00:00 2001
From: Sina Javaheri <sinajavaheri@gmail.com>
Date: Tue, 15 Oct 2024 14:28:25 +0200
Subject: [PATCH] fix(inventory-table): fix pagination not show on less than 2
 pages

---
 .../panel/inventory/DataGridPagination.tsx    | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/pages/panel/inventory/DataGridPagination.tsx b/src/pages/panel/inventory/DataGridPagination.tsx
index 4050b976..bd539205 100644
--- a/src/pages/panel/inventory/DataGridPagination.tsx
+++ b/src/pages/panel/inventory/DataGridPagination.tsx
@@ -18,51 +18,53 @@ export const DataGridPagination = () => {
   const total = useGridSelector(apiRef, gridRowCountSelector)
 
   return (
-    <Stack direction="row" spacing={3} alignItems="center">
-      <Typography variant="subtitle1" fontWeight={500}>
+    <Stack direction="row" spacing={3} alignItems="center" flexWrap="nowrap" overflow="auto" maxWidth="100%">
+      <Typography variant="subtitle1" fontWeight={500} whiteSpace="nowrap">
         {page * size}-{(page + 1) * size > total ? total : (page + 1) * size}{' '}
         <Typography component="span" variant="subtitle1" fontWeight={400} color="textSecondary">
           <Trans>of {total} results</Trans>
         </Typography>
       </Typography>
-      <Pagination
-        color="primary"
-        variant="outlined"
-        shape="rounded"
-        page={page + 1}
-        count={pageCount}
-        renderItem={(props2) => {
-          return ['start-ellipsis', 'end-ellipsis', 'page'].includes(props2.type) ? (
-            <PaginationItem
-              {...props2}
-              sx={{
-                borderRadius: '50%',
-                borderColor: 'transparent',
-                color: 'primary.main',
-                [`&.Mui-selected`]: {
-                  bgcolor: 'primary.main',
-                  color: 'common.white',
-                },
-              }}
-            />
-          ) : ['next', 'previous'].includes(props2.type) ? (
-            <Button
-              sx={{
-                ml: props2.type === 'next' ? 3 : 0,
-                mr: props2.type === 'next' ? 0 : 3,
-              }}
-              variant={props2.type === 'next' ? 'contained' : 'outlined'}
-              startIcon={props2.type === 'next' ? null : <ArrowBackIcon />}
-              endIcon={props2.type === 'next' ? <ArrowForwardIcon /> : null}
-              onClick={props2.onClick}
-              disabled={props2.disabled}
-            >
-              {props2.type === 'next' ? <Trans>Next</Trans> : <Trans>Previous</Trans>}
-            </Button>
-          ) : null
-        }}
-        onChange={(_: unknown, value: number) => apiRef.current.setPage(value - 1)}
-      />
+      {pageCount < 2 ? null : (
+        <Pagination
+          color="primary"
+          variant="outlined"
+          shape="rounded"
+          page={page + 1}
+          count={pageCount}
+          renderItem={(props2) => {
+            return ['start-ellipsis', 'end-ellipsis', 'page'].includes(props2.type) ? (
+              <PaginationItem
+                {...props2}
+                sx={{
+                  borderRadius: '50%',
+                  borderColor: 'transparent',
+                  color: 'primary.main',
+                  [`&.Mui-selected`]: {
+                    bgcolor: 'primary.main',
+                    color: 'common.white',
+                  },
+                }}
+              />
+            ) : ['next', 'previous'].includes(props2.type) ? (
+              <Button
+                sx={{
+                  ml: props2.type === 'next' ? 3 : 0,
+                  mr: props2.type === 'next' ? 0 : 3,
+                }}
+                variant={props2.type === 'next' ? 'contained' : 'outlined'}
+                startIcon={props2.type === 'next' ? null : <ArrowBackIcon />}
+                endIcon={props2.type === 'next' ? <ArrowForwardIcon /> : null}
+                onClick={props2.onClick}
+                disabled={props2.disabled}
+              >
+                {props2.type === 'next' ? <Trans>Next</Trans> : <Trans>Previous</Trans>}
+              </Button>
+            ) : null
+          }}
+          onChange={(_: unknown, value: number) => apiRef.current.setPage(value - 1)}
+        />
+      )}
     </Stack>
   )
 }