primevue 3.26.0 → 3.27.0

package/datatable/datatable.cjs.js

@@ -1,34 +1,70 @@
 'use strict';
 
 var api = require('primevue/api');
+var ArrowDownIcon = require('primevue/icons/arrowdown');
+var ArrowUpIcon = require('primevue/icons/arrowup');
+var SpinnerIcon = require('primevue/icons/spinner');
 var Paginator = require('primevue/paginator');
 var utils = require('primevue/utils');
 var VirtualScroller = require('primevue/virtualscroller');
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var ChevronRightIcon = require('primevue/icons/chevronright');
+var BarsIcon = require('primevue/icons/bars');
+var CheckIcon = require('primevue/icons/check');
+var PencilIcon = require('primevue/icons/pencil');
+var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
 var Button = require('primevue/button');
 var Dropdown = require('primevue/dropdown');
 var FocusTrap = require('primevue/focustrap');
+var FilterIcon = require('primevue/icons/filter');
+var FilterSlashIcon = require('primevue/icons/filterslash');
+var PlusIcon = require('primevue/icons/plus');
+var TrashIcon = require('primevue/icons/trash');
 var Portal = require('primevue/portal');
+var SortAltIcon = require('primevue/icons/sortalt');
+var SortAmountDownIcon = require('primevue/icons/sortamountdown');
+var SortAmountUpAltIcon = require('primevue/icons/sortamountupalt');
 
 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 {
@@ -68,6 +104,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__default["default"]
     }
 };
 
@@ -75,6 +114,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 = 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)))
@@ -96,9 +137,16 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       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))
 }
@@ -199,9 +247,9 @@ var script$8 = {
             type: Number,
             default: null
         },
-        rowTogglerIcon: {
-            type: Array,
-            default: null
+        isRowExpanded: {
+            type: Boolean,
+            default: false
         },
         selected: {
             type: Boolean,
@@ -234,6 +282,14 @@ var script$8 = {
         name: {
             type: String,
             default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -242,8 +298,7 @@ var script$8 = {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {},
-            isRowExpanded: false
+            styleObject: {}
         };
     },
     watch: {
@@ -286,7 +341,6 @@ var script$8 = {
             return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
-            this.isRowExpanded = !this.isRowExpanded;
             this.$emit('row-toggle', {
                 originalEvent: event,
                 data: this.rowData
@@ -574,7 +628,13 @@ var script$8 = {
     },
     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"]
@@ -587,24 +647,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__*/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)
@@ -678,29 +728,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"]))
                         : 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]
                       ])
@@ -713,7 +789,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)), [
+                              }, [
+                                (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),
@@ -724,7 +802,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)), [
+                              }, [
+                                (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),
@@ -735,7 +815,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)), [
+                              }, [
+                                (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)
@@ -807,6 +889,10 @@ var script$7 = {
             type: Array,
             default: null
         },
+        first: {
+            type: Number,
+            default: 0
+        },
         dataKey: {
             type: String,
             default: null
@@ -938,12 +1024,12 @@ var script$7 = {
             }
         },
         getRowKey(rowData, index) {
-            return this.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.dataKey) : index;
+            return this.dataKey ? utils.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) {
@@ -1041,16 +1127,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;
@@ -1221,6 +1297,7 @@ var script$7 = {
             let hiddenColLength = 0;
 
             this.columns.forEach((column) => {
+                if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
                 if (this.columnProp(column, 'hidden')) hiddenColLength++;
             });
 
@@ -1244,7 +1321,9 @@ var script$7 = {
         }
     },
     components: {
-        DTBodyCell: script$8
+        DTBodyCell: script$8,
+        ChevronDownIcon: ChevronDownIcon__default["default"],
+        ChevronRightIcon: ChevronRightIcon__default["default"]
     }
 };
 
@@ -1252,7 +1331,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,
@@ -1262,6 +1341,8 @@ const _hoisted_7$1 = {
 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", {
@@ -1272,12 +1353,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     (!$props.empty)
       ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($props.value, (rowData, index) => {
-          return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-            key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader'
-          }, [
+          return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
             ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)))
               ? (vue.openBlock(), vue.createElementBlock("tr", {
-                  key: 0,
+                  key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
                   class: "p-rowgroup-header",
                   style: vue.normalizeStyle($options.rowGroupHeaderStyle),
                   role: "row"
@@ -1292,9 +1371,34 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                           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']), {
@@ -1325,18 +1429,15 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event)))
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
-                    return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-                      key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
-                    }, [
+                    return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                       ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
                         ? (vue.openBlock(), vue.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,
@@ -1346,6 +1447,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))),
@@ -1356,10 +1460,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"]))
                         : vue.createCommentVNode("", true)
                     ], 64))
-                  }), 128))
+                  }), 256))
                 ], 46, _hoisted_3$4))
               : vue.createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
@@ -1374,7 +1478,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))
               : vue.createCommentVNode("", true),
             ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
@@ -1394,7 +1498,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ]))
               : vue.createCommentVNode("", true)
           ], 64))
-        }), 128))
+        }), 256))
       : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [
           vue.createElementVNode("td", { colspan: $options.columnsLength }, [
             ($props.templates.empty)
@@ -1411,7 +1515,7 @@ var script$6 = {
     name: 'FooterCell',
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -1509,7 +1613,7 @@ var script$5 = {
             default: null
         },
         columns: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -1677,11 +1781,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
@@ -2098,7 +2233,11 @@ var script$4 = {
     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"]
@@ -2106,31 +2245,23 @@ var script$4 = {
 };
 
 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");
@@ -2165,7 +2296,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))
+        }, [
+          (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", {
@@ -2173,7 +2306,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           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(() => [
@@ -2202,7 +2337,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                     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,
@@ -2213,9 +2348,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                               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())),
@@ -2227,7 +2362,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                       ]))
                     : (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,
@@ -2239,7 +2374,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                               }, 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,
@@ -2270,28 +2405,41 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                   ? (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,
@@ -2331,7 +2479,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 }]
                 ])
               : vue.createCommentVNode("", true)
@@ -2351,7 +2499,11 @@ var script$3 = {
     emits: ['change'],
     props: {
         checked: null,
-        disabled: null
+        disabled: null,
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -2380,6 +2532,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__default["default"]
     }
 };
 
@@ -2387,6 +2542,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 = 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))),
@@ -2408,9 +2565,16 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       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))
 }
@@ -2501,6 +2665,10 @@ var script$2 = {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     data() {
@@ -2622,7 +2790,7 @@ var script$2 = {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -2638,21 +2806,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__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;
@@ -2661,7 +2834,10 @@ var script$2 = {
     },
     components: {
         DTHeaderCheckbox: script$3,
-        DTColumnFilter: script$4
+        DTColumnFilter: script$4,
+        SortAltIcon: SortAltIcon__default["default"],
+        SortAmountUpAltIcon: SortAmountUpAltIcon__default["default"],
+        SortAmountDownIcon: SortAmountDownIcon__default["default"]
     }
 };
 
@@ -2671,7 +2847,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"
 };
@@ -2714,21 +2891,25 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         ? (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, {
@@ -2742,6 +2923,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,
@@ -2761,7 +2946,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"]))
         : vue.createCommentVNode("", true)
     ])
   ], 46, _hoisted_1$2))
@@ -2857,6 +3042,10 @@ var script$1 = {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     methods: {
@@ -2968,8 +3157,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"]))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -3006,6 +3196,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,
@@ -3025,7 +3219,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"]))
                             : vue.createCommentVNode("", true)
                         ], 6))
                       : vue.createCommentVNode("", true)
@@ -3067,8 +3261,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"]))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -3180,7 +3375,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         sortField: {
             type: [String, Function],
@@ -3284,11 +3479,11 @@ var script = {
         },
         expandedRowIcon: {
             type: String,
-            default: 'pi-chevron-down'
+            default: undefined
         },
         collapsedRowIcon: {
             type: String,
-            default: 'pi-chevron-right'
+            default: undefined
         },
         rowGroupMode: {
             type: String,
@@ -5101,9 +5296,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;
@@ -5128,7 +5320,10 @@ var script = {
         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"]
     }
 };
 
@@ -5152,17 +5347,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 = vue.resolveComponent("SpinnerIcon");
   const _component_DTPaginator = vue.resolveComponent("DTPaginator");
   const _component_DTTableHeader = vue.resolveComponent("DTTableHeader");
   const _component_DTTableBody = vue.resolveComponent("DTTableBody");
@@ -5178,10 +5374,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (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)
@@ -5220,6 +5429,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 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),
@@ -5230,7 +5475,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createVNode(_component_DTVirtualScroller, vue.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: "",
@@ -5263,6 +5508,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,
@@ -5273,7 +5519,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)
               ? (vue.openBlock(), vue.createBlock(_component_DTTableBody, {
                   key: 0,
@@ -5282,6 +5528,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,
@@ -5329,7 +5576,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"]))
               : vue.createCommentVNode("", true),
             vue.createVNode(_component_DTTableBody, {
               ref: "bodyRef",
@@ -5337,6 +5584,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               class: vue.normalizeClass(slotProps.styleClass),
               columns: slotProps.columns,
               empty: $options.empty,
+              first: $data.d_first,
               dataKey: $props.dataKey,
               selection: $props.selection,
               selectionKeys: $data.d_selectionKeys,
@@ -5385,7 +5633,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))
               ? (vue.openBlock(), vue.createElementBlock("tbody", {
                   key: 1,
@@ -5438,15 +5686,55 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 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))
 }