diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts index 6dc7da9ad4..1091e62c16 100644 --- a/src/components/datatable/DataTable.d.ts +++ b/src/components/datatable/DataTable.d.ts @@ -12,6 +12,7 @@ interface DataTableProps { paginator?: boolean; paginatorPosition?: string; alwaysShowPaginator?: boolean; + paginatorClassName?: string; paginatorTemplate?: string | object; paginatorLeft?: any; paginatorRight?: any; diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js index 9e7dc755e9..6259b64b53 100644 --- a/src/components/datatable/DataTable.js +++ b/src/components/datatable/DataTable.js @@ -25,6 +25,7 @@ export class DataTable extends Component { paginator: false, paginatorPosition: 'bottom', alwaysShowPaginator: true, + paginatorClassName: null, paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', paginatorLeft:null, paginatorRight: null, @@ -126,6 +127,7 @@ export class DataTable extends Component { paginator: PropTypes.bool, paginatorPosition: PropTypes.string, alwaysShowPaginator: PropTypes.bool, + paginatorClassName: PropTypes.string, paginatorTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), paginatorLeft: PropTypes.any, paginatorRight: PropTypes.any, @@ -519,7 +521,7 @@ export class DataTable extends Component { } createPaginator(position, totalRecords, data) { - let className = 'p-paginator-' + position; + const className = classNames('p-paginator-' + position, this.props.paginatorClassName); return ( { tableClassName - any + string null Style class of the table element. @@ -2540,6 +2540,12 @@ const bodyTemplate = (data, props) => { true Whether to show it even there is only one page. + + paginatorClassName + string + null + Style class of the paginator element. + paginatorTemplate string|object diff --git a/src/showcase/dataview/DataViewDoc.js b/src/showcase/dataview/DataViewDoc.js index e2505cffee..38d17df896 100644 --- a/src/showcase/dataview/DataViewDoc.js +++ b/src/showcase/dataview/DataViewDoc.js @@ -810,6 +810,12 @@ const onSortChange = (event) => { true Whether to show it even there is only one page. + + paginatorClassName + string + null + Style class of the paginator element. + paginatorTemplate string|object diff --git a/src/showcase/treetable/TreeTableDoc.js b/src/showcase/treetable/TreeTableDoc.js index 729e1acaf0..66cf37f9df 100644 --- a/src/showcase/treetable/TreeTableDoc.js +++ b/src/showcase/treetable/TreeTableDoc.js @@ -2093,6 +2093,12 @@ export const TreeTableResponsiveDemo = () => { true Whether to show it even there is only one page. + + paginatorClassName + string + null + Style class of the paginator element. + paginatorTemplate string|object