Incorrect displaying of table header after container resizing (without window resize)

[ik9999]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

What version are you using? 2.18.0

What browser? Chrome

Expected Behavior

What did you expect to happen?

Re-calculated column width

Actual Behavior

What actually happened?

When table is getting resized without resizing the window, header column widths aren't getting re-calculated here which leads to incorrectly aligned table header cells.

Steps to Reproduce the Problem

Resize the table container without resizing the screen.

I have a working solution using ResizeObserver (polyfill). Not sure if its worth a pull request or not.

[zacharytyhacz]

Related: #639 .

I agree about this issue, it should be fixed with some sort of delay on mount or create. Here's some of my screenshots related to this issue:

On load, the header columns are incorrectly sized:

This is it after resizing the page, which fixes it the column headers somehow

@ik9999 Please share your code how you used the ResizeObserver to fix this issue with VGT, or make a pull request. Others are having this same issue and can find help from you here in this thread to resolve the issue.

[ik9999]

@zacharytyhacz Delay won't help because div can be resized by js and the table won't adapt.

Here is the change i've made in src/components/Table.vue:

diff --git a/src/components/Table.vue b/src/components/Table.vue
index da0c27c..458e69e 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -310,6 +310,7 @@ import VgtPagination from './VgtPagination.vue';
 import VgtGlobalSearch from './VgtGlobalSearch.vue';
 import VgtTableHeader from './VgtTableHeader.vue';
 import VgtHeaderRow from './VgtHeaderRow.vue';
+import ResizeObserver from 'resize-observer-polyfill';

 // here we load each data type module.
 import * as CoreDataTypes from './types/index';
@@ -398,6 +399,7 @@ export default {
   data: () => ({
     // loading state for remote mode
     tableLoading: false,
+    resizeObserver: null,

     // text options
     nextText: 'Next',
@@ -1469,8 +1471,23 @@ export default {
     if (this.perPage) {
       this.currentPerPage = this.perPage;
     }
+    this.resizeObserver = new ResizeObserver((entries, observer) => {
+      if (this.$refs['table-header-primary']) {
+        this.$refs['table-header-primary'].setColumnStyles();
+      }
+      if (this.$refs['table-header-secondary']) {
+        this.$refs['table-header-secondary'].setColumnStyles();
+      }
+    });
+    this.resizeObserver.observe(this.$el);
     this.initializeSort();
   },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  },
+

   components: {
     'vgt-pagination': VgtPagination,

Also, resize-observer-polyfill package is needed. Im not sure how fast ResizeObserver is, so i dont know whether its ok to merge it into master.

[zacharytyhacz]

@ik9999 I would definitely consider it as a good pull request, there's ~ 3 issues regarding this issue and would help out a bunch of people.