From 67e65198d204271aa902ee1e16009c14aad20757 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 5 Jun 2023 14:18:11 +0300
Subject: [PATCH] Refactor #3965 - Refactor on DataTable

---
 components/lib/datatable/BaseDataTable.vue | 13 +++++++------
 components/lib/datatable/DataTable.vue     |  2 +-
 components/lib/datatable/TableFooter.vue   |  2 +-
 components/lib/datatable/TableHeader.vue   |  2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index 6b96d130b..aa122a40a 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -7,10 +7,6 @@ const styles = `
     position: relative;
 }
 
-.p-datatable > .p-datatable-wrapper {
-    overflow: auto;
-}
-
 .p-datatable-table {
     border-spacing: 0px;
     width: 100%;
@@ -43,7 +39,6 @@ const styles = `
 }
 
 .p-datatable-scrollable-table > .p-datatable-thead {
-    position: sticky;
     top: 0;
     z-index: 1;
 }
@@ -54,7 +49,6 @@ const styles = `
 }
 
 .p-datatable-scrollable-table > .p-datatable-tfoot {
-    position: sticky;
     bottom: 0;
     z-index: 1;
 }
@@ -245,6 +239,12 @@ const styles = `
 }
 `;
 
+const inlineStyles = {
+    wrapper: { overflow: 'auto' },
+    thead: { position: 'sticky' },
+    tfoot: { position: 'sticky' }
+};
+
 const classes = {
     root: ({ instance, props }) => [
         'p-datatable p-component',
@@ -730,6 +730,7 @@ export default {
     },
     css: {
         classes,
+        inlineStyles,
         loadStyle
     },
     provide() {
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index e75b34125..0babc094f 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -47,7 +47,7 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </DTPaginator>
-        <div :class="cx('wrapper')" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
+        <div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
             <DTVirtualScroller
                 ref="virtualScroller"
                 v-bind="virtualScrollerOptions"
diff --git a/components/lib/datatable/TableFooter.vue b/components/lib/datatable/TableFooter.vue
index 850d9b510..c2fc3a804 100755
--- a/components/lib/datatable/TableFooter.vue
+++ b/components/lib/datatable/TableFooter.vue
@@ -1,5 +1,5 @@
 <template>
-    <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
+    <tfoot v-if="hasFooter" :class="cx('tfoot')" :style="sx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
         <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                 <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 0fbfc2c3c..c79d2feb8 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
+    <thead :class="cx('thead')" :style="sx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
         <template v-if="!columnGroup">
             <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">