Refactor #3832 - Update DataTable & TreeTable

components/lib/datatable/BodyCell.vue

@@ -40,13 +40,13 @@
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit">
-                <component :is="(column.children && !column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave">
-                <component :is="(column.children && !column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel">
-                <component :is="(column.children && !column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon pi-fw" />
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon pi-fw" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>

components/lib/datatable/ColumnFilter.vue

@@ -176,15 +176,42 @@ export default {
             type: Number,
             default: 2
         },
-        filterElement: null,
+        filterElement: {
-        filterHeaderTemplate: null,
+            type: Function,
-        filterFooterTemplate: null,
+            default: null
-        filterClearTemplate: null,
+        },
-        filterApplyTemplate: null,
+        filterHeaderTemplate: {
-        filterIconTemplate: null,
+            type: Function,
-        filterAddIconTemplate: null,
+            default: null
-        filterRemoveIconTemplate: null,
+        },
-        filterClearIconTemplate: 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

components/lib/datatable/FooterCell.vue

@@ -12,7 +12,7 @@ export default {
     name: 'FooterCell',
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },

components/lib/datatable/HeaderCell.vue

@@ -157,7 +157,7 @@ export default {
             default: null
         },
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },

components/lib/datatable/HeaderCheckbox.vue

@@ -20,7 +20,7 @@ export default {
         checked: null,
         disabled: null,
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },

components/lib/datatable/RowCheckbox.vue

@@ -20,7 +20,7 @@ export default {
         value: null,
         checked: null,
         rowCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },

components/lib/datatable/TableFooter.vue

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

components/lib/datatable/TableHeader.vue

@@ -209,7 +209,7 @@ export default {
             default: null
         },
         headerCheckboxIconTemplate: {
-            type: null,
+            type: Function,
             default: null
         }
     },

components/lib/treetable/BodyCell.vue

@@ -67,7 +67,7 @@ export default {
             default: false
         },
         templates: {
-            type: null,
+            type: Object,
             default: null
         }
     },

components/lib/treetable/HeaderCell.vue

@@ -4,7 +4,7 @@
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
         <span v-if="columnProp('sortable')">
-            <component :is="templates ? templates : findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon pi-fw" />
+            <component :is="(column.children && column.children.sorticon) || findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon pi-fw" />
         </span>
         <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
@@ -43,10 +43,6 @@ export default {
         sortMode: {
             type: String,
             default: 'single'
-        },
-        templates: {
-            type: Function,
-            default: null
         }
     },
     data() {

components/lib/treetable/TreeTable.vue

@@ -43,7 +43,6 @@
                                 :sortOrder="d_sortOrder"
                                 :multiSortMeta="d_multiSortMeta"
                                 :sortMode="sortMode"
-                                :templates="$slots['sorticon']"
                                 @column-click="onColumnHeaderClick"
                                 @column-resizestart="onColumnResizeStart"
                             ></TTHeaderCell>

components/lib/treetable/TreeTableRow.vue

@@ -108,7 +108,7 @@ export default {
             default: null
         },
         templates: {
-            type: null,
+            type: Object,
             default: null
         }
     },

doc/datatable/filter/AdvancedFilterDoc.vue

@@ -15,6 +15,9 @@
             </template>
             <template #empty> No customers found. </template>
             <template #loading> Loading customers data. Please wait. </template>
+            <template #filtericon>
+                <i class="pi pi-discord" />
+            </template>
             <Column field="name" header="Name" style="min-width: 12rem">
                 <template #body="{ data }">
                     {{ data.name }}
@@ -22,6 +25,9 @@
                 <template #filter="{ filterModel }">
                     <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
                 </template>
+                <template #filtericon>
+                    <i class="pi pi-discord" />
+                </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">

doc/datatable/filter/BasicFilterDoc.vue

@@ -18,6 +18,9 @@
             </template>
             <template #empty> No customers found. </template>
             <template #loading> Loading customers data. Please wait. </template>
+            <template #filtericon>
+                <i class="pi pi-discord" />
+            </template>
             <Column field="name" header="Name" style="min-width: 12rem">
                 <template #body="{ data }">
                     {{ data.name }}
@@ -25,6 +28,9 @@
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
                 </template>
+                <template #filtericon>
+                    <i class="pi pi-discord" />
+                </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">