Refactor #3965 - Refactor on DataTable

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() {

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"

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" />

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">