primevue 3.26.1 → 3.28.0

package/datatable/datatable.js

@@ -1,24 +1,44 @@
 this.primevue = this.primevue || {};
-this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, OverlayEventBus, Ripple, vue, Button, Dropdown, FocusTrap, Portal) {
+this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, ChevronDownIcon, ChevronRightIcon, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, vue, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var ArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownIcon);
+    var ArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpIcon);
+    var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
     var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScroller);
+    var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+    var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
+    var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
+    var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+    var PencilIcon__default = /*#__PURE__*/_interopDefaultLegacy(PencilIcon);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+    var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
+    var FilterSlashIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterSlashIcon);
+    var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
+    var TrashIcon__default = /*#__PURE__*/_interopDefaultLegacy(TrashIcon);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
+    var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
+    var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
 
     var script$a = {
         name: 'RowCheckbox',
         emits: ['change'],
         props: {
             value: null,
-            checked: null
+            checked: null,
+            rowCheckboxIconTemplate: {
+                type: Function,
+                default: null
+            }
         },
         data() {
             return {
@@ -58,6 +78,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             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__default["default"]
         }
     };
 
@@ -65,6 +88,8 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     const _hoisted_2$9 = ["checked", "disabled", "tabindex", "aria-label"];
 
     function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_CheckIcon = vue.resolveComponent("CheckIcon");
+
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
         onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
@@ -86,9 +111,16 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
           ref: "box",
           class: vue.normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
         }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-          }, null, 2)
+          ($props.rowCheckboxIconTemplate)
+            ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
+                key: 0,
+                checked: $props.checked,
+                class: "p-checkbox-icon"
+              }, null, 8, ["checked"]))
+            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, {
+                key: 1,
+                class: "p-checkbox-icon"
+              }))
         ], 2)
       ], 2))
     }
@@ -189,9 +221,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 type: Number,
                 default: null
             },
-            rowTogglerIcon: {
-                type: Array,
-                default: null
+            isRowExpanded: {
+                type: Boolean,
+                default: false
             },
             selected: {
                 type: Boolean,
@@ -224,6 +256,14 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             name: {
                 type: String,
                 default: null
+            },
+            expandedRowIcon: {
+                type: String,
+                default: null
+            },
+            collapsedRowIcon: {
+                type: String,
+                default: null
             }
         },
         documentEditListener: null,
@@ -232,8 +272,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         data() {
             return {
                 d_editing: this.editing,
-                styleObject: {},
-                isRowExpanded: false
+                styleObject: {}
             };
         },
         watch: {
@@ -276,7 +315,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
             },
             toggleRow(event) {
-                this.isRowExpanded = !this.isRowExpanded;
                 this.$emit('row-toggle', {
                     originalEvent: event,
                     data: this.rowData
@@ -564,7 +602,13 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         },
         components: {
             DTRadioButton: script$9,
-            DTCheckbox: script$a
+            DTCheckbox: script$a,
+            ChevronDownIcon: ChevronDownIcon__default["default"],
+            ChevronRightIcon: ChevronRightIcon__default["default"],
+            BarsIcon: BarsIcon__default["default"],
+            PencilIcon: PencilIcon__default["default"],
+            CheckIcon: CheckIcon__default["default"],
+            TimesIcon: TimesIcon__default["default"]
         },
         directives: {
             ripple: Ripple__default["default"]
@@ -577,24 +621,14 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     };
     const _hoisted_2$7 = ["aria-expanded", "aria-controls", "aria-label"];
     const _hoisted_3$5 = ["aria-label"];
-    const _hoisted_4$4 = /*#__PURE__*/vue.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__*/vue.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__*/vue.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 = vue.resolveComponent("DTRadioButton");
       const _component_DTCheckbox = vue.resolveComponent("DTCheckbox");
+      const _component_ChevronDownIcon = vue.resolveComponent("ChevronDownIcon");
+      const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return ($options.loading)
@@ -668,29 +702,55 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                 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"]))
                             : vue.createCommentVNode("", true)
                       ], 64))
                     : ($options.columnProp('rowReorder'))
-                      ? (vue.openBlock(), vue.createElementBlock("i", {
+                      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.rowreordericon ? $props.column.children.rowreordericon : $options.columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'), {
                           key: 5,
-                          class: vue.normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon') || 'pi pi-bars'])
-                        }, null, 2))
+                          class: vue.normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon')])
+                        }, null, 8, ["class"]))
                       : ($options.columnProp('expander'))
                         ? vue.withDirectives((vue.openBlock(), vue.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)))
                           }, [
-                            vue.createElementVNode("span", {
-                              class: vue.normalizeClass($props.rowTogglerIcon)
-                            }, null, 2)
+                            ($props.column.children && $props.column.children.rowtogglericon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowtogglericon), {
+                                  key: 0,
+                                  rowExpanded: $props.isRowExpanded
+                                }, null, 8, ["rowExpanded"]))
+                              : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                                  ($props.isRowExpanded && $props.expandedRowIcon)
+                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        key: 0,
+                                        class: vue.normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
+                                      }, null, 2))
+                                    : ($props.isRowExpanded && !$props.expandedRowIcon)
+                                      ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, {
+                                          key: 1,
+                                          class: "p-row-toggler-icon"
+                                        }))
+                                      : (!$props.isRowExpanded && $props.collapsedRowIcon)
+                                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                                            key: 2,
+                                            class: vue.normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
+                                          }, null, 2))
+                                        : (!$props.isRowExpanded && !$props.collapsedRowIcon)
+                                          ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, {
+                                              key: 3,
+                                              class: "p-row-toggler-icon"
+                                            }))
+                                          : vue.createCommentVNode("", true)
+                                ], 64))
                           ], 8, _hoisted_2$7)), [
                             [_directive_ripple]
                           ])
@@ -703,7 +763,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     type: "button",
                                     "aria-label": $options.initButtonAriaLabel,
                                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args)))
-                                  }, _hoisted_5$3, 8, _hoisted_3$5)), [
+                                  }, [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), { class: "p-row-editor-init-icon" }))
+                                  ], 8, _hoisted_3$5)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true),
@@ -714,7 +776,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     type: "button",
                                     "aria-label": $options.saveButtonAriaLabel,
                                     onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
-                                  }, _hoisted_8$2, 8, _hoisted_6$3)), [
+                                  }, [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), { class: "p-row-editor-save-icon" }))
+                                  ], 8, _hoisted_4$4)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true),
@@ -725,7 +789,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     type: "button",
                                     "aria-label": $options.cancelButtonAriaLabel,
                                     onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args)))
-                                  }, _hoisted_11$1, 8, _hoisted_9$1)), [
+                                  }, [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), { class: "p-row-editor-cancel-icon" }))
+                                  ], 8, _hoisted_5$4)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true)
@@ -1035,16 +1101,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     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;
@@ -1239,7 +1295,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             }
         },
         components: {
-            DTBodyCell: script$8
+            DTBodyCell: script$8,
+            ChevronDownIcon: ChevronDownIcon__default["default"],
+            ChevronRightIcon: ChevronRightIcon__default["default"]
         }
     };
 
@@ -1247,7 +1305,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     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,
@@ -1257,6 +1315,8 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     const _hoisted_8$1 = ["colspan"];
 
     function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_ChevronDownIcon = vue.resolveComponent("ChevronDownIcon");
+      const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
       const _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
 
       return (vue.openBlock(), vue.createElementBlock("tbody", {
@@ -1285,9 +1345,34 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                               onClick: $event => ($options.onRowGroupToggle($event, rowData)),
                               type: "button"
                             }, [
-                              vue.createElementVNode("span", {
-                                class: vue.normalizeClass($options.rowGroupTogglerIcon(rowData))
-                              }, null, 2)
+                              ($props.templates['rowgrouptogglericon'])
+                                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+                                    key: 0,
+                                    expanded: $options.isRowGroupExpanded(rowData)
+                                  }, null, 8, ["expanded"]))
+                                : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                                    ($options.isRowGroupExpanded(rowData) && $props.expandedRowIcon)
+                                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                                          key: 0,
+                                          class: vue.normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
+                                        }, null, 2))
+                                      : ($options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon)
+                                        ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, {
+                                            key: 1,
+                                            class: "p-row-toggler-icon"
+                                          }))
+                                        : (!$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon)
+                                          ? (vue.openBlock(), vue.createElementBlock("span", {
+                                              key: 2,
+                                              class: vue.normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
+                                            }, null, 2))
+                                          : (!$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon)
+                                            ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, {
+                                                key: 3,
+                                                class: "p-row-toggler-icon"
+                                              }))
+                                            : vue.createCommentVNode("", true)
+                                  ], 64))
                             ], 8, _hoisted_2$6))
                           : vue.createCommentVNode("", true),
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
@@ -1327,7 +1412,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                 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,
@@ -1337,6 +1421,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                 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))),
@@ -1347,7 +1434,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                 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"]))
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 256))
@@ -1365,7 +1452,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                           data: rowData,
                           index: $options.getRowIndex(index)
                         }, null, 8, ["data", "index"]))
-                      ], 8, _hoisted_5$2)
+                      ], 8, _hoisted_5$3)
                     ], 8, _hoisted_4$3))
                   : vue.createCommentVNode("", true),
                 ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
@@ -1402,7 +1489,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         name: 'FooterCell',
         props: {
             column: {
-                type: null,
+                type: Object,
                 default: null
             }
         },
@@ -1500,7 +1587,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 default: null
             },
             columns: {
-                type: null,
+                type: Object,
                 default: null
             }
         },
@@ -1668,11 +1755,42 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 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
@@ -2089,7 +2207,11 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         components: {
             CFDropdown: Dropdown__default["default"],
             CFButton: Button__default["default"],
-            Portal: Portal__default["default"]
+            Portal: Portal__default["default"],
+            FilterSlashIcon: FilterSlashIcon__default["default"],
+            FilterIcon: FilterIcon__default["default"],
+            TrashIcon: TrashIcon__default["default"],
+            PlusIcon: PlusIcon__default["default"]
         },
         directives: {
             focustrap: FocusTrap__default["default"]
@@ -2097,31 +2219,23 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     };
 
     const _hoisted_1$4 = ["aria-label", "aria-expanded", "aria-controls"];
-    const _hoisted_2$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
-    const _hoisted_3$3 = [
-      _hoisted_2$4
-    ];
-    const _hoisted_4$2 = /*#__PURE__*/vue.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__*/vue.createElementVNode("li", { class: "p-column-filter-separator" }, null, -1);
-    const _hoisted_10 = {
+    const _hoisted_4$2 = ["onClick", "onKeydown", "tabindex"];
+    const _hoisted_5$2 = /*#__PURE__*/vue.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 = vue.resolveComponent("CFDropdown");
@@ -2156,7 +2270,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
               "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))
+            }, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))
+            ], 42, _hoisted_1$4))
           : vue.createCommentVNode("", true),
         ($props.showClearButton && $props.display === 'row')
           ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -2164,7 +2280,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
               class: vue.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))
+            }, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon')))
+            ], 2))
           : vue.createCommentVNode("", true),
         vue.createVNode(_component_Portal, null, {
           default: vue.withCtx(() => [
@@ -2193,7 +2311,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                         filterCallback: $options.filterCallback
                       }, null, 8, ["field", "filterModel", "filterCallback"])),
                       ($props.display === 'row')
-                        ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_7, [
+                        ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_3$3, [
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.matchModes, (matchMode, i) => {
                               return (vue.openBlock(), vue.createElementBlock("li", {
                                 key: matchMode.label,
@@ -2204,9 +2322,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                   vue.withKeys(vue.withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
                                 ],
                                 tabindex: i === 0 ? '0' : null
-                              }, vue.toDisplayString(matchMode.label), 43, _hoisted_8))
+                              }, vue.toDisplayString(matchMode.label), 43, _hoisted_4$2))
                             }), 128)),
-                            _hoisted_9,
+                            _hoisted_5$2,
                             vue.createElementVNode("li", {
                               class: "p-column-filter-row-item",
                               onClick: _cache[4] || (_cache[4] = $event => ($options.clearFilter())),
@@ -2218,7 +2336,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                           ]))
                         : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                             ($options.isShowOperator)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
                                   vue.createVNode(_component_CFDropdown, {
                                     options: $options.operatorOptions,
                                     modelValue: $options.operator,
@@ -2230,7 +2348,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                   }, null, 8, ["options", "modelValue", "aria-label"])
                                 ]))
                               : vue.createCommentVNode("", true),
-                            vue.createElementVNode("div", _hoisted_11, [
+                            vue.createElementVNode("div", _hoisted_7, [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.fieldConstraints, (fieldConstraint, i) => {
                                 return (vue.openBlock(), vue.createElementBlock("div", {
                                   key: i,
@@ -2261,28 +2379,41 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                       ? (vue.openBlock(), vue.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: vue.withCtx((iconProps) => [
+                                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), {
+                                              class: vue.normalizeClass(iconProps.class)
+                                            }, null, 8, ["class"]))
+                                          ]),
+                                          _: 2
+                                        }, 1032, ["onClick", "label"]))
                                       : vue.createCommentVNode("", true)
                                   ])
                                 ]))
                               }), 128))
                             ]),
                             ($options.isShowAddConstraint)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                                   vue.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: vue.withCtx((iconProps) => [
+                                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), {
+                                        class: vue.normalizeClass(iconProps.class)
+                                      }, null, 8, ["class"]))
+                                    ]),
+                                    _: 1
+                                  }, 8, ["label"])
                                 ]))
                               : vue.createCommentVNode("", true),
-                            vue.createElementVNode("div", _hoisted_13, [
+                            vue.createElementVNode("div", _hoisted_9, [
                               (!$props.filterClearTemplate && $props.showClearButton)
                                 ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
                                     key: 0,
@@ -2322,7 +2453,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                         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 }]
                     ])
                   : vue.createCommentVNode("", true)
@@ -2342,7 +2473,11 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         emits: ['change'],
         props: {
             checked: null,
-            disabled: null
+            disabled: null,
+            headerCheckboxIconTemplate: {
+                type: Function,
+                default: null
+            }
         },
         data() {
             return {
@@ -2371,6 +2506,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             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__default["default"]
         }
     };
 
@@ -2378,6 +2516,8 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     const _hoisted_2$3 = ["checked", "disabled", "tabindex", "aria-label"];
 
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_CheckIcon = vue.resolveComponent("CheckIcon");
+
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.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))),
@@ -2399,9 +2539,16 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
           ref: "box",
           class: vue.normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
         }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-          }, null, 2)
+          ($props.headerCheckboxIconTemplate)
+            ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.headerCheckboxIconTemplate), {
+                key: 0,
+                checked: $props.checked,
+                class: "p-checkbox-icon"
+              }, null, 8, ["checked"]))
+            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, {
+                key: 1,
+                class: "p-checkbox-icon"
+              }))
         ], 2)
       ], 34))
     }
@@ -2492,6 +2639,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             filterInputProps: {
                 type: null,
                 default: null
+            },
+            headerCheckboxIconTemplate: {
+                type: Function,
+                default: null
             }
         },
         data() {
@@ -2613,7 +2764,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
 
                 return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
             },
-            sortableColumnIcon() {
+            sortState() {
                 let sorted = false;
                 let sortOrder = null;
 
@@ -2629,21 +2780,26 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     }
                 }
 
-                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__default["default"];
+                else if (sorted && sortOrder > 0) return SortAmountUpAltIcon__default["default"];
+                else if (sorted && sortOrder < 0) return SortAmountDownIcon__default["default"];
+
+                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;
@@ -2652,7 +2808,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
         },
         components: {
             DTHeaderCheckbox: script$3,
-            DTColumnFilter: script$4
+            DTColumnFilter: script$4,
+            SortAltIcon: SortAltIcon__default["default"],
+            SortAmountUpAltIcon: SortAmountUpAltIcon__default["default"],
+            SortAmountDownIcon: SortAmountDownIcon__default["default"]
         }
     };
 
@@ -2662,7 +2821,8 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
       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"
     };
@@ -2705,21 +2865,25 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString($options.columnProp('header')), 1))
             : vue.createCommentVNode("", true),
           ($options.columnProp('sortable'))
-            ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 2,
-                class: vue.normalizeClass($options.sortableColumnIcon)
-              }, null, 2))
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, [
+                (vue.openBlock(), vue.createBlock(vue.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"]))
+              ]))
             : vue.createCommentVNode("", true),
           ($options.isMultiSorted())
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.getBadgeValue()), 1))
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, vue.toDisplayString($options.getBadgeValue()), 1))
             : vue.createCommentVNode("", true),
           ($options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row')
             ? (vue.openBlock(), vue.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"]))
             : vue.createCommentVNode("", true),
           ($props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter)
             ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
@@ -2733,6 +2897,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 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,
@@ -2752,7 +2920,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 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"]))
             : vue.createCommentVNode("", true)
         ])
       ], 46, _hoisted_1$2))
@@ -2848,6 +3016,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             filterInputProps: {
                 type: null,
                 default: null
+            },
+            headerCheckboxIconTemplate: {
+                type: Function,
+                default: null
             }
         },
         methods: {
@@ -2959,8 +3131,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                           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"]))
                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128))
@@ -2997,6 +3170,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     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,
@@ -3016,7 +3193,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     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"]))
                                 : vue.createCommentVNode("", true)
                             ], 6))
                           : vue.createCommentVNode("", true)
@@ -3058,8 +3235,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                           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"]))
                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128))
@@ -3171,7 +3349,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             },
             loadingIcon: {
                 type: String,
-                default: 'pi pi-spinner'
+                default: undefined
             },
             sortField: {
                 type: [String, Function],
@@ -3275,11 +3453,11 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             },
             expandedRowIcon: {
                 type: String,
-                default: 'pi-chevron-down'
+                default: undefined
             },
             collapsedRowIcon: {
                 type: String,
-                default: 'pi-chevron-right'
+                default: undefined
             },
             rowGroupMode: {
                 type: String,
@@ -5092,9 +5270,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             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;
@@ -5119,7 +5294,10 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             DTTableHeader: script$1,
             DTTableBody: script$7,
             DTTableFooter: script$5,
-            DTVirtualScroller: VirtualScroller__default["default"]
+            DTVirtualScroller: VirtualScroller__default["default"],
+            ArrowDownIcon: ArrowDownIcon__default["default"],
+            ArrowUpIcon: ArrowUpIcon__default["default"],
+            SpinnerIcon: SpinnerIcon__default["default"]
         }
     };
 
@@ -5143,17 +5321,18 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     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 = vue.resolveComponent("SpinnerIcon");
       const _component_DTPaginator = vue.resolveComponent("DTPaginator");
       const _component_DTTableHeader = vue.resolveComponent("DTTableHeader");
       const _component_DTTableBody = vue.resolveComponent("DTTableBody");
@@ -5169,10 +5348,23 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
               (_ctx.$slots.loading)
                 ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 })
-                : (vue.openBlock(), vue.createElementBlock("i", {
-                    key: 1,
-                    class: vue.normalizeClass($options.loadingIconClass)
-                  }, null, 2))
+                : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    (_ctx.$slots.loadingicon)
+                      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.loadingicon), {
+                          key: 0,
+                          class: "p-datatable-loading-icon"
+                        }))
+                      : ($props.loadingIcon)
+                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                            key: 1,
+                            class: vue.normalizeClass(['p-datatable-loading-icon pi-spin', $props.loadingIcon])
+                          }, null, 2))
+                        : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                            key: 2,
+                            spin: "",
+                            class: "p-datatable-loading-icon"
+                          }))
+                  ], 64))
             ]))
           : vue.createCommentVNode("", true),
         (_ctx.$slots.header)
@@ -5211,6 +5403,42 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     ]),
                     key: "1"
                   }
+                : undefined,
+              (_ctx.$slots.paginatorfirstpagelinkicon)
+                ? {
+                    name: "firstpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")
+                    ]),
+                    key: "2"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatorprevpagelinkicon)
+                ? {
+                    name: "prevpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")
+                    ]),
+                    key: "3"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatornextpagelinkicon)
+                ? {
+                    name: "nextpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon")
+                    ]),
+                    key: "4"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatorlastpagelinkicon)
+                ? {
+                    name: "lastpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")
+                    ]),
+                    key: "5"
+                  }
                 : undefined
             ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
           : vue.createCommentVNode("", true),
@@ -5254,6 +5482,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                   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,
@@ -5264,7 +5493,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                   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)
                   ? (vue.openBlock(), vue.createBlock(_component_DTTableBody, {
                       key: 0,
@@ -5431,15 +5660,55 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     ]),
                     key: "1"
                   }
+                : undefined,
+              (_ctx.$slots.paginatorfirstpagelinkicon)
+                ? {
+                    name: "firstpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")
+                    ]),
+                    key: "2"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatorprevpagelinkicon)
+                ? {
+                    name: "prevpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")
+                    ]),
+                    key: "3"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatornextpagelinkicon)
+                ? {
+                    name: "nextpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon")
+                    ]),
+                    key: "4"
+                  }
+                : undefined,
+              (_ctx.$slots.paginatorlastpagelinkicon)
+                ? {
+                    name: "lastpagelinkicon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")
+                    ]),
+                    key: "5"
+                  }
                 : undefined
             ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
           : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_4, null, 512),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, null, 512))
+          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.reorderindicatorupicon || 'ArrowDownIcon')))
+            ], 512))
           : vue.createCommentVNode("", true),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, null, 512))
+          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.reorderindicatordownicon || 'ArrowUpIcon')))
+            ], 512))
           : vue.createCommentVNode("", true)
       ], 2))
     }
@@ -5478,4 +5747,4 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
 
     return script;
 
-})(primevue.api, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.overlayeventbus, primevue.ripple, Vue, primevue.button, primevue.dropdown, primevue.focustrap, primevue.portal);
+})(primevue.api, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.bars, primevue.icons.check, primevue.icons.pencil, primevue.icons.times, primevue.overlayeventbus, primevue.ripple, Vue, primevue.button, primevue.dropdown, primevue.focustrap, primevue.icons.filter, primevue.icons.filterslash, primevue.icons.plus, primevue.icons.trash, primevue.portal, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt);