feat(react-grid): Ability to show all rows on a page via page size selector

gulpfile.js

@@ -63,6 +63,7 @@ gulp.task('site:docs', function() {
       'packages/**/*.md',
       '!packages/**/LICENSE.md',
       '!packages/dx-react-demos/**/*',
+      '!packages/dx-testing/**/*',
       '!/**/node_modules/**/*'
     ])
     .pipe(rename(function(path) {

packages/dx-grid-core/src/plugins/paging-state/computeds.js

@@ -1,8 +1,16 @@
-export const paginate = (rows, pageSize, page) =>
-  rows.slice(pageSize * page, pageSize * (page + 1));
+const ALL_PAGES_TITLE = 'All';
+
+export const paginate = (rows, pageSize, page) => (
+  pageSize ?
+    rows.slice(pageSize * page, pageSize * (page + 1)) :
+    rows
+);
 
 export const ensurePageHeaders = (rows, pageSize) => {
   const result = rows.slice();
+  if (!pageSize) {
+    return result;
+  }
 
   const headers = [];
   let currentIndex = 0;
@@ -27,13 +35,24 @@ export const ensurePageHeaders = (rows, pageSize) => {
   return result;
 };
 
-export const totalPageCount = (rows, pageSize) => Math.ceil(rows.length / pageSize);
+export const totalPageCount = (rows, pageSize) => (
+  pageSize ? Math.ceil(rows.length / pageSize) : 1
+);
 
 export const totalCount = rows => rows.length;
 
-export const firstRowOnPage = (currentPage, pageSize) => (currentPage * pageSize) + 1;
+export const firstRowOnPage = (currentPage, pageSize) => (
+  pageSize ? (currentPage * pageSize) + 1 : 1
+);
 
 export const lastRowOnPage = (currentPage, pageSize, totalRowCount) => {
-  const index = (currentPage + 1) * pageSize;
-  return index > totalRowCount ? totalRowCount : index;
+  let result = totalRowCount;
+  if (pageSize) {
+    const index = (currentPage + 1) * pageSize;
+    result = index > totalRowCount ? totalRowCount : index;
+  }
+
+  return result;
 };
+
+export const pageSizeTitle = pageSize => pageSize || ALL_PAGES_TITLE;

packages/dx-grid-core/src/plugins/paging-state/computeds.test.js

@@ -5,6 +5,7 @@ import {
     totalCount,
     firstRowOnPage,
     lastRowOnPage,
+    pageSizeTitle,
 } from './computeds';
 
 describe('PagingState computeds', () => {
@@ -20,6 +21,9 @@ describe('PagingState computeds', () => {
 
       page = paginate(rows, 2, 3);
       expect(page).toEqual([]);
+
+      page = paginate(rows, 0, 1);
+      expect(page).toEqual(rows);
     });
   });
 
@@ -141,12 +145,31 @@ describe('PagingState computeds', () => {
       expect(computedRows[3]).toBe(rows[3]);
       expect(computedRows[4]).toBe(rows[4]);
     });
+
+    it('should work if pageSize is \'all\'', () => {
+      const rows = [
+        { a: 1, _headerKey: 'a' },
+        { a: 2 },
+        { a: 3 },
+        { a: 4 },
+      ];
+
+      const computedRows = ensurePageHeaders(rows, 0);
+      expect(computedRows).toHaveLength(4);
+      expect(computedRows[0]).toBe(rows[0]);
+      expect(computedRows[1]).toBe(rows[1]);
+      expect(computedRows[2]).toBe(rows[2]);
+      expect(computedRows[3]).toBe(rows[3]);
+    });
   });
 
   describe('#totalPageCount', () => {
     it('should work', () => {
-      const count = totalPageCount([1, 2, 3], 2);
+      let count = totalPageCount([1, 2, 3], 2);
       expect(count).toEqual(2);
+
+      count = totalPageCount([1, 2, 3], 0);
+      expect(count).toEqual(1);
     });
   });
 
@@ -159,20 +182,36 @@ describe('PagingState computeds', () => {
 
   describe('#firstRowOnPage', () => {
     it('should work', () => {
-      const count = firstRowOnPage(1, 5);
+      let count = firstRowOnPage(1, 5);
       expect(count).toEqual(6);
+
+      count = firstRowOnPage(1, 0);
+      expect(count).toEqual(1);
     });
   });
 
   describe('#lastRowOnPage', () => {
     it('should work', () => {
-      const count = lastRowOnPage(1, 5, 15);
+      let count = lastRowOnPage(1, 5, 15);
       expect(count).toEqual(10);
+
+      count = lastRowOnPage(1, 0, 15);
+      expect(count).toEqual(15);
     });
 
     it('should not be greater than total count', () => {
       const count = lastRowOnPage(1, 5, 9);
       expect(count).toEqual(9);
     });
   });
+
+  describe('#pageSizeTitle', () => {
+    it('should work', () => {
+      let title = pageSizeTitle(10);
+      expect(title).toEqual(10);
+
+      title = pageSizeTitle(0);
+      expect(title).toEqual('All');
+    });
+  });
 });

packages/dx-react-demos/src/bootstrap3/paging/page-size-selector.jsx

@@ -24,7 +24,7 @@ export class PageSizeSelectorDemo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 60 }),
-      allowedPageSizes: [5, 10, 15],
+      allowedPageSizes: [5, 10, 15, 0],
     };
   }
 

packages/dx-react-demos/src/material-ui/paging/page-size-selector.jsx

@@ -24,7 +24,7 @@ export class PageSizeSelectorDemo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 60 }),
-      allowedPageSizes: [5, 10, 15],
+      allowedPageSizes: [5, 10, 15, 0],
     };
   }
 

packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { pageSizeTitle } from '@devexpress/dx-grid-core';
 
 export const PageSizeSelector = ({ pageSize, onPageSizeChange, allowedPageSizes }) => (
   <div style={{ display: 'inline-block' }}>
@@ -9,7 +10,7 @@ export const PageSizeSelector = ({ pageSize, onPageSizeChange, allowedPageSizes
       value={pageSize}
       onChange={e => onPageSizeChange(parseInt(e.target.value, 10))}
     >
-      {allowedPageSizes.map(val => <option key={val} value={val}>{val}</option>)}
+      {allowedPageSizes.map(val => <option key={val} value={val}>{pageSizeTitle(val)}</option>)}
     </select>
     <ul
       className="pagination hidden-xs"
@@ -28,7 +29,7 @@ export const PageSizeSelector = ({ pageSize, onPageSizeChange, allowedPageSizes
               onPageSizeChange(item);
             }}
           >
-            {item}
+            {pageSizeTitle(item)}
           </a>
           {/* eslint-enable jsx-a11y/href-no-hash */}
         </li>

packages/dx-react-grid-material-ui/src/templates/drop-down-menu.jsx

@@ -35,14 +35,13 @@ class DropDownMenuBase extends React.PureComponent {
 
   constructor(props) {
     super(props);
-
-    const selectedItem = this.props.selectedItem;
+    const { selectedItem, items, defaultTitle } = this.props;
 
     this.state = {
       anchorEl: undefined,
       open: false,
-      selectedIndex: this.props.items.findIndex(item => item === selectedItem),
-      title: this.props.defaultTitle || selectedItem,
+      selectedIndex: items.findIndex(item => item === selectedItem),
+      title: defaultTitle || selectedItem,
     };
 
     this.handleClick = this.handleClick.bind(this);
@@ -55,12 +54,17 @@ class DropDownMenuBase extends React.PureComponent {
   }
 
   handleMenuItemClick(event, index) {
-    let title = this.props.items[index];
-    if (index === 0 && this.props.defaultTitle) {
-      title = this.props.defaultTitle;
+    const { items, defaultTitle, itemTemplate, onItemClick } = this.props;
+    let title = items[index];
+
+    if (index === 0 && defaultTitle) {
+      title = defaultTitle;
+    } else if (itemTemplate) {
+      title = itemTemplate(title);
     }
 
-    this.props.onItemClick(title, index);
+    onItemClick(items[index], index);
+
     this.setState({
       selectedIndex: index,
       open: false,
@@ -73,7 +77,7 @@ class DropDownMenuBase extends React.PureComponent {
   }
 
   render() {
-    const { items, classes, className } = this.props;
+    const { items, classes, className, itemTemplate } = this.props;
     const { anchorEl, open, selectedIndex, title } = this.state;
     const titleClasses = classNames({
       [classes.title]: true,
@@ -106,7 +110,7 @@ class DropDownMenuBase extends React.PureComponent {
               selected={index === selectedIndex}
               onClick={event => this.handleMenuItemClick(event, index)}
             >
-              {item}
+              {itemTemplate ? itemTemplate(item) : item}
             </MenuItem>
           ))}
         </Menu>
@@ -130,13 +134,15 @@ DropDownMenuBase.propTypes = {
   ])).isRequired,
   classes: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
+  itemTemplate: PropTypes.func,
   className: PropTypes.string,
 };
 
 DropDownMenuBase.defaultProps = {
   className: null,
   selectedItem: undefined,
   defaultTitle: undefined,
+  itemTemplate: undefined,
 };
 
 export const DropDownMenu = withStyles(styleSheet)(DropDownMenuBase);

packages/dx-react-grid-material-ui/src/templates/page-size-selector.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { pageSizeTitle } from '@devexpress/dx-grid-core';
 import { DropDownMenu } from './drop-down-menu';
 
 const styleSheet = createStyleSheet('PageSizeSelector', theme => ({
@@ -23,7 +24,7 @@ const styleSheet = createStyleSheet('PageSizeSelector', theme => ({
     },
     pageSizeSelector: {
       paddingRight: theme.spacing.unit * 2,
-      marginTop: 4,
+      marginTop: theme.spacing.unit,
     },
   },
 }));
@@ -36,6 +37,7 @@ const PageSizeSelectorBase = ({ pageSize, onPageSizeChange, allowedPageSizes, cl
     <DropDownMenu
       selectedItem={pageSize}
       items={allowedPageSizes}
+      itemTemplate={pageSizeTitle}
       onItemClick={(item) => {
         onPageSizeChange(item);
       }}

packages/dx-react-grid-material-ui/src/templates/pagination.jsx

@@ -15,6 +15,7 @@ export const paginationStyleSheet = createStyleSheet('Pagination', theme => ({
   rowsLabel: {
     ...theme.typography.caption,
     paddingRight: theme.spacing.unit * 5,
+    lineHeight: `${theme.spacing.unit * 5}px`,
   },
   button: {
     minWidth: theme.spacing.unit * 2,

packages/dx-react-grid/docs/guides/paging.md

@@ -25,7 +25,7 @@ In the following example, we use the uncontrolled mode and specify only the init
 
 ## Page Size Selection
 
-To enable page size selection, specify the `allowedPageSizes` property of the `PagingPanel` plugin.
+To enable page size selection, specify the `allowedPageSizes` property of the `PagingPanel` plugin. To show all rows on a page you can use `0` as one of the `allowedPageSizes` values.
 
 The example below demonstrates the basic configuration for the uncontrolled mode. The `defaultPageSize` property of the `PagingState` plugin is used to define the initial page size.
 

packages/dx-react-grid/docs/reference/paging-state.md

@@ -16,7 +16,7 @@ totalCount | number | | Specifies the total rows count
 currentPage | number | | Specifies the current page number
 defaultCurrentPage | number | 0 | Specifies the initial current page for the uncontrolled mode
 onCurrentPageChange | (currentPage: number) => void | | Handles current page changes
-pageSize | number | | Specifies the page size
+pageSize | number | | | Specifies the page size
 defaultPageSize | number | 10 | Specifies the initial page size for the uncontrolled mode
 onPageSizeChange | (pageSize: number) => void | | Handles page size changes
 

packages/dx-react-grid/src/plugins/paging-panel.jsx

@@ -30,7 +30,7 @@ export const PagingPanel = ({ pagerTemplate, allowedPageSizes }) => (
 );
 
 PagingPanel.propTypes = {
-  allowedPageSizes: PropTypes.arrayOf(PropTypes.number),
+  allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
   pagerTemplate: PropTypes.func.isRequired,
 };
 

packages/dx-react-grid/src/plugins/paging-state.jsx

@@ -44,7 +44,10 @@ export class PagingState extends React.PureComponent {
 
         <Getter name="currentPage" value={currentPage} />
         <Getter name="pageSize" value={pageSize} />
-        <Getter name="totalPages" value={Math.max(1, Math.ceil(totalCount / pageSize))} />
+        <Getter
+          name="totalPages"
+          value={pageSize ? Math.max(1, Math.ceil(totalCount / pageSize)) : 1}
+        />
         <Getter name="totalCount" value={totalCount || 0} />
       </PluginContainer>
     );