diff --git a/README.md b/README.md index 97b966d..2b26015 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ For more details see __[Storybook](https://dtupalov.github.io/react-material-ui- | page | number | 0 | Current page. Start with 0 | | onPageChanged | Function | | Function trigger when `page` was changed. Signature ```(page: number) => any``` | | perPage | number | 5 | Quantity of displaying items per page. | +| onPerPageChanged | Function | | Function trigger when `perPage` was changed. Signature ```(perPage: number) => any``` | | perPageOption | number[] | [5, 10, 15] | Per page option. Displayed on the paging panel | | selectedRows | number[] | [] | Indexes of selected rows | | selectable | boolean | true | Enable selections | diff --git a/src/withReactMUIDatatableModel.js b/src/withReactMUIDatatableModel.js index 080b72a..a3ee828 100644 --- a/src/withReactMUIDatatableModel.js +++ b/src/withReactMUIDatatableModel.js @@ -266,7 +266,11 @@ export default compose( props.onPageChanged && props.onPageChanged(page); }, - changePerPage: props => count => props.setPerPage(count), + changePerPage: props => count => { + props.setPerPage(count); + + props.onPerPageChanged && props.onPerPageChanged(count); + }, handleSelect: props => selectedRows => props.setSelectedRows(selectedRows), handleDelete: props => selectedRows => { const nextData = props.data.filter( diff --git a/stories/ReactMUIDatatable.stories.js b/stories/ReactMUIDatatable.stories.js index 1772899..14dfa17 100644 --- a/stories/ReactMUIDatatable.stories.js +++ b/stories/ReactMUIDatatable.stories.js @@ -75,6 +75,14 @@ storiesOf('ReactMUIDatatable/Props', module) perPage={15} /> )) + .add('onPerPageChanged', () => ( + + )) .add('perPageOption', () => ( { onSortChanged = jest.fn(({ columnName, direction }) => {}); onFilterValuesChanged = jest.fn(filterValues => {}); onPageChanged = jest.fn(page => {}); + onPerPageChanged = jest.fn(perPage => {}); data = [ { @@ -93,6 +95,7 @@ describe('withReactMUIDatatableModel', () => { onSortChanged={onSortChanged} onFilterValuesChanged={onFilterValuesChanged} onPageChanged={onPageChanged} + onPerPageChanged={onPerPageChanged} /> ) .root.findByType(MockedComponent); @@ -408,6 +411,12 @@ describe('withReactMUIDatatableModel', () => { ); }); + it('should call onPerPageChanged if perPage was changed', () => { + RenderedMockedComponent.props.changePerPage(10); + + expect(onPerPageChanged).toBeCalledWith(10); + }); + it('should paginate', () => { const expectedDisplayDataOnSecondPage = [ {