Refactor #3832 Refactor #3833 - DataTable paginator icon support

api-generator/components/datatable.js

@@ -1157,6 +1157,22 @@ const DataTableSlots = [
     {
         name: 'rowgrouptogglericon',
         description: 'Custom rowgroup toggler icon template.'
+    },
+    {
+        name: 'paginatorfirstpagelinkicon',
+        description: 'Custom paginator first page link icon template.'
+    },
+    {
+        name: 'paginatorprevpagelinkicon',
+        description: 'Custom paginator prev page link icon template.'
+    },
+    {
+        name: 'paginatornextpagelinkicon',
+        description: 'Custom paginator next page link icon template.'
+    },
+    {
+        name: 'paginatorlastpagelinkicon',
+        description: 'Custom paginator last page link icon template.'
     }
 ];
 

components/lib/datatable/DataTable.d.ts

@@ -919,6 +919,22 @@ export interface DataTableSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * Custom paginator first page link icon template.
+     */
+    paginatorfirstpagelinkicon(): VNode[];
+    /**
+     * Custom paginator previous page link icon template.
+     */
+    paginatorprevpagelinkicon(): VNode[];
+    /**
+     * Custom paginator next page link icon template.
+     */
+    paginatornextpagelinkicon(): VNode[];
+    /**
+     * Custom paginator last page link icon template.
+     */
+    paginatorlastpagelinkicon(): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.

components/lib/datatable/DataTable.vue

@@ -27,6 +27,18 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
             <DTVirtualScroller
@@ -214,6 +226,18 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </DTPaginator>
         <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none"></div>
         <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="p-datatable-reorder-indicator-up" style="position: absolute; display: none">