primevue 3.26.1 → 3.28.0

package/datatable/TableBody.vue

@@ -11,7 +11,13 @@
                 >
                     <td :colspan="columnsLength - 1">
                         <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
-                            <span :class="rowGroupTogglerIcon(rowData)"></span>
+                            <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
+                            <template v-else>
+                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" />
+                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" />
+                            </template>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
@@ -45,7 +51,6 @@
                             :rowIndex="getRowIndex(index)"
                             :index="i"
                             :selected="isSelected(rowData)"
-                            :rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
                             :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
                             :editMode="editMode"
@@ -55,6 +60,9 @@
                             :virtualScrollerContentProps="virtualScrollerContentProps"
                             :ariaControls="expandedRowId + '_' + index + '_expansion'"
                             :name="nameAttributeSelector"
+                            :isRowExpanded="isRowExpanded(rowData)"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
                             @radio-change="onRadioChange($event)"
                             @checkbox-change="onCheckboxChange($event)"
                             @row-toggle="onRowToggle($event)"
@@ -89,6 +97,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
@@ -389,16 +399,6 @@ export default {
                 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;
@@ -593,7 +593,9 @@ export default {
         }
     },
     components: {
-        DTBodyCell: BodyCell
+        DTBodyCell: BodyCell,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>

package/datatable/TableFooter.vue

@@ -27,7 +27,7 @@ export default {
             default: null
         },
         columns: {
-            type: null,
+            type: Object,
             default: null
         }
     },

package/datatable/TableHeader.vue

@@ -35,6 +35,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
                     />
                 </template>
             </tr>
@@ -53,6 +54,10 @@
                             :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="filters"
                             :filtersStore="filtersStore"
                             :filterInputProps="filterInputProps"
@@ -104,6 +109,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
                     />
                 </template>
             </tr>
@@ -205,6 +211,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     methods: {