[OBSDEF-44980] Show pagination footer with page sizes dropdown only if number of records are greater than 10

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dellstorage/clarity-react",
-    "version": "1.2.12",
+    "version": "1.2.13",
     "description": "React components for Clarity UI",
     "license": "Apache-2.0",
     "private": false,

src/datagrid/DataGrid.stories.tsx

@@ -48,6 +48,7 @@ import {
     paginationRowsWithLinks,
     storeForDetailPane,
     paginationDetailswithPageSizes,
+    paginationDetailsForLessThan10Records,
 } from "./DataGridStoriesData";
 import {CustomFilter} from "./CustomFilter";
 import {CustomFilterMulti} from "./CustomFilterMulti";
@@ -421,14 +422,26 @@ storiesOf("DataGrid", module)
         </div>
     ))
     .add("Grid with pagination and custom page size", () => (
-        <div style={{width: "80%"}}>
+        <div style={{width: "80%", paddingLeft: "1rem"}}>
+            <br />
+            <span> {"Datagrid with custom page sizes and more than or equal to 10 records."} </span>
             <DataGrid
                 columns={normalColumns}
                 rows={paginationRows.slice(0, 10)}
                 pagination={paginationDetailswithPageSizes}
                 itemText={"Users"}
                 footer={{showFooter: true}}
             />
+            <br /> <br />
+            <span> {"Datagrid with custom page sizes and less than 10 records."} </span>
+            <DataGrid
+                columns={normalColumns}
+                rows={paginationRows.slice(0, 6)}
+                pagination={paginationDetailsForLessThan10Records}
+                itemText={"Users"}
+                footer={{showFooter: true}}
+            />
+            <br /> <br />
         </div>
     ))
     .add("Grid with pagination and compact footer", () => (

src/datagrid/DataGrid.tsx

@@ -1721,7 +1721,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
             const {totalItems, pageSize, pageSizes} = pagination;
             if (totalItems && pageSize) {
                 // Render pagination footer if pageSizes are given or if totalItems are greater than pageSize
-                renderPaginationFooter = pageSizes ? totalItems > 0 : totalItems >= pageSize;
+                renderPaginationFooter = pageSizes ? totalItems >= DEFAULT_PAGE_SIZE : totalItems >= pageSize;
             }
         }
 

src/datagrid/DataGridStoriesData.tsx

@@ -604,6 +604,14 @@ export const paginationDetailswithPageSizes: DataGridPaginationProps = {
     pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
 };
 
+export const paginationDetailsForLessThan10Records: DataGridPaginationProps = {
+    totalItems: 6,
+    getPageData: getPageDataForCustomPageSize,
+    pageSize: 10,
+    currentPage: 1,
+    pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
+};
+
 export const paginationDetailsWithCompactFooter: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageData,