primevue 3.26.0 → 3.27.0

package/datatable/datatable.esm.js

@@ -1,21 +1,41 @@
 import { FilterOperator, FilterService, FilterMatchMode } from 'primevue/api';
+import ArrowDownIcon from 'primevue/icons/arrowdown';
+import ArrowUpIcon from 'primevue/icons/arrowup';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import BarsIcon from 'primevue/icons/bars';
+import CheckIcon from 'primevue/icons/check';
+import PencilIcon from 'primevue/icons/pencil';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, resolveComponent, resolveDirective, normalizeStyle, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, Fragment, withDirectives, createTextVNode, renderList, mergeProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, withKeys, withModifiers, resolveDirective, normalizeStyle, toDisplayString, createCommentVNode, Fragment, withDirectives, createTextVNode, renderList, mergeProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
+import FilterIcon from 'primevue/icons/filter';
+import FilterSlashIcon from 'primevue/icons/filterslash';
+import PlusIcon from 'primevue/icons/plus';
+import TrashIcon from 'primevue/icons/trash';
 import Portal from 'primevue/portal';
+import SortAltIcon from 'primevue/icons/sortalt';
+import SortAmountDownIcon from 'primevue/icons/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 
 var script$a = {
     name: 'RowCheckbox',
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        rowCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -55,6 +75,9 @@ var script$a = {
         checkboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 
@@ -62,6 +85,8 @@ const _hoisted_1$a = { class: "p-hidden-accessible" };
 const _hoisted_2$9 = ["checked", "disabled", "tabindex", "aria-label"];
 
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CheckIcon = resolveComponent("CheckIcon");
+
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
@@ -83,9 +108,16 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       ref: "box",
       class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
     }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-      }, null, 2)
+      ($props.rowCheckboxIconTemplate)
+        ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
+            key: 0,
+            checked: $props.checked,
+            class: "p-checkbox-icon"
+          }, null, 8, ["checked"]))
+        : (openBlock(), createBlock(_component_CheckIcon, {
+            key: 1,
+            class: "p-checkbox-icon"
+          }))
     ], 2)
   ], 2))
 }
@@ -186,9 +218,9 @@ var script$8 = {
             type: Number,
             default: null
         },
-        rowTogglerIcon: {
-            type: Array,
-            default: null
+        isRowExpanded: {
+            type: Boolean,
+            default: false
         },
         selected: {
             type: Boolean,
@@ -221,6 +253,14 @@ var script$8 = {
         name: {
             type: String,
             default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -229,8 +269,7 @@ var script$8 = {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {},
-            isRowExpanded: false
+            styleObject: {}
         };
     },
     watch: {
@@ -273,7 +312,6 @@ var script$8 = {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
-            this.isRowExpanded = !this.isRowExpanded;
             this.$emit('row-toggle', {
                 originalEvent: event,
                 data: this.rowData
@@ -561,7 +599,13 @@ var script$8 = {
     },
     components: {
         DTRadioButton: script$9,
-        DTCheckbox: script$a
+        DTCheckbox: script$a,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        BarsIcon: BarsIcon,
+        PencilIcon: PencilIcon,
+        CheckIcon: CheckIcon,
+        TimesIcon: TimesIcon
     },
     directives: {
         ripple: Ripple
@@ -574,24 +618,14 @@ const _hoisted_1$8 = {
 };
 const _hoisted_2$7 = ["aria-expanded", "aria-controls", "aria-label"];
 const _hoisted_3$5 = ["aria-label"];
-const _hoisted_4$4 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
-const _hoisted_5$3 = [
-  _hoisted_4$4
-];
-const _hoisted_6$3 = ["aria-label"];
-const _hoisted_7$2 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
-const _hoisted_8$2 = [
-  _hoisted_7$2
-];
-const _hoisted_9$1 = ["aria-label"];
-const _hoisted_10$1 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
-const _hoisted_11$1 = [
-  _hoisted_10$1
-];
+const _hoisted_4$4 = ["aria-label"];
+const _hoisted_5$4 = ["aria-label"];
 
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTRadioButton = resolveComponent("DTRadioButton");
   const _component_DTCheckbox = resolveComponent("DTCheckbox");
+  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  const _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
   const _directive_ripple = resolveDirective("ripple");
 
   return ($options.loading)
@@ -665,29 +699,55 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                             key: 1,
                             value: $props.rowData,
                             checked: $props.selected,
+                            rowCheckboxIconTemplate: $props.column.children && $props.column.children.rowcheckboxicon,
                             "aria-selected": $props.selected ? true : undefined,
                             onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
-                          }, null, 8, ["value", "checked", "aria-selected"]))
+                          }, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected"]))
                         : createCommentVNode("", true)
                   ], 64))
                 : ($options.columnProp('rowReorder'))
-                  ? (openBlock(), createElementBlock("i", {
+                  ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.rowreordericon ? $props.column.children.rowreordericon : $options.columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'), {
                       key: 5,
-                      class: normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon') || 'pi pi-bars'])
-                    }, null, 2))
+                      class: normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon')])
+                    }, null, 8, ["class"]))
                   : ($options.columnProp('expander'))
                     ? withDirectives((openBlock(), createElementBlock("button", {
                         key: 6,
                         class: "p-row-toggler p-link",
                         type: "button",
-                        "aria-expanded": $data.isRowExpanded,
+                        "aria-expanded": $props.isRowExpanded,
                         "aria-controls": $props.ariaControls,
                         "aria-label": $options.expandButtonAriaLabel,
                         onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args)))
                       }, [
-                        createElementVNode("span", {
-                          class: normalizeClass($props.rowTogglerIcon)
-                        }, null, 2)
+                        ($props.column.children && $props.column.children.rowtogglericon)
+                          ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowtogglericon), {
+                              key: 0,
+                              rowExpanded: $props.isRowExpanded
+                            }, null, 8, ["rowExpanded"]))
+                          : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                              ($props.isRowExpanded && $props.expandedRowIcon)
+                                ? (openBlock(), createElementBlock("span", {
+                                    key: 0,
+                                    class: normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
+                                  }, null, 2))
+                                : ($props.isRowExpanded && !$props.expandedRowIcon)
+                                  ? (openBlock(), createBlock(_component_ChevronDownIcon, {
+                                      key: 1,
+                                      class: "p-row-toggler-icon"
+                                    }))
+                                  : (!$props.isRowExpanded && $props.collapsedRowIcon)
+                                    ? (openBlock(), createElementBlock("span", {
+                                        key: 2,
+                                        class: normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
+                                      }, null, 2))
+                                    : (!$props.isRowExpanded && !$props.collapsedRowIcon)
+                                      ? (openBlock(), createBlock(_component_ChevronRightIcon, {
+                                          key: 3,
+                                          class: "p-row-toggler-icon"
+                                        }))
+                                      : createCommentVNode("", true)
+                            ], 64))
                       ], 8, _hoisted_2$7)), [
                         [_directive_ripple]
                       ])
@@ -700,7 +760,9 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                 type: "button",
                                 "aria-label": $options.initButtonAriaLabel,
                                 onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args)))
-                              }, _hoisted_5$3, 8, _hoisted_3$5)), [
+                              }, [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), { class: "p-row-editor-init-icon" }))
+                              ], 8, _hoisted_3$5)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
@@ -711,7 +773,9 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                 type: "button",
                                 "aria-label": $options.saveButtonAriaLabel,
                                 onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
-                              }, _hoisted_8$2, 8, _hoisted_6$3)), [
+                              }, [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), { class: "p-row-editor-save-icon" }))
+                              ], 8, _hoisted_4$4)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
@@ -722,7 +786,9 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                 type: "button",
                                 "aria-label": $options.cancelButtonAriaLabel,
                                 onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args)))
-                              }, _hoisted_11$1, 8, _hoisted_9$1)), [
+                              }, [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), { class: "p-row-editor-cancel-icon" }))
+                              ], 8, _hoisted_5$4)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true)
@@ -794,6 +860,10 @@ var script$7 = {
             type: Array,
             default: null
         },
+        first: {
+            type: Number,
+            default: 0
+        },
         dataKey: {
             type: String,
             default: null
@@ -925,12 +995,12 @@ var script$7 = {
             }
         },
         getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : this.getRowIndex(index);
         },
         getRowIndex(index) {
             const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
 
-            return getItemOptions ? getItemOptions(index).index : index;
+            return getItemOptions ? getItemOptions(index).index : this.first + index;
         },
         getRowStyle(rowData) {
             if (this.rowStyle) {
@@ -1028,16 +1098,6 @@ var script$7 = {
                 return null;
             }
         },
-        rowTogglerIcon(rowData) {
-            const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
-        rowGroupTogglerIcon(rowData) {
-            const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
         isGrouped(column) {
             if (this.groupRowsBy && this.columnProp(column, 'field')) {
                 if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
@@ -1208,6 +1268,7 @@ var script$7 = {
             let hiddenColLength = 0;
 
             this.columns.forEach((column) => {
+                if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
                 if (this.columnProp(column, 'hidden')) hiddenColLength++;
             });
 
@@ -1231,7 +1292,9 @@ var script$7 = {
         }
     },
     components: {
-        DTBodyCell: script$8
+        DTBodyCell: script$8,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 
@@ -1239,7 +1302,7 @@ const _hoisted_1$7 = ["colspan"];
 const _hoisted_2$6 = ["onClick"];
 const _hoisted_3$4 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover"];
 const _hoisted_4$3 = ["id"];
-const _hoisted_5$2 = ["colspan"];
+const _hoisted_5$3 = ["colspan"];
 const _hoisted_6$2 = ["colspan"];
 const _hoisted_7$1 = {
   key: 1,
@@ -1249,6 +1312,8 @@ const _hoisted_7$1 = {
 const _hoisted_8$1 = ["colspan"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  const _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
   const _component_DTBodyCell = resolveComponent("DTBodyCell");
 
   return (openBlock(), createElementBlock("tbody", {
@@ -1259,12 +1324,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     (!$props.empty)
       ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($props.value, (rowData, index) => {
-          return (openBlock(), createElementBlock(Fragment, {
-            key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader'
-          }, [
+          return (openBlock(), createElementBlock(Fragment, null, [
             ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)))
               ? (openBlock(), createElementBlock("tr", {
-                  key: 0,
+                  key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
                   class: "p-rowgroup-header",
                   style: normalizeStyle($options.rowGroupHeaderStyle),
                   role: "row"
@@ -1279,9 +1342,34 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                           onClick: $event => ($options.onRowGroupToggle($event, rowData)),
                           type: "button"
                         }, [
-                          createElementVNode("span", {
-                            class: normalizeClass($options.rowGroupTogglerIcon(rowData))
-                          }, null, 2)
+                          ($props.templates['rowgrouptogglericon'])
+                            ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+                                key: 0,
+                                expanded: $options.isRowGroupExpanded(rowData)
+                              }, null, 8, ["expanded"]))
+                            : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                ($options.isRowGroupExpanded(rowData) && $props.expandedRowIcon)
+                                  ? (openBlock(), createElementBlock("span", {
+                                      key: 0,
+                                      class: normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
+                                    }, null, 2))
+                                  : ($options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon)
+                                    ? (openBlock(), createBlock(_component_ChevronDownIcon, {
+                                        key: 1,
+                                        class: "p-row-toggler-icon"
+                                      }))
+                                    : (!$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon)
+                                      ? (openBlock(), createElementBlock("span", {
+                                          key: 2,
+                                          class: normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
+                                        }, null, 2))
+                                      : (!$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon)
+                                        ? (openBlock(), createBlock(_component_ChevronRightIcon, {
+                                            key: 3,
+                                            class: "p-row-toggler-icon"
+                                          }))
+                                        : createCommentVNode("", true)
+                              ], 64))
                         ], 8, _hoisted_2$6))
                       : createCommentVNode("", true),
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
@@ -1312,18 +1400,15 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event)))
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
-                    return (openBlock(), createElementBlock(Fragment, {
-                      key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
-                    }, [
+                    return (openBlock(), createElementBlock(Fragment, null, [
                       ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
                         ? (openBlock(), createBlock(_component_DTBodyCell, {
-                            key: 0,
+                            key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i,
                             rowData: rowData,
                             column: col,
                             rowIndex: $options.getRowIndex(index),
                             index: i,
                             selected: $options.isSelected(rowData),
-                            rowTogglerIcon: $options.columnProp(col, 'expander') ? $options.rowTogglerIcon(rowData) : null,
                             frozenRow: $props.frozenRow,
                             rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize($props.value, col, $options.getRowIndex(index)) : null,
                             editMode: $props.editMode,
@@ -1333,6 +1418,9 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                             virtualScrollerContentProps: $props.virtualScrollerContentProps,
                             ariaControls: $options.expandedRowId + '_' + index + '_expansion',
                             name: $options.nameAttributeSelector,
+                            isRowExpanded: $options.isRowExpanded(rowData),
+                            expandedRowIcon: $props.expandedRowIcon,
+                            collapsedRowIcon: $props.collapsedRowIcon,
                             onRadioChange: _cache[0] || (_cache[0] = $event => ($options.onRadioChange($event))),
                             onCheckboxChange: _cache[1] || (_cache[1] = $event => ($options.onCheckboxChange($event))),
                             onRowToggle: _cache[2] || (_cache[2] = $event => ($options.onRowToggle($event))),
@@ -1343,10 +1431,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                             onRowEditSave: _cache[7] || (_cache[7] = $event => ($options.onRowEditSave($event))),
                             onRowEditCancel: _cache[8] || (_cache[8] = $event => ($options.onRowEditCancel($event))),
                             onEditingMetaChange: $options.onEditingMetaChange
-                          }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "onEditingMetaChange"]))
+                          }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "isRowExpanded", "expandedRowIcon", "collapsedRowIcon", "onEditingMetaChange"]))
                         : createCommentVNode("", true)
                     ], 64))
-                  }), 128))
+                  }), 256))
                 ], 46, _hoisted_3$4))
               : createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
@@ -1361,7 +1449,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, _hoisted_5$2)
+                  ], 8, _hoisted_5$3)
                 ], 8, _hoisted_4$3))
               : createCommentVNode("", true),
             ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
@@ -1381,7 +1469,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ]))
               : createCommentVNode("", true)
           ], 64))
-        }), 128))
+        }), 256))
       : (openBlock(), createElementBlock("tr", _hoisted_7$1, [
           createElementVNode("td", { colspan: $options.columnsLength }, [
             ($props.templates.empty)
@@ -1398,7 +1486,7 @@ var script$6 = {
     name: 'FooterCell',
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -1496,7 +1584,7 @@ var script$5 = {
             default: null
         },
         columns: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -1664,11 +1752,42 @@ var script$4 = {
             type: Number,
             default: 2
         },
-        filterElement: null,
-        filterHeaderTemplate: null,
-        filterFooterTemplate: null,
-        filterClearTemplate: null,
-        filterApplyTemplate: null,
+        filterElement: {
+            type: Function,
+            default: null
+        },
+        filterHeaderTemplate: {
+            type: Function,
+            default: null
+        },
+        filterFooterTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearTemplate: {
+            type: Function,
+            default: null
+        },
+        filterApplyTemplate: {
+            type: Function,
+            default: null
+        },
+        filterIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterAddIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterRemoveIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearIconTemplate: {
+            type: Function,
+            default: null
+        },
         filters: {
             type: Object,
             default: null
@@ -2085,7 +2204,11 @@ var script$4 = {
     components: {
         CFDropdown: Dropdown,
         CFButton: Button,
-        Portal: Portal
+        Portal: Portal,
+        FilterSlashIcon: FilterSlashIcon,
+        FilterIcon: FilterIcon,
+        TrashIcon: TrashIcon,
+        PlusIcon: PlusIcon
     },
     directives: {
         focustrap: FocusTrap
@@ -2093,31 +2216,23 @@ var script$4 = {
 };
 
 const _hoisted_1$4 = ["aria-label", "aria-expanded", "aria-controls"];
-const _hoisted_2$4 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
-const _hoisted_3$3 = [
-  _hoisted_2$4
-];
-const _hoisted_4$2 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-slash" }, null, -1);
-const _hoisted_5$1 = [
-  _hoisted_4$2
-];
-const _hoisted_6$1 = ["id", "aria-modal"];
-const _hoisted_7 = {
+const _hoisted_2$4 = ["id", "aria-modal"];
+const _hoisted_3$3 = {
   key: 0,
   class: "p-column-filter-row-items"
 };
-const _hoisted_8 = ["onClick", "onKeydown", "tabindex"];
-const _hoisted_9 = /*#__PURE__*/createElementVNode("li", { class: "p-column-filter-separator" }, null, -1);
-const _hoisted_10 = {
+const _hoisted_4$2 = ["onClick", "onKeydown", "tabindex"];
+const _hoisted_5$2 = /*#__PURE__*/createElementVNode("li", { class: "p-column-filter-separator" }, null, -1);
+const _hoisted_6$1 = {
   key: 0,
   class: "p-column-filter-operator"
 };
-const _hoisted_11 = { class: "p-column-filter-constraints" };
-const _hoisted_12 = {
+const _hoisted_7 = { class: "p-column-filter-constraints" };
+const _hoisted_8 = {
   key: 1,
   class: "p-column-filter-add-rule"
 };
-const _hoisted_13 = { class: "p-column-filter-buttonbar" };
+const _hoisted_9 = { class: "p-column-filter-buttonbar" };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CFDropdown = resolveComponent("CFDropdown");
@@ -2152,7 +2267,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-controls": $options.overlayId,
           onClick: _cache[0] || (_cache[0] = $event => ($options.toggleMenu())),
           onKeydown: _cache[1] || (_cache[1] = $event => ($options.onToggleButtonKeyDown($event)))
-        }, _hoisted_3$3, 42, _hoisted_1$4))
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))
+        ], 42, _hoisted_1$4))
       : createCommentVNode("", true),
     ($props.showClearButton && $props.display === 'row')
       ? (openBlock(), createElementBlock("button", {
@@ -2160,7 +2277,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass([{ 'p-hidden-space': !$options.hasRowFilter() }, "p-column-filter-clear-button p-link"]),
           type: "button",
           onClick: _cache[2] || (_cache[2] = $event => ($options.clearFilter()))
-        }, _hoisted_5$1, 2))
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon')))
+        ], 2))
       : createCommentVNode("", true),
     createVNode(_component_Portal, null, {
       default: withCtx(() => [
@@ -2189,7 +2308,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                     filterCallback: $options.filterCallback
                   }, null, 8, ["field", "filterModel", "filterCallback"])),
                   ($props.display === 'row')
-                    ? (openBlock(), createElementBlock("ul", _hoisted_7, [
+                    ? (openBlock(), createElementBlock("ul", _hoisted_3$3, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList($options.matchModes, (matchMode, i) => {
                           return (openBlock(), createElementBlock("li", {
                             key: matchMode.label,
@@ -2200,9 +2319,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                               withKeys(withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
                             ],
                             tabindex: i === 0 ? '0' : null
-                          }, toDisplayString(matchMode.label), 43, _hoisted_8))
+                          }, toDisplayString(matchMode.label), 43, _hoisted_4$2))
                         }), 128)),
-                        _hoisted_9,
+                        _hoisted_5$2,
                         createElementVNode("li", {
                           class: "p-column-filter-row-item",
                           onClick: _cache[4] || (_cache[4] = $event => ($options.clearFilter())),
@@ -2214,7 +2333,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                       ]))
                     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                         ($options.isShowOperator)
-                          ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                          ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
                               createVNode(_component_CFDropdown, {
                                 options: $options.operatorOptions,
                                 modelValue: $options.operator,
@@ -2226,7 +2345,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                               }, null, 8, ["options", "modelValue", "aria-label"])
                             ]))
                           : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_11, [
+                        createElementVNode("div", _hoisted_7, [
                           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
                             return (openBlock(), createElementBlock("div", {
                               key: i,
@@ -2257,28 +2376,41 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                   ? (openBlock(), createBlock(_component_CFButton, {
                                       key: 0,
                                       type: "button",
-                                      icon: "pi pi-trash",
                                       class: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
                                       onClick: $event => ($options.removeConstraint(i)),
                                       label: $options.removeRuleButtonLabel
-                                    }, null, 8, ["onClick", "label"]))
+                                    }, {
+                                      icon: withCtx((iconProps) => [
+                                        (openBlock(), createBlock(resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), {
+                                          class: normalizeClass(iconProps.class)
+                                        }, null, 8, ["class"]))
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick", "label"]))
                                   : createCommentVNode("", true)
                               ])
                             ]))
                           }), 128))
                         ]),
                         ($options.isShowAddConstraint)
-                          ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                          ? (openBlock(), createElementBlock("div", _hoisted_8, [
                               createVNode(_component_CFButton, {
                                 type: "button",
                                 label: $options.addRuleButtonLabel,
-                                icon: "pi pi-plus",
+                                iconPos: "left",
                                 class: "p-column-filter-add-button p-button-text p-button-sm",
                                 onClick: _cache[8] || (_cache[8] = $event => ($options.addConstraint()))
-                              }, null, 8, ["label"])
+                              }, {
+                                icon: withCtx((iconProps) => [
+                                  (openBlock(), createBlock(resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), {
+                                    class: normalizeClass(iconProps.class)
+                                  }, null, 8, ["class"]))
+                                ]),
+                                _: 1
+                              }, 8, ["label"])
                             ]))
                           : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_13, [
+                        createElementVNode("div", _hoisted_9, [
                           (!$props.filterClearTemplate && $props.showClearButton)
                             ? (openBlock(), createBlock(_component_CFButton, {
                                 key: 0,
@@ -2318,7 +2450,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                     filterModel: $props.filters[$props.field],
                     filterCallback: $options.filterCallback
                   }, null, 8, ["field", "filterModel", "filterCallback"]))
-                ], 42, _hoisted_6$1)), [
+                ], 42, _hoisted_2$4)), [
                   [_directive_focustrap, { autoFocus: true }]
                 ])
               : createCommentVNode("", true)
@@ -2338,7 +2470,11 @@ var script$3 = {
     emits: ['change'],
     props: {
         checked: null,
-        disabled: null
+        disabled: null,
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -2367,6 +2503,9 @@ var script$3 = {
         headerCheckboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectAll : this.$primevue.config.locale.aria.unselectAll) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 
@@ -2374,6 +2513,8 @@ const _hoisted_1$3 = { class: "p-hidden-accessible" };
 const _hoisted_2$3 = ["checked", "disabled", "tabindex", "aria-label"];
 
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CheckIcon = resolveComponent("CheckIcon");
+
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': $props.disabled }]),
     onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args))),
@@ -2395,9 +2536,16 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       ref: "box",
       class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
     }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-      }, null, 2)
+      ($props.headerCheckboxIconTemplate)
+        ? (openBlock(), createBlock(resolveDynamicComponent($props.headerCheckboxIconTemplate), {
+            key: 0,
+            checked: $props.checked,
+            class: "p-checkbox-icon"
+          }, null, 8, ["checked"]))
+        : (openBlock(), createBlock(_component_CheckIcon, {
+            key: 1,
+            class: "p-checkbox-icon"
+          }))
     ], 2)
   ], 34))
 }
@@ -2488,6 +2636,10 @@ var script$2 = {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     data() {
@@ -2609,7 +2761,7 @@ var script$2 = {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -2625,21 +2777,26 @@ var script$2 = {
                 }
             }
 
-            return [
-                'p-sortable-column-icon pi pi-fw',
-                {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
-                }
-            ];
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
         },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const { sorted, sortOrder } = this.sortState;
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
                 else return 'none';
             } else {
                 return null;
@@ -2648,7 +2805,10 @@ var script$2 = {
     },
     components: {
         DTHeaderCheckbox: script$3,
-        DTColumnFilter: script$4
+        DTColumnFilter: script$4,
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 
@@ -2658,7 +2818,8 @@ const _hoisted_3$2 = {
   key: 1,
   class: "p-column-title"
 };
-const _hoisted_4$1 = {
+const _hoisted_4$1 = { key: 2 };
+const _hoisted_5$1 = {
   key: 3,
   class: "p-sortable-column-badge"
 };
@@ -2701,21 +2862,25 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString($options.columnProp('header')), 1))
         : createCommentVNode("", true),
       ($options.columnProp('sortable'))
-        ? (openBlock(), createElementBlock("span", {
-            key: 2,
-            class: normalizeClass($options.sortableColumnIcon)
-          }, null, 2))
+        ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
+            (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.sorticon) || $options.sortableColumnIcon), {
+              sorted: $options.sortState.sorted,
+              sortOrder: $options.sortState.sortOrder,
+              class: "p-sortable-column-icon"
+            }, null, 8, ["sorted", "sortOrder"]))
+          ]))
         : createCommentVNode("", true),
       ($options.isMultiSorted())
-        ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString($options.getBadgeValue()), 1))
+        ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString($options.getBadgeValue()), 1))
         : createCommentVNode("", true),
       ($options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row')
         ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
             key: 4,
             checked: $props.allRowsSelected,
             onChange: $options.onHeaderCheckboxChange,
-            disabled: $props.empty
-          }, null, 8, ["checked", "onChange", "disabled"]))
+            disabled: $props.empty,
+            headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
+          }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate"]))
         : createCommentVNode("", true),
       ($props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter)
         ? (openBlock(), createBlock(_component_DTColumnFilter, {
@@ -2729,6 +2894,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             filterFooterTemplate: $props.column.children && $props.column.children.filterfooter,
             filterClearTemplate: $props.column.children && $props.column.children.filterclear,
             filterApplyTemplate: $props.column.children && $props.column.children.filterapply,
+            filterIconTemplate: $props.column.children && $props.column.children.filtericon,
+            filterAddIconTemplate: $props.column.children && $props.column.children.filteraddicon,
+            filterRemoveIconTemplate: $props.column.children && $props.column.children.filterremoveicon,
+            filterClearIconTemplate: $props.column.children && $props.column.children.filterclearicon,
             filters: $props.filters,
             filtersStore: $props.filtersStore,
             filterInputProps: $props.filterInputProps,
@@ -2748,7 +2917,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             onConstraintAdd: _cache[5] || (_cache[5] = $event => (_ctx.$emit('constraint-add', $event))),
             onConstraintRemove: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-remove', $event))),
             onApplyClick: _cache[7] || (_cache[7] = $event => (_ctx.$emit('apply-click', $event)))
-          }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+          }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
         : createCommentVNode("", true)
     ])
   ], 46, _hoisted_1$2))
@@ -2844,6 +3013,10 @@ var script$1 = {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     methods: {
@@ -2955,8 +3128,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       onMatchmodeChange: _cache[11] || (_cache[11] = $event => (_ctx.$emit('matchmode-change', $event))),
                       onConstraintAdd: _cache[12] || (_cache[12] = $event => (_ctx.$emit('constraint-add', $event))),
                       onConstraintRemove: _cache[13] || (_cache[13] = $event => (_ctx.$emit('constraint-remove', $event))),
-                      onApplyClick: _cache[14] || (_cache[14] = $event => (_ctx.$emit('apply-click', $event)))
-                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps"]))
+                      onApplyClick: _cache[14] || (_cache[14] = $event => (_ctx.$emit('apply-click', $event))),
+                      headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
+                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "headerCheckboxIconTemplate"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -2993,6 +3167,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 filterFooterTemplate: col.children && col.children.filterfooter,
                                 filterClearTemplate: col.children && col.children.filterclear,
                                 filterApplyTemplate: col.children && col.children.filterapply,
+                                filterIconTemplate: col.children && col.children.filtericon,
+                                filterAddIconTemplate: col.children && col.children.filteraddicon,
+                                filterRemoveIconTemplate: col.children && col.children.filterremoveicon,
+                                filterClearIconTemplate: col.children && col.children.filterclearicon,
                                 filters: $props.filters,
                                 filtersStore: $props.filtersStore,
                                 filterInputProps: $props.filterInputProps,
@@ -3012,7 +3190,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 onConstraintAdd: _cache[20] || (_cache[20] = $event => (_ctx.$emit('constraint-add', $event))),
                                 onConstraintRemove: _cache[21] || (_cache[21] = $event => (_ctx.$emit('constraint-remove', $event))),
                                 onApplyClick: _cache[22] || (_cache[22] = $event => (_ctx.$emit('apply-click', $event)))
-                              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+                              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
                             : createCommentVNode("", true)
                         ], 6))
                       : createCommentVNode("", true)
@@ -3054,8 +3232,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       onMatchmodeChange: _cache[29] || (_cache[29] = $event => (_ctx.$emit('matchmode-change', $event))),
                       onConstraintAdd: _cache[30] || (_cache[30] = $event => (_ctx.$emit('constraint-add', $event))),
                       onConstraintRemove: _cache[31] || (_cache[31] = $event => (_ctx.$emit('constraint-remove', $event))),
-                      onApplyClick: _cache[32] || (_cache[32] = $event => (_ctx.$emit('apply-click', $event)))
-                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore"]))
+                      onApplyClick: _cache[32] || (_cache[32] = $event => (_ctx.$emit('apply-click', $event))),
+                      headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
+                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "headerCheckboxIconTemplate"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -3167,7 +3346,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         sortField: {
             type: [String, Function],
@@ -3271,11 +3450,11 @@ var script = {
         },
         expandedRowIcon: {
             type: String,
-            default: 'pi-chevron-down'
+            default: undefined
         },
         collapsedRowIcon: {
             type: String,
-            default: 'pi-chevron-right'
+            default: undefined
         },
         rowGroupMode: {
             type: String,
@@ -5088,9 +5267,6 @@ var script = {
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
         },
-        loadingIconClass() {
-            return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
-        },
         allRowsSelected() {
             if (this.selectAll !== null) {
                 return this.selectAll;
@@ -5115,7 +5291,10 @@ var script = {
         DTTableHeader: script$1,
         DTTableBody: script$7,
         DTTableFooter: script$5,
-        DTVirtualScroller: VirtualScroller
+        DTVirtualScroller: VirtualScroller,
+        ArrowDownIcon: ArrowDownIcon,
+        ArrowUpIcon: ArrowUpIcon,
+        SpinnerIcon: SpinnerIcon
     }
 };
 
@@ -5139,17 +5318,18 @@ const _hoisted_4 = {
 const _hoisted_5 = {
   key: 5,
   ref: "reorderIndicatorUp",
-  class: "pi pi-arrow-down p-datatable-reorder-indicator-up",
+  class: "p-datatable-reorder-indicator-up",
   style: {"position":"absolute","display":"none"}
 };
 const _hoisted_6 = {
   key: 6,
   ref: "reorderIndicatorDown",
-  class: "pi pi-arrow-up p-datatable-reorder-indicator-down",
+  class: "p-datatable-reorder-indicator-down",
   style: {"position":"absolute","display":"none"}
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   const _component_DTPaginator = resolveComponent("DTPaginator");
   const _component_DTTableHeader = resolveComponent("DTTableHeader");
   const _component_DTTableBody = resolveComponent("DTTableBody");
@@ -5165,10 +5345,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), createElementBlock("div", _hoisted_1, [
           (_ctx.$slots.loading)
             ? renderSlot(_ctx.$slots, "loading", { key: 0 })
-            : (openBlock(), createElementBlock("i", {
-                key: 1,
-                class: normalizeClass($options.loadingIconClass)
-              }, null, 2))
+            : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                (_ctx.$slots.loadingicon)
+                  ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.loadingicon), {
+                      key: 0,
+                      class: "p-datatable-loading-icon"
+                    }))
+                  : ($props.loadingIcon)
+                    ? (openBlock(), createElementBlock("i", {
+                        key: 1,
+                        class: normalizeClass(['p-datatable-loading-icon pi-spin', $props.loadingIcon])
+                      }, null, 2))
+                    : (openBlock(), createBlock(_component_SpinnerIcon, {
+                        key: 2,
+                        spin: "",
+                        class: "p-datatable-loading-icon"
+                      }))
+              ], 64))
         ]))
       : createCommentVNode("", true),
     (_ctx.$slots.header)
@@ -5207,6 +5400,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 key: "1"
               }
+            : undefined,
+          (_ctx.$slots.paginatorfirstpagelinkicon)
+            ? {
+                name: "firstpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")
+                ]),
+                key: "2"
+              }
+            : undefined,
+          (_ctx.$slots.paginatorprevpagelinkicon)
+            ? {
+                name: "prevpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")
+                ]),
+                key: "3"
+              }
+            : undefined,
+          (_ctx.$slots.paginatornextpagelinkicon)
+            ? {
+                name: "nextpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatornextpagelinkicon")
+                ]),
+                key: "4"
+              }
+            : undefined,
+          (_ctx.$slots.paginatorlastpagelinkicon)
+            ? {
+                name: "lastpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")
+                ]),
+                key: "5"
+              }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
@@ -5217,7 +5446,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_DTVirtualScroller, mergeProps({ ref: "virtualScroller" }, $props.virtualScrollerOptions, {
         items: $options.processedData,
         columns: $options.columns,
-        style: { height: $props.scrollHeight !== 'flex' ? $props.scrollHeight : undefined },
+        style: $props.scrollHeight !== 'flex' ? { height: $props.scrollHeight } : undefined,
         scrollHeight: $props.scrollHeight !== 'flex' ? undefined : '100%',
         disabled: $options.virtualScrollerDisabled,
         loaderDisabled: "",
@@ -5250,6 +5479,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               filtersStore: $props.filters,
               filterDisplay: $props.filterDisplay,
               filterInputProps: $props.filterInputProps,
+              headerCheckboxIconTemplate: _ctx.$slots.headercheckboxicon,
               onColumnClick: _cache[1] || (_cache[1] = $event => ($options.onColumnHeaderClick($event))),
               onColumnMousedown: _cache[2] || (_cache[2] = $event => ($options.onColumnHeaderMouseDown($event))),
               onFilterChange: $options.onFilterChange,
@@ -5260,7 +5490,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onColumnDrop: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDrop($event))),
               onColumnResizestart: _cache[7] || (_cache[7] = $event => ($options.onColumnResizeStart($event))),
               onCheckboxChange: _cache[8] || (_cache[8] = $event => ($options.toggleRowsWithCheckbox($event)))
-            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterInputProps", "onFilterChange", "onFilterApply"]),
+            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterInputProps", "headerCheckboxIconTemplate", "onFilterChange", "onFilterApply"]),
             ($props.frozenValue)
               ? (openBlock(), createBlock(_component_DTTableBody, {
                   key: 0,
@@ -5269,6 +5499,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   frozenRow: true,
                   class: "p-datatable-frozen-tbody",
                   columns: slotProps.columns,
+                  first: $data.d_first,
                   dataKey: $props.dataKey,
                   selection: $props.selection,
                   selectionKeys: $data.d_selectionKeys,
@@ -5316,7 +5547,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onRowEditCancel: _cache[25] || (_cache[25] = $event => ($options.onRowEditCancel($event))),
                   editingMeta: $data.d_editingMeta,
                   onEditingMetaChange: $options.onEditingMetaChange
-                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
+                }, null, 8, ["value", "columns", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : createCommentVNode("", true),
             createVNode(_component_DTTableBody, {
               ref: "bodyRef",
@@ -5324,6 +5555,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               class: normalizeClass(slotProps.styleClass),
               columns: slotProps.columns,
               empty: $options.empty,
+              first: $data.d_first,
               dataKey: $props.dataKey,
               selection: $props.selection,
               selectionKeys: $data.d_selectionKeys,
@@ -5372,7 +5604,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onRowEditCancel: _cache[42] || (_cache[42] = $event => ($options.onRowEditCancel($event))),
               editingMeta: $data.d_editingMeta,
               onEditingMetaChange: $options.onEditingMetaChange
-            }, null, 8, ["value", "class", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
+            }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
             ($options.hasSpacerStyle(slotProps.spacerStyle))
               ? (openBlock(), createElementBlock("tbody", {
                   key: 1,
@@ -5425,15 +5657,55 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 key: "1"
               }
+            : undefined,
+          (_ctx.$slots.paginatorfirstpagelinkicon)
+            ? {
+                name: "firstpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")
+                ]),
+                key: "2"
+              }
+            : undefined,
+          (_ctx.$slots.paginatorprevpagelinkicon)
+            ? {
+                name: "prevpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")
+                ]),
+                key: "3"
+              }
+            : undefined,
+          (_ctx.$slots.paginatornextpagelinkicon)
+            ? {
+                name: "nextpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatornextpagelinkicon")
+                ]),
+                key: "4"
+              }
+            : undefined,
+          (_ctx.$slots.paginatorlastpagelinkicon)
+            ? {
+                name: "lastpagelinkicon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")
+                ]),
+                key: "5"
+              }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
     createElementVNode("div", _hoisted_4, null, 512),
     ($props.reorderableColumns)
-      ? (openBlock(), createElementBlock("span", _hoisted_5, null, 512))
+      ? (openBlock(), createElementBlock("span", _hoisted_5, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.reorderindicatorupicon || 'ArrowDownIcon')))
+        ], 512))
       : createCommentVNode("", true),
     ($props.reorderableColumns)
-      ? (openBlock(), createElementBlock("span", _hoisted_6, null, 512))
+      ? (openBlock(), createElementBlock("span", _hoisted_6, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.reorderindicatordownicon || 'ArrowUpIcon')))
+        ], 512))
       : createCommentVNode("", true)
   ], 2))
 }