Fixed #1840 - Add paginatorClassName to DataTable, TreeTable and Data…

…View
primefaces · Mar 4, 2021 · 6e82bfc · 6e82bfc
1 parent 2943570
commit 6e82bfc
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 4 deletions.
diff --git 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
@@ -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 (
             <Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className} onPageChange={this.onPageChange} template={this.props.paginatorTemplate}

diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts
@@ -22,6 +22,7 @@ interface DataViewProps {
     paginator?: boolean;
     paginatorPosition?: string;
     alwaysShowPaginator?: boolean;
+    paginatorClassName?: string;
     paginatorTemplate?: string | object;
     paginatorLeft?: any;
     paginatorRight?: any;

diff --git a/src/components/dataview/DataView.js b/src/components/dataview/DataView.js
@@ -90,6 +90,7 @@ export class DataView extends Component {
         paginator: false,
         paginatorPosition: 'bottom',
         alwaysShowPaginator: true,
+        paginatorClassName: null,
         paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
         paginatorLeft:null,
         paginatorRight: null,
@@ -121,6 +122,7 @@ export class DataView 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,
@@ -162,7 +164,7 @@ export class DataView extends Component {
     }
 
     createPaginator(position) {
-        const className = 'p-paginator-' + position;
+        const className = classNames('p-paginator-' + position, this.props.paginatorClassName);
         const first = this.props.onPage ? this.props.first: this.state.first;
         const rows = this.props.onPage ? this.props.rows : this.state.rows;
         const totalRecords = this.getTotalRecords();

diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
@@ -14,6 +14,7 @@ interface TreeTableProps {
     paginator?: boolean;
     paginatorPosition?: string;
     alwaysShowPaginator?: boolean;
+    paginatorClassName?: string;
     paginatorTemplate?: string | object;
     paginatorLeft?: any;
     paginatorRight?: any;

diff --git a/src/components/treetable/TreeTable.js b/src/components/treetable/TreeTable.js
@@ -25,6 +25,7 @@ export class TreeTable extends Component {
         paginator: false,
         paginatorPosition: 'bottom',
         alwaysShowPaginator: true,
+        paginatorClassName: null,
         paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
         paginatorLeft:null,
         paginatorRight: null,
@@ -96,6 +97,7 @@ export class TreeTable 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,
@@ -916,7 +918,7 @@ export class TreeTable extends Component {
     }
 
     createPaginator(position, totalRecords) {
-        const className = 'p-paginator-' + position;
+        const className = classNames('p-paginator-' + position, this.props.paginatorClassName);
 
         return (
             <Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className}

diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js
@@ -2518,7 +2518,7 @@ const bodyTemplate = (data, props) => {
                         </tr>
                         <tr>
                             <td>tableClassName</td>
-                            <td>any</td>
+                            <td>string</td>
                             <td>null</td>
                             <td>Style class of the table element.</td>
                         </tr>
@@ -2540,6 +2540,12 @@ const bodyTemplate = (data, props) => {
                             <td>true</td>
                             <td>Whether to show it even there is only one page.</td>
                         </tr>
+                        <tr>
+                            <td>paginatorClassName</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the paginator element.</td>
+                        </tr>
                         <tr>
                             <td>paginatorTemplate</td>
                             <td>string|object</td>

diff --git a/src/showcase/dataview/DataViewDoc.js b/src/showcase/dataview/DataViewDoc.js
@@ -810,6 +810,12 @@ const onSortChange = (event) => {
                                         <td>true</td>
                                         <td>Whether to show it even there is only one page.</td>
                                     </tr>
+                                    <tr>
+                                        <td>paginatorClassName</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>Style class of the paginator element.</td>
+                                    </tr>
                                     <tr>
                                         <td>paginatorTemplate</td>
                                         <td>string|object</td>

diff --git a/src/showcase/treetable/TreeTableDoc.js b/src/showcase/treetable/TreeTableDoc.js
@@ -2093,6 +2093,12 @@ export const TreeTableResponsiveDemo = () => {
                                         <td>true</td>
                                         <td>Whether to show it even there is only one page.</td>
                                     </tr>
+                                    <tr>
+                                        <td>paginatorClassName</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>Style class of the paginator element.</td>
+                                    </tr>
                                     <tr>
                                         <td>paginatorTemplate</td>
                                         <td>string|object</td>