Fixed #5046 - DataTable: Hydration attribute mismatch with sortable columns

components/lib/baseicon/BaseIcon.vue

@@ -1,11 +1,16 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import BaseIconStyle from 'primevue/baseicon/style';
-import { ObjectUtils } from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BaseIcon',
     extends: BaseComponent,
+    data() {
+        return {
+            id: this.$attrs.id
+        };
+    },
     props: {
         label: {
             type: String,
@@ -17,6 +22,14 @@ export default {
         }
     },
     style: BaseIconStyle,
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        }
+    },
     methods: {
         pti() {
             const isLabelEmpty = ObjectUtils.isEmpty(this.label);
@@ -30,6 +43,7 @@ export default {
                         }
                     ]
                 }),
+                id: this.id,
                 role: !isLabelEmpty ? 'img' : undefined,
                 'aria-label': !isLabelEmpty ? this.label : undefined,
                 'aria-hidden': isLabelEmpty

components/lib/icons/arrowdown/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowDownIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/arrowup/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowUpIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/ban/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BanIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/exclamationtriangle/index.vue

@@ -24,14 +24,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ExclamationTriangleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/eyeslash/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'EyeSlashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/filter/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/filterslash/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterSlashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/infocircle/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'InfoCircleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/pencil/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PencilIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/plus/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PlusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/refresh/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'RefreshIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/search/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/searchminus/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchMinusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/searchplus/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchPlusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/sortalt/index.vue

@@ -22,14 +22,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAltIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/sortamountdown/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountDownIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/sortamountupalt/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountUpAltIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/spinner/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SpinnerIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/star/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/starfill/index.vue

@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarFillIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/thlarge/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ThLargeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/timescircle/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TimesCircleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/trash/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TrashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/undo/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UndoIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/upload/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UploadIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/windowmaximize/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMaximizeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

components/lib/icons/windowminimize/index.vue

@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMinimizeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };