Table pagination (#905)

* fix: pagination range end when fewer rows shown than page-size * fix: page size change glitch Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · May 22, 2020 · 33a2893 · 33a2893
1 parent 6cd7dce
commit 33a2893
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 7 deletions.
diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -151,6 +151,7 @@
       v-if="pagination"
       v-bind="internalPagination"
       :number-of-items="internalNumberOfItems"
+      :actual-items-on-page="this.registeredRows.length"
       @change="$emit('pagination', $event)"
     >
       <template v-slot:range-text="{ scope }">

diff --git a/packages/core/src/components/cv-pagination/cv-pagination-notes.md b/packages/core/src/components/cv-pagination/cv-pagination-notes.md
@@ -30,6 +30,7 @@ Minimal
 - page-number-label: Hidden label for page number select. Defaults to "Page number"
 - page-sizes-label: label for page size select. Defaults to "Items per page:"
 - number-of-items: Number of items accross all pages, defaults to Infinity
+- actual-items-on-page: Number of items actually displayed which will trim the range value in the case where less rows than page-size are shown.
 - page-sizes: Array of page size values.
   Defaults to [10, 20, 30, 40, 50]
   - By default the first page size is selected. This can be augmented by passing an object instead of a number e.g.

diff --git a/packages/core/src/components/cv-pagination/cv-pagination.vue b/packages/core/src/components/cv-pagination/cv-pagination.vue
@@ -131,6 +131,7 @@ export default {
     pageNumberLabel: { type: String, default: 'Page number:' },
     pageSizesLabel: { type: String, default: 'Items per page:' },
     numberOfItems: { type: Number, default: Infinity },
+    actualItemsOnPage: { type: Number, default: Infinity },
     page: Number,
     pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
   },
@@ -164,7 +165,9 @@ export default {
       this.pageValue = newPageValue(this.page, this.pageCount);
       this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
     },
-    pageSizes() {
+    pageSizes(a, b) {
+      if (!a.some(item => !b.includes(item))) return; // /possible issue when pageSizes defined in DOM
+
       this.pageSizeValue = newPageSizeValue(this.pageSizes);
       this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
       this.pages = newPagesArray(this.pageCount);
@@ -197,7 +200,10 @@ export default {
     rangeProps() {
       return {
         start: Math.min(this.firstItem, this.numberOfItems),
-        end: Math.min(this.firstItem + parseInt(this.pageSizeValue, 10) - 1, this.numberOfItems),
+        end: Math.min(
+          this.firstItem + Math.min(parseInt(this.pageSizeValue, 10), this.actualItemsOnPage) - 1,
+          this.numberOfItems
+        ),
         items: this.numberOfItems,
       };
     },

diff --git a/storybook/stories/cv-data-table-story.js b/storybook/stories/cv-data-table-story.js
@@ -144,8 +144,18 @@ let preKnobs = {
           ['Load Balancer 11', 'HTTP', '80', 'Round Robin', 'Maureen’s VM Groups', 'Active'],
           ['Load Balancer 4', 'HTTP', '81', 'Round Robin', 'Maureen’s VM Groups', 'Active'],
           ['Load Balancer 2', 'HTTP', '82', 'Round Robin', 'Maureen’s VM Groups', 'Active'],
-          ['Load Balancer 3', 'HTTP', '8080', 'Round Robin', 'Maureen’s VM Groups', 'Active'],
+          ['Load Balancer 3', 'HTTP', '8080', 'Round Robin', 'Maureen’s VM Groups', 'Offline'],
           ['Load Balancer 5', 'HTTP', '8001', 'Round Robin', 'Maureen’s VM Groups', 'Active'],
+          ['Load Balancer 11', 'HTTP', '10', 'Round Robin', 'Max’s VM Groups', 'Active'],
+          ['Load Balancer 24', 'HTTP', '11', 'Round Robin', 'Max’s VM Groups', 'Active'],
+          ['Load Balancer 22', 'HTTP', '12', 'Round Robin', 'Max’s VM Groups', 'Active'],
+          ['Load Balancer 23', 'HTTP', '1080', 'Round Robin', 'Max’s VM Groups', 'Active'],
+          ['Load Balancer 25', 'HTTP', '1001', 'Round Robin', 'Max’s VM Groups', 'Failed'],
+          ['Load Balancer 311', 'HTTP', '280', 'Round Robin', 'John’s VM Groups', 'Active'],
+          ['Load Balancer 324', 'HTTP', '281', 'Round Robin', 'John’s VM Groups', 'Active'],
+          ['Load Balancer 322', 'HTTP', '282', 'Round Robin', 'John’s VM Groups', 'Offline'],
+          ['Load Balancer 323', 'HTTP', '2080', 'Round Robin', 'John’s VM Groups', 'Active'],
+          ['Load Balancer 325', 'HTTP', '2001', 'Round Robin', 'John’s VM Groups', 'Active'],
         ],
       },
     ],
@@ -168,7 +178,11 @@ let preKnobs = {
   },
   pagination: {
     group: 'attr',
-    value: ':pagination="{ numberOfItems: 23, pageSizes: [5, 10, 15, 20, 25] }" @pagination="actionOnPagination"',
+    value: ':pagination="{ numberOfItems: 23, pageSizes: [5, 10, 15, 20, 25]  }" @pagination="actionOnPagination"',
+  },
+  paginationInfinity: {
+    group: 'attr',
+    value: ':pagination="{ numberOfItems: Infinity, pageSizes: [5, 10, 15, 20, 25] }" @pagination="actionOnPagination"',
   },
   rowSelects: {
     group: 'attr',
@@ -327,6 +341,26 @@ let variants = [
       'htmlData',
       'helperTextSlot',
       'basicPagination',
+      'paginationInfinity',
+      'hasExpandingRows',
+      'expandingSlottedData',
+      'rowExpanded',
+      'scopedSlots',
+      'hasExpandAll',
+    ],
+  },
+  {
+    name: 'infinite pagination',
+    excludes: [
+      'search2',
+      'columns2',
+      'columns3',
+      'slottedHeadings',
+      'slottedData',
+      'htmlData',
+      'helperTextSlot',
+      'basicPagination',
+      'pagination',
       'hasExpandingRows',
       'expandingSlottedData',
       'rowExpanded',
@@ -347,6 +381,7 @@ let variants = [
       'htmlData',
       'helperTextSlot',
       'basicPagination',
+      'paginationInfinity',
       'hasExpandingRows',
       'expandingSlottedData',
       'rowExpanded',
@@ -369,6 +404,7 @@ let variants = [
       'htmlData',
       'helperTextSlot',
       'basicPagination',
+      'paginationInfinity',
       'hasExpandingRows',
       'expandingSlottedData',
       'rowExpanded',
@@ -387,6 +423,7 @@ let variants = [
       'htmlData',
       'helperTextSlot',
       'basicPagination',
+      'paginationInfinity',
       'hasExpandingRows',
       'expandingSlottedData',
       'rowExpanded',
@@ -465,6 +502,9 @@ for (const story of storySet) {
             rowSelects: [],
             sortBy: undefined,
             sampleOverflowMenu: ['Start', 'Stop', 'Delete 3'],
+            pageStart: 1,
+            pageNumber: 1,
+            pageLength: 5,
           };
         },
         watch: {
@@ -474,13 +514,19 @@ for (const story of storySet) {
         },
         computed: {
           filteredData() {
+            let filteredData;
             if (this.filterValue) {
               const regex = new RegExp(this.filterValue, 'i');
-              return this.internalData.filter(item => {
+              filteredData = this.internalData.filter(item => {
                 return item.join('|').search(regex) >= 0;
               });
             } else {
-              return this.internalData;
+              filteredData = this.internalData;
+            }
+            if (this.pageStart) {
+              return filteredData.slice(this.pageStart, this.pageStart + this.pageLength);
+            } else {
+              return filteredData;
             }
           },
         },
@@ -533,7 +579,13 @@ for (const story of storySet) {
           action2: action('action 2'),
           action3: action('action 3'),
           actionNew: action('add new'),
-          actionOnPagination: action('pagination change'),
+          paginationAction: action('pagination change'),
+          actionOnPagination(ev) {
+            this.paginationAction();
+            this.pageStart = ev.start;
+            this.pageNumber = ev.page;
+            this.pageLength = ev.length;
+          },
           onOverflowMenuClick: action('overflow menu click'),
           actionRowSelectChange: action('row selected'),
         },