diff --git a/gulpfile.js b/gulpfile.js index 9972e0b268..94089b6afc 100644 --- a/gulpfile.js +++ b/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) { diff --git a/packages/dx-grid-core/src/plugins/paging-state/computeds.js b/packages/dx-grid-core/src/plugins/paging-state/computeds.js index 3946e5e42f..5ce2b4c1ba 100644 --- a/packages/dx-grid-core/src/plugins/paging-state/computeds.js +++ b/packages/dx-grid-core/src/plugins/paging-state/computeds.js @@ -1,7 +1,14 @@ -export const paginate = (rows, pageSize, page) => - rows.slice(pageSize * page, pageSize * (page + 1)); +export const paginate = (rows, pageSize, page) => ( + pageSize ? + rows.slice(pageSize * page, pageSize * (page + 1)) : + rows +); export const ensurePageHeaders = (rows, pageSize) => { + if (!pageSize) { + return rows; + } + const result = rows.slice(); const headers = []; @@ -27,13 +34,22 @@ 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; }; diff --git a/packages/dx-grid-core/src/plugins/paging-state/computeds.test.js b/packages/dx-grid-core/src/plugins/paging-state/computeds.test.js index 0bd11f3fef..560c027bc7 100644 --- a/packages/dx-grid-core/src/plugins/paging-state/computeds.test.js +++ b/packages/dx-grid-core/src/plugins/paging-state/computeds.test.js @@ -20,6 +20,9 @@ describe('PagingState computeds', () => { page = paginate(rows, 2, 3); expect(page).toEqual([]); + + page = paginate(rows, 0, 1); + expect(page).toEqual(rows); }); }); @@ -141,12 +144,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,15 +181,21 @@ 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', () => { diff --git a/packages/dx-react-demos/src/bootstrap3/paging/page-size-selector.jsx b/packages/dx-react-demos/src/bootstrap3/paging/page-size-selector.jsx index c39f57ad0d..7461af54e8 100644 --- a/packages/dx-react-demos/src/bootstrap3/paging/page-size-selector.jsx +++ b/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], }; } diff --git a/packages/dx-react-demos/src/material-ui/paging/page-size-selector.jsx b/packages/dx-react-demos/src/material-ui/paging/page-size-selector.jsx index 80487a0f24..6d453a6417 100644 --- a/packages/dx-react-demos/src/material-ui/paging/page-size-selector.jsx +++ b/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], }; } diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx index 005132ddd2..f8c19da365 100644 --- a/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx +++ b/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx @@ -1,13 +1,25 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { PagingPanel as PagingPanelBase } from '@devexpress/dx-react-grid'; import { Pager } from '../templates/pager'; -const pagerTemplate = props => ; - -export const PagingPanel = props => ( +export const PagingPanel = ({ showAllText, ...restProps }) => ( ( + + ) + } + {...restProps} /> ); +PagingPanel.propTypes = { + showAllText: PropTypes.string, +}; +PagingPanel.defaultProps = { + showAllText: undefined, +}; diff --git a/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.jsx b/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.jsx index a464f53523..b333557a7d 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.jsx @@ -1,7 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -export const PageSizeSelector = ({ pageSize, onPageSizeChange, allowedPageSizes }) => ( +export const PageSizeSelector = ({ + pageSize, + onPageSizeChange, + allowedPageSizes, + showAllText, +}) => (
    - {item} + {item || showAllText} {/* eslint-enable jsx-a11y/href-no-hash */} @@ -41,4 +51,10 @@ PageSizeSelector.propTypes = { pageSize: PropTypes.number.isRequired, onPageSizeChange: PropTypes.func.isRequired, allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired, + showAllText: PropTypes.string, }; + +PageSizeSelector.defaultProps = { + showAllText: 'All', +}; + diff --git a/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.test.jsx new file mode 100644 index 0000000000..33dc8a6188 --- /dev/null +++ b/packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.test.jsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { PageSizeSelector } from './page-size-selector'; + +describe('PageSizeSelector', () => { + describe('#render', () => { + const mountPageSizeSelector = ({ + pageSize, + allowedPageSizes, + showAllText, + onPageSizeChange = () => {}, + }) => mount(); + + it('can show info about page sizes', () => { + const tree = mountPageSizeSelector({ + pageSize: 10, + allowedPageSizes: [5, 10], + }); + + const mobileSelector = tree.find('select'); + const desktopSelector = tree.find('ul.pagination'); + const mobileSelectorItems = mobileSelector.find('option'); + const desktopSelectorItems = desktopSelector.find('li'); + + expect(mobileSelector).toHaveLength(1); + expect(mobileSelector.prop('value')).toBe(10); + expect(mobileSelectorItems).toHaveLength(2); + expect(mobileSelectorItems.at(0).prop('value')).toBe(5); + expect(mobileSelectorItems.at(0).text()).toBe('5'); + expect(mobileSelectorItems.at(1).prop('value')).toBe(10); + expect(mobileSelectorItems.at(1).text()).toBe('10'); + + expect(desktopSelector).toHaveLength(1); + expect(desktopSelectorItems).toHaveLength(2); + expect(desktopSelectorItems.at(0).prop('className')).toBe(''); + expect(desktopSelectorItems.at(0).text()).toBe('5'); + expect(desktopSelectorItems.at(1).prop('className')).toBe('active'); + expect(desktopSelectorItems.at(1).text()).toBe('10'); + }); + + it('can render the \'All\' item', () => { + const tree = mountPageSizeSelector({ + pageSize: 10, + allowedPageSizes: [5, 10, 0], + }); + + const mobileSelector = tree.find('select'); + const desktopSelector = tree.find('ul.pagination'); + const mobileSelectorItems = mobileSelector.find('option'); + const desktopSelectorItems = desktopSelector.find('li'); + + expect(mobileSelectorItems).toHaveLength(3); + expect(mobileSelectorItems.at(2).prop('value')).toBe(0); + expect(mobileSelectorItems.at(2).text()).toBe('All'); + + expect(desktopSelectorItems).toHaveLength(3); + expect(desktopSelectorItems.at(2).text()).toBe('All'); + }); + + it('can customize the \'All\' item text', () => { + const tree = mountPageSizeSelector({ + pageSize: 10, + allowedPageSizes: [5, 10, 0], + showAllText: 'Show all', + }); + + const mobileSelector = tree.find('select'); + const desktopSelector = tree.find('ul.pagination'); + + expect(mobileSelector.find('option').at(2).text()).toBe('Show all'); + expect(desktopSelector.find('li').at(2).text()).toBe('Show all'); + }); + + it('can handle the \'onPageSizeChange\' event', () => { + const onPageSizeChange = jest.fn(); + const tree = mountPageSizeSelector({ + pageSize: 5, + allowedPageSizes: [5, 10], + onPageSizeChange, + }); + + const mobileSelector = tree.find('select'); + const desktopSelector = tree.find('ul.pagination'); + + mobileSelector.simulate('change', { target: { value: 10 } }); + desktopSelector.find('li > a').at(0).simulate('click'); + + expect(onPageSizeChange.mock.calls[0][0]).toBe(10); + expect(onPageSizeChange.mock.calls[1][0]).toBe(5); + }); + }); +}); diff --git a/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx b/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx index 679153697f..dd08e1c8df 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx @@ -12,12 +12,14 @@ export const Pager = ({ onPageSizeChange, allowedPageSizes, totalCount, + showAllText, }) => (
    {!!allowedPageSizes.length && } { totalPages, pageSize, totalCount, + showAllText, allowedPageSizes = [], onPageSizeChange = () => {}, onCurrentPageChange = () => {}, @@ -17,6 +18,7 @@ describe('Pager', () => { currentPage={currentPage} totalCount={totalCount} pageSize={pageSize} + showAllText={showAllText} allowedPageSizes={allowedPageSizes} onCurrentPageChange={onCurrentPageChange} onPageSizeChange={onPageSizeChange} @@ -96,5 +98,30 @@ describe('Pager', () => { expect(next.hasClass('disabled')).toBeTruthy(); expect(onCurrentPageChange.mock.calls).toHaveLength(1); }); + + it('renders page selector', () => { + const pageSizeSelector = mountPager({ + totalPages: 10, + currentPage: 9, + totalCount: 96, + pageSize: 5, + allowedPageSizes: [5, 10], + showAllText: 'Show all', + }).find('PageSizeSelector'); + + expect(pageSizeSelector).toHaveLength(1); + expect(pageSizeSelector.at(0).prop('showAllText')).toBe('Show all'); + }); + + it('doesn\'t render page selector if the allowedPageSizes option is not defined ', () => { + const pageSizeSelector = mountPager({ + totalPages: 10, + currentPage: 9, + totalCount: 96, + pageSize: 5, + }).find('PageSizeSelector'); + + expect(pageSizeSelector).toHaveLength(0); + }); }); }); diff --git a/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx b/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx index 005132ddd2..f8c19da365 100644 --- a/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx +++ b/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx @@ -1,13 +1,25 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { PagingPanel as PagingPanelBase } from '@devexpress/dx-react-grid'; import { Pager } from '../templates/pager'; -const pagerTemplate = props => ; - -export const PagingPanel = props => ( +export const PagingPanel = ({ showAllText, ...restProps }) => ( ( + + ) + } + {...restProps} /> ); +PagingPanel.propTypes = { + showAllText: PropTypes.string, +}; +PagingPanel.defaultProps = { + showAllText: undefined, +}; diff --git a/packages/dx-react-grid-material-ui/src/templates/drop-down-menu.jsx b/packages/dx-react-grid-material-ui/src/templates/drop-down-menu.jsx index 83275d8e91..d2a55b634d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/drop-down-menu.jsx +++ b/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, itemTemplate } = 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 || (itemTemplate ? itemTemplate(selectedItem) : 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} ))} @@ -130,6 +134,7 @@ DropDownMenuBase.propTypes = { ])).isRequired, classes: PropTypes.object.isRequired, onItemClick: PropTypes.func.isRequired, + itemTemplate: PropTypes.func, className: PropTypes.string, }; @@ -137,6 +142,7 @@ DropDownMenuBase.defaultProps = { className: null, selectedItem: undefined, defaultTitle: undefined, + itemTemplate: undefined, }; export const DropDownMenu = withStyles(styleSheet)(DropDownMenuBase); diff --git a/packages/dx-react-grid-material-ui/src/templates/page-size-selector.jsx b/packages/dx-react-grid-material-ui/src/templates/page-size-selector.jsx index fc2c8ee719..d4a72da601 100644 --- a/packages/dx-react-grid-material-ui/src/templates/page-size-selector.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/page-size-selector.jsx @@ -23,12 +23,18 @@ const styleSheet = createStyleSheet('PageSizeSelector', theme => ({ }, pageSizeSelector: { paddingRight: theme.spacing.unit * 2, - marginTop: 4, + marginTop: theme.spacing.unit, }, }, })); -const PageSizeSelectorBase = ({ pageSize, onPageSizeChange, allowedPageSizes, classes }) => ( +const PageSizeSelectorBase = ({ + pageSize, + onPageSizeChange, + allowedPageSizes, + showAllText, + classes, +}) => (
    Rows per page: @@ -36,6 +42,7 @@ const PageSizeSelectorBase = ({ pageSize, onPageSizeChange, allowedPageSizes, cl title || showAllText} onItemClick={(item) => { onPageSizeChange(item); }} @@ -48,7 +55,12 @@ PageSizeSelectorBase.propTypes = { pageSize: PropTypes.number.isRequired, onPageSizeChange: PropTypes.func.isRequired, allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired, + showAllText: PropTypes.string, classes: PropTypes.object.isRequired, }; +PageSizeSelectorBase.defaultProps = { + showAllText: 'All', +}; + export const PageSizeSelector = withStyles(styleSheet)(PageSizeSelectorBase); diff --git a/packages/dx-react-grid-material-ui/src/templates/page-size-selector.test.jsx b/packages/dx-react-grid-material-ui/src/templates/page-size-selector.test.jsx new file mode 100644 index 0000000000..e1dab655f7 --- /dev/null +++ b/packages/dx-react-grid-material-ui/src/templates/page-size-selector.test.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import { mountWithStyles } from '../utils/testing'; +import { PageSizeSelector } from './page-size-selector'; +import { DropDownMenu } from './drop-down-menu'; + +injectTapEventPlugin(); + +describe('PageSizeSelector', () => { + describe('#render', () => { + const mountPageSizeSelector = ({ + pageSize, + allowedPageSizes, + showAllText, + onPageSizeChange = () => {}, + }) => mountWithStyles( + ); + + it('can show info about page sizes', () => { + const allowedPageSizes = [5, 10]; + const pageSizeSelector = mountPageSizeSelector({ + pageSize: 10, + allowedPageSizes, + }); + const ddMenu = pageSizeSelector.find(DropDownMenu); + const ddMenuItems = ddMenu.prop('items'); + + expect(ddMenu).toHaveLength(1); + expect(ddMenu.prop('selectedItem')).toBe(10); + expect(ddMenuItems).toHaveLength(2); + expect(ddMenuItems[0]).toBe(allowedPageSizes[0]); + expect(ddMenuItems[1]).toBe(allowedPageSizes[1]); + }); + + it('can render the \'All\' item', () => { + const pageSizeSelector = mountPageSizeSelector({ + pageSize: 0, + allowedPageSizes: [5, 10, 0], + }); + const ddMenu = pageSizeSelector.find(DropDownMenu); + + expect(ddMenu.find('span').at(0).text()).toBe('All'); + }); + + it('can customize the \'All\' item text', () => { + const pageSizeSelector = mountPageSizeSelector({ + pageSize: 0, + allowedPageSizes: [5, 10, 0], + showAllText: 'Show all', + }); + const ddMenu = pageSizeSelector.find(DropDownMenu); + + expect(ddMenu.find('span').at(0).text()).toBe('Show all'); + }); + + it('can handle the \'onPageSizeChange\' event', () => { + const onPageSizeChange = jest.fn(); + const pageSizeSelector = mountPageSizeSelector({ + pageSize: 5, + allowedPageSizes: [5, 10], + onPageSizeChange, + }); + const ddMenu = pageSizeSelector.find(DropDownMenu); + + ddMenu.prop('onItemClick')(10); + + expect(onPageSizeChange.mock.calls[0][0]).toBe(10); + }); + }); +}); diff --git a/packages/dx-react-grid-material-ui/src/templates/pager.jsx b/packages/dx-react-grid-material-ui/src/templates/pager.jsx index 64e0673f68..361424a744 100644 --- a/packages/dx-react-grid-material-ui/src/templates/pager.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/pager.jsx @@ -19,6 +19,7 @@ const PagerBase = ({ onCurrentPageChange, onPageSizeChange, totalCount, + showAllText, }) => (
    }
    ); @@ -45,6 +47,11 @@ PagerBase.propTypes = { onCurrentPageChange: PropTypes.func.isRequired, onPageSizeChange: PropTypes.func.isRequired, totalCount: PropTypes.number.isRequired, + showAllText: PropTypes.string, +}; + +PagerBase.defaultProps = { + showAllText: undefined, }; export const Pager = withStyles(styleSheet)(PagerBase); diff --git a/packages/dx-react-grid-material-ui/src/templates/pager.test.jsx b/packages/dx-react-grid-material-ui/src/templates/pager.test.jsx new file mode 100644 index 0000000000..b5836bda4e --- /dev/null +++ b/packages/dx-react-grid-material-ui/src/templates/pager.test.jsx @@ -0,0 +1,72 @@ +import React from 'react'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import { mountWithStyles } from '../utils/testing'; +import { Pager } from './pager'; +import { Pagination } from './pagination'; +import { PageSizeSelector } from './page-size-selector'; + +injectTapEventPlugin(); + +describe('Pager', () => { + describe('#render', () => { + const mountPager = ({ + currentPage, + totalPages, + pageSize, + totalCount, + classes = {}, + allowedPageSizes = [], + showAllText, + onCurrentPageChange = () => {}, + onPageSizeChange = () => {}, + }) => mountWithStyles( + ); + + it('can render pagination', () => { + const pager = mountPager({ + currentPage: 1, + totalPages: 3, + pageSize: 5, + totalCount: 15, + }); + const pagination = pager.find(Pagination); + + expect(pagination).toHaveLength(1); + }); + + it('can render page size selector', () => { + const pager = mountPager({ + currentPage: 1, + totalPages: 3, + pageSize: 5, + totalCount: 15, + allowedPageSizes: [5, 10], + }); + const pageSizeSelector = pager.find(PageSizeSelector); + + expect(pageSizeSelector).toHaveLength(1); + }); + + it('doesn\'t render page size selector if the allowedPageSizes option is not defined', () => { + const pager = mountPager({ + currentPage: 1, + totalPages: 3, + pageSize: 5, + totalCount: 15, + }); + const pageSizeSelector = pager.find(PageSizeSelector); + + expect(pageSizeSelector).toHaveLength(0); + }); + }); +}); diff --git a/packages/dx-react-grid-material-ui/src/templates/pagination.jsx b/packages/dx-react-grid-material-ui/src/templates/pagination.jsx index f0311dc3c0..0aceff8b11 100644 --- a/packages/dx-react-grid-material-ui/src/templates/pagination.jsx +++ b/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, diff --git a/packages/dx-react-grid/docs/guides/paging.md b/packages/dx-react-grid/docs/guides/paging.md index 71f840d027..32729e11cf 100644 --- a/packages/dx-react-grid/docs/guides/paging.md +++ b/packages/dx-react-grid/docs/guides/paging.md @@ -2,22 +2,22 @@ ## Overview -The Grid's paging features are used to perform data paging on the client side. However, if your data service supports server-side paging, you can handle the Grid's paging state changes (the current page, the page size) and pass this data to your server. The paging plugin set also contains plugins that display paging controls for enabling end-user interaction, for instance, page switching. +The Grid's paging features are used to divide data into pages on the client side. However, if your data service supports server-side paging, you can handle the Grid's paging state changes (current page, page size) and pass this data to the server. There are also plugins that display paging controls that enable end-user interaction, for instance, page switching. ## Plugin List -There are several plugins that implement sorting features: +Several plugins implement sorting features: - [PagingState](../reference/paging-state.md) - [LocalPaging](../reference/local-paging.md) - [PagingPanel](../reference/paging-panel.md) -Note that the [plugin order](../README.md#plugin-order) is very important. +Note that the [plugin order](../README.md#plugin-order) is important. ## Basic Local Paging Setup -To set up a common paging configuration, use the `PagingState`, `LocalPaging`, and `PagingPanel` plugins. +Use the `PagingState`, `LocalPaging`, and `PagingPanel` plugins to set up a common paging configuration. -In the following example, we use the uncontrolled mode and specify only the initial active page number via the `defaultCurrentPage` property of the `PagingState` plugin. After that, the grid manages paging state changes internally. +In the following example, we use the uncontrolled mode and specify only the initial active page number via the `defaultCurrentPage` property of the `PagingState` plugin. In this case, the grid manages paging state changes internally. [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/paging/local-paging) @@ -25,16 +25,16 @@ 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. +Assign an array of available page sizes to the `allowedPageSizes` property of the `PagingPanel` plugin to enable page size selection. The page size selector contains the 'All' item if one of array values is 0. Use the `showAllText` property of the `PagingPanel` plugin to change its text. -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. +The example below demonstrates the basic configuration for the uncontrolled mode. The `PagingState` plugin's `defaultPageSize` property is used to define the initial page size. [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/paging/page-size-selector) [SOURCE](https://github.com/DevExpress/devextreme-reactive/tree/master/packages/dx-react-demos/src/bootstrap3/paging/page-size-selector.jsx) ## Controlled Paging State -To control the paging state, specify the `currentPage` and `pageSize` properties of the `PagingState` plugin and handle the `onCurrentPageChange` event. Specify the `allowedPageSizes` property of the `PagingPanel` plugin and define the `onPageSizeChanged` event handler of the `PagingState` plugin to enable page size selection. +Specify the `PagingState` plugin's `currentPage` and `pageSize` properties and handle the `onCurrentPageChange` event to control the paging state. Specify the `PagingPanel` plugin's `allowedPageSizes` property and define the `PagingState` plugin's `onPageSizeChanged` event handler to enable page size selection. [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/paging/local-paging-controlled) @@ -42,9 +42,9 @@ To control the paging state, specify the `currentPage` and `pageSize` properties ## Remote Paging -If your data service supports paging operations, you can handle the Grid's paging state changes to request a page from the server according to the active page number and size. +You can handle the Grid's paging state changes to request a page from the server according to the active page number and size if your data service supports paging operations. -Handle the `onCurrentPageChange` event of the `PagingState` plugin to receive updates on the current page number changes instead of using the `LocalSorting` plugin to configure remote paging. Pass the data page received from the server to the `Grid` component's `rows` property. +Handle the `PagingState` plugin's `onCurrentPageChange` event to receive updates on the current page number changes instead of using the `LocalSorting` plugin to configure remote paging. Pass the data page received from the server to the `Grid` component's `rows` property. [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/paging/remote-paging) diff --git a/packages/dx-react-grid/docs/reference/paging-panel.md b/packages/dx-react-grid/docs/reference/paging-panel.md index 28d915d19e..f1c43b22c9 100644 --- a/packages/dx-react-grid/docs/reference/paging-panel.md +++ b/packages/dx-react-grid/docs/reference/paging-panel.md @@ -14,6 +14,7 @@ Name | Type | Default | Description -----|------|---------|------------ pagerTemplate | (args: [PagerArgs](#pager-args)) => ReactElement | | A component that renders a pager based on the supplied parameters allowedPageSizes | Array<number> | [] | Specifies the page sizes that can be selected at runtime +showAllText | string | | Specifies a page size selector's 'All' item text. Available for [Bootstrap3](https://www.npmjs.com/package/@devexpress/dx-react-grid-bootstrap3) and [Material UI](https://www.npmjs.com/package/@devexpress/dx-react-grid-material-ui) template suites only. ## Interfaces @@ -31,6 +32,7 @@ onCurrentPageChange | (page: number) => void | Changes the current page pageSize | number | Specifies the page size onPageSizeChange | (size: number) => void | Changes the page size allowedPageSizes | Array<number> | Specifies the page sizes that can be selected at runtime +showAllText | string | Specifies a page size selector's 'All' item text. Available for [Bootstrap3](https://www.npmjs.com/package/@devexpress/dx-react-grid-bootstrap3) and [Material UI](https://www.npmjs.com/package/@devexpress/dx-react-grid-material-ui) template suites only. ## Plugin Developer Reference diff --git a/packages/dx-react-grid/docs/reference/paging-state.md b/packages/dx-react-grid/docs/reference/paging-state.md index 1cf6cc540b..a3bc58356e 100644 --- a/packages/dx-react-grid/docs/reference/paging-state.md +++ b/packages/dx-react-grid/docs/reference/paging-state.md @@ -1,6 +1,6 @@ # PagingState Plugin Reference -A plugin that manages paging state. It controls the total page count depending on the total row count and the specified page size. It also controls the currently selected page number and can change it in response to the corresponding actions. +A plugin that manages the paging state. It controls the total page count depending on the total row count and the specified page size, controls the currently selected page number and changes it in response to the corresponding actions. ## User Reference @@ -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. Set this property to `0` to show all rows on a page defaultPageSize | number | 10 | Specifies the initial page size for the uncontrolled mode onPageSizeChange | (pageSize: number) => void | | Handles page size changes diff --git a/packages/dx-react-grid/src/plugins/paging-state.jsx b/packages/dx-react-grid/src/plugins/paging-state.jsx index d37a94224d..999641b1b4 100644 --- a/packages/dx-react-grid/src/plugins/paging-state.jsx +++ b/packages/dx-react-grid/src/plugins/paging-state.jsx @@ -44,7 +44,10 @@ export class PagingState extends React.PureComponent { - + );