Fixed #3921 - DataTable and TreeTable: new Paginator dropdown icon slots

components/lib/datatable/DataTable.d.ts

@@ -1224,6 +1224,26 @@ export interface DataTableSlots {
      * Custom paginator last page link icon template.
      */
     paginatorlastpagelinkicon(): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginator rowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginator jumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.

components/lib/datatable/DataTable.vue

@@ -45,6 +45,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </DTPaginator>
         <div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
             <DTVirtualScroller
@@ -257,6 +263,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
+                <slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </DTPaginator>
         <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
         <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">

components/lib/paginator/JumpToPageDropdown.vue

@@ -11,7 +11,11 @@
         :pt="ptm('jumpToPageDropdown')"
         data-pc-section="jumptopagedropdown"
         data-pc-group-section="pagedropdown"
-    ></JTPDropdown>
+    >
+        <template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">
+            <component :is="templates['jumptopagedropdownicon']" :class="slotProps.class" />
+        </template>
+    </JTPDropdown>
 </template>
 
 <script>
@@ -26,7 +30,8 @@ export default {
     props: {
         page: Number,
         pageCount: Number,
-        disabled: Boolean
+        disabled: Boolean,
+        templates: null
     },
     methods: {
         onChange(value) {

components/lib/paginator/Paginator.d.ts

@@ -302,6 +302,26 @@ export interface PaginatorSlots {
      * Custom last page link icon template.
      */
     lastpagelinkicon(): VNode[];
+    /**
+     * Custom rowsperpagedropdownicon template.
+     * @param {Object} scope - rowsperpagedropdownicon's params.
+     */
+    rowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom jumptopagedropdownicon template.
+     * @param {Object} scope - jumptopagedropdownicon's params.
+     */
+    jumptopagedropdownicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**

components/lib/paginator/Paginator.vue

@@ -30,6 +30,7 @@
                     :options="rowsPerPageOptions"
                     @rows-change="onRowChange($event)"
                     :disabled="empty"
+                    :templates="$slots"
                     :unstyled="unstyled"
                     :pt="pt"
                 />
@@ -40,6 +41,7 @@
                     :pageCount="pageCount"
                     @page-change="changePage($event)"
                     :disabled="empty"
+                    :templates="$slots"
                     :unstyled="unstyled"
                     :pt="pt"
                 />

components/lib/paginator/RowsPerPageDropdown.vue

@@ -11,7 +11,11 @@
         :pt="ptm('rowPerPageDropdown')"
         data-pc-section="rowperpagedropdown"
         data-pc-group-section="pagedropdown"
-    ></RPPDropdown>
+    >
+        <template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">
+            <component :is="templates['rowsperpagedropdownicon']" :class="slotProps.class" />
+        </template>
+    </RPPDropdown>
 </template>
 
 <script>
@@ -26,7 +30,8 @@ export default {
     props: {
         options: Array,
         rows: Number,
-        disabled: Boolean
+        disabled: Boolean,
+        templates: null
     },
     methods: {
         onChange(value) {

components/lib/treetable/TreeTable.d.ts

@@ -655,6 +655,26 @@ export interface TreeTableSlots {
      * Custom paginator last page link icon template.
      */
     paginatorlastpagelinkicon(): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginator rowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rowsperpagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginator jumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**

components/lib/treetable/TreeTable.vue

@@ -44,6 +44,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </TTPaginator>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
             <table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
@@ -144,6 +150,12 @@
             <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon>
+                <slot name="paginatorjumptopagedropdownicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
+            </template>
         </TTPaginator>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>