diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index d61a3fbd5..769baf0b5 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -25,7 +25,7 @@
 <script>
 import {DomHandler} from 'primevue/utils';
 import HeaderCheckbox from './HeaderCheckbox.vue';
-import ColumnFilter from './ColumnFilter';
+import ColumnFilter from './ColumnFilter.vue';
 
 export default {
     emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index ef159c886..245dd5c45 100755
--- a/src/components/datatable/TableFooter.vue
+++ b/src/components/datatable/TableFooter.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import FooterCell from './FooterCell';
+import FooterCell from './FooterCell.vue';
 
 export default {
     props: {
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 0764a7180..d9ab5e2d6 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -47,8 +47,8 @@
 </template>
 
 <script>
-import HeaderCell from './HeaderCell';
-import ColumnFilter from './ColumnFilter';
+import HeaderCell from './HeaderCell.vue';
+import ColumnFilter from './ColumnFilter.vue';
 
 export default {
     emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',