From 4b6adb30bdface77cd3bcf3cfc9b1368f09f20ef Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 10 Feb 2021 15:34:46 +0300 Subject: [PATCH] Apply fixed width to prevent sticky getting pushed out --- src/components/datatable/DataTable.vue | 12 + src/views/datatable/DataTableScrollDemo.vue | 423 +------------------- src/views/liveeditor/LiveEditor.vue | 6 +- 3 files changed, 24 insertions(+), 417 deletions(-) diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index b80661ac1..36d6ec944 100755 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -390,6 +390,10 @@ export default { this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field'))); this.d_columnOrder = columnOrder; } + + if (this.scrollable && this.scrollDirection !== 'vertical') { + this.updateScrollWidth(); + } }, beforeUnmount() { this.unbindColumnResizeEvents(); @@ -403,6 +407,10 @@ export default { this.columnWidthsRestored = true; } } + + if (this.scrollable && this.scrollDirection !== 'vertical') { + this.updateScrollWidth(); + } }, methods: { columnProp(col, prop) { @@ -1575,6 +1583,9 @@ export default { } return cloned; + }, + updateScrollWidth() { + this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px'; } }, computed: { @@ -1790,6 +1801,7 @@ export default { .p-datatable-scrollable .p-datatable-thead > tr > th, .p-datatable-scrollable .p-datatable-tbody > tr > td, .p-datatable-scrollable .p-datatable-tfoot > tr > td { + display: block; flex: 1 1 0; } diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue index ea620c500..e91929936 100755 --- a/src/views/datatable/DataTableScrollDemo.vue +++ b/src/views/datatable/DataTableScrollDemo.vue @@ -156,201 +156,12 @@ 

 

-import CustomerService from '../../service/CustomerService';
 
-export default {
-    data() {
-        return {
-           customers: null,
-            virtualCustomers: null,
-            lazyTotalRecords: 0,
-            frozenValue: null,
-            loading: false,
-            dialogVisible: false
-        }
-    },
-   customerService: null,
-    inmemoryData: null,
-   created() {
-        this.customerService = new CustomerService();
-    },
-    mounted() {
-        this.loading = true;
-
-        this.customerService.getCustomersLarge().then(data => {
-            this.customers = data;
-            this.loading = false;
-        });
-        this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
-
-        this.frozenValue = [
-            {
-                id: 1255,
-                name: "James McAdams",
-               country: {
-                    name: "United States",
-                   code: "us"
-                },
-               company: "McAdams Consulting Ltd",
-                date: "2014-02-13",
-                status: "qualified",
-                activity: 23,
-                representative: {
-                    name: "Ioni Bowcher",
-                    image: "ionibowcher.png"
-                }
-            },
-            {
-                id: 5135,
-                name: "Geraldine Bisset",
-               country: {
-                    name: "France",
-                   code: "fr"
-                },
-               company: "Bisset Group",
-                status: "proposal",
-                date: "2019-05-05",
-                activity: 0,
-                representative: {
-                    name: "Amy Elsner",
-                    image: "amyelsner.png"
-                }
-            }
-        ];
-
-        setTimeout(() => {
-            this.virtualCustomers = this.loadChunk(0, 40);
-            this.lazyTotalRecords = 500;
-        }, 250);
-    },
-    methods: {
-          loadChunk(index, length) {
-            let chunk = [];
-            for (let i = 0; i < length; i++) {
-               chunk[i] = {...this.inmemoryData[i]};
-            }
-
-            return chunk;
-        },
-        onVirtualScroll(event) {
-            setTimeout(() => {
-                //last chunk
-                if (event.first === 480)
-                    this.virtualCustomers = this.loadChunk(event.first, 20)
-                else
-                    this.virtualCustomers = this.loadChunk(event.first, event.rows)
-            }, 250);
-        },
-        openDialog() {
-            this.dialogVisible = true;
-        },
-       closeDialog() {
-            this.dialogVisible = false;
-        }
-    }
-}
@@ -368,125 +179,6 @@ export default { return { customers: null, customersGrouped: null, - virtualCustomers: null, - lazyTotalRecords: 0, - frozenValue: null, - loading: false, - dialogVisible: false, - sources: { - 'template': { - content: ` - - \ No newline at end of file diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue index 6e3ced3c5..44e8fe301 100644 --- a/src/views/liveeditor/LiveEditor.vue +++ b/src/views/liveeditor/LiveEditor.vue @@ -24,8 +24,10 @@ export default { } }, mounted() { - if(this.sources.api) this.editComposition = true; - else this.editComposition = false; + if (this.sources && this.sources.api) + this.editComposition = true; + else + this.editComposition = false; }, props: { name: {