Merge pull request #64 from EMCECS/feature-OBSDEF-46737-update-datagr…

…id-stories-for-custom-pageSize [OBSDEF-46737] Update datagrid stories for custom pagesize
EMCECS · Apr 24, 2024 · 07d08b4 · 07d08b4
2 parents 9a4d9f1 + d9d9bd9
commit 07d08b4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/components/dataGrid/DataGrid.stories.tsx b/src/components/dataGrid/DataGrid.stories.tsx
@@ -34,7 +34,8 @@ import {
     getSelectableRowsData,
     sortFunction,
     columnsForCustomRows,
-    paginationRowsWithLinks
+    paginationRowsWithLinks,
+    paginationDetailswithDefaultPageSizes
 } from "./DataGridStoriesData";
 
 const datagridFilterRef = React.createRef<DataGrid>();
@@ -90,6 +91,17 @@ storiesOf("DataGrid", module)
             />
         </div>
     ))
+    .add("Grid with pagination and default pageSizes dropdown", () => (
+        <div style={{width: "80%"}}>
+            <DataGrid
+                columns={normalColumns}
+                rows={paginationRows.slice(0, 10)}
+                pagination={paginationDetailswithDefaultPageSizes}
+                itemText={"Items"}
+                footer={{showFooter: true}}
+            />
+        </div>
+    ))
     .add("Grid with sorting", () => (
         <div style={{width: "80%"}}>
             <DataGrid columns={sortColumns} rows={normalRows} footer={defaultFooter} />

diff --git a/src/components/dataGrid/DataGridStoriesData.tsx b/src/components/dataGrid/DataGridStoriesData.tsx
@@ -217,6 +217,19 @@ export const getPageData = (pageIndex: number, pageSize: number): Promise<DataGr
     });
 };
 
+//Function to get data for page based on customPageSize and page number
+export const getPageDataForCustomPageSize = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {
+    return new Promise((resolve, reject) => {
+        let rows: DataGridRow[] = [];
+        let offset = pageSize * (pageIndex - 1);
+        rows = paginationRows.slice(offset, offset + pageSize);
+
+        setTimeout(function() {
+            resolve(rows);
+        }, 2000);
+    });
+};
+
 const cellData = [
     ['192.168.0.1', "xyz", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"],
     ['192.168.0.1', "abc", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"],
@@ -271,7 +284,13 @@ export const paginationDetails = {
     totalItems: paginationRows.length,
     getPageData: getPageData,
     pageSize: 5,
-    pageSizes: [5, 10],
+    pageSizes: ["5", "10"],
+};
+
+export const paginationDetailswithDefaultPageSizes = {
+    totalItems: paginationRows.length,
+    getPageData: getPageDataForCustomPageSize,
+    pageSize: 10,
 };
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -1337,10 +1337,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@dellstorage/clarity-react@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.1.tgz#c36faddffc307ced3ec78149c566f98669587cde"
-  integrity sha512-bKsT6FUayG88a6XxLIo1VJwL24c82hWQsfpUCIAVYpo1XlMGulc5ryg0b5G3yROh3QXA32ctjutfD4Y6OTwWUQ==
+"@dellstorage/clarity-react@^1.2.12":
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.12.tgz#2fdb064f3fc98775d41c93f7e2927ece61194516"
+  integrity sha512-ueBMht6ZmF2lMmj7jBuMNivXVT5wfK2DEl2igDxzHo4NoCLKUn71nLsvIQxCskQFW8t250Y4p07jQDizYik+GA==
   dependencies:
     "@clr/icons" "12.0.8"
     "@clr/ui" "12.0.8"