devextreme-reactive icon indicating copy to clipboard operation
devextreme-reactive copied to clipboard

Show pagination counter on Bootstrap, like on Material Design

Open GabrielDeveloper opened this issue 6 years ago • 1 comments

Current Behaviour

Currently, the counter just is visible on extra small devices.

Expected Behaviour

I would like to choose if I want to show this counter to another device sizes. This can be done passing some parameter like "showCounter" on Pagination component. If don't was passed this parameter, the behavior doesn't change:

https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-bootstrap3/src/templates/paging-panel/pagination.jsx#L117

On Material Design doesn't have this behavior about the device sizes:

https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx#L191

Steps to Reproduce (for Bugs)

https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-bootstrap3/src/templates/paging-panel/pagination.jsx#L117

GabrielDeveloper avatar Mar 28 '18 13:03 GabrielDeveloper

Hi, Currently, React Grid doesn't provide such a functionality out of the box. You can create your own pagination component using the containerComponent property of the PagingPanel plugin.

We have discussed a similar question about pager customization. You can use it as a starting point. Please note, we used the outdated pagerTemplate property in this sample. Use the containerComponent one instead.

We'll discuss how to make a paging panel more flexible in the future..

SergeyAlexeev avatar Mar 30 '18 07:03 SergeyAlexeev