Resizable Vue-good-table or Vue

Question

I have a table make with Vue-good-table in Vue.js.

I need to find a way for do it resizable. Something like this. https://codepen.io/validide/pen/aOKLNo

Unfortunately, Vue-good-table do not have this option, far as I know. https://github.com/xaksis/vue-good-table/issues/226

I tested with JQuery, but I do not want mix Jquery and Vue, and I do not know if a library in Jquery, it will work with this component. I tested but I did not find any.

There is another way in Javascript/css or Vue for do it?

<vue-good-table
            @on-select-all="'selectAll'"
            :columns="columns"
            :rows="rows"
            :select-options="{ enabled: true }"
            @on-selected-rows-change="selectionChanged"
            :sort-options="{
              enabled: true
            }"></<vue-good-table>

Thanks.

Valadez

Did you find a workaround? mounted solution doesn't work for me – Mapel

Answer 1

add mounted method to your component like this:

mounted: function () {
    var thElm;
    var startOffset;

    Array.prototype.forEach.call(
    document.querySelectorAll("table th"),
    function (th) {
        th.style.position = 'relative';

        var grip = document.createElement('div');
        grip.innerHTML = " ";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = '5px';
        grip.style.position = 'absolute';
        grip.style.cursor = 'col-resize';
        grip.addEventListener('mousedown', function (e) {
            thElm = th;
            startOffset = th.offsetWidth - e.pageX;
        });

        th.appendChild(grip);
    });

    document.addEventListener('mousemove', function (e) {
        if (thElm) {
            thElm.style.width = startOffset + e.pageX + 'px';
        }
    });

    document.addEventListener('mouseup', function () {
        thElm = undefined;
    });
}

Picrotoxin

This is a really great fix even still! If you're still around, do you have any idea how you can add this and also increase the overall width of the table alongside the column width? – Perigee

Uhh sorry, just saw your comment, probably the problem is not relevant already, but the solution is simple: apply the same behavior but with another query selector (not table th, but table). Hope it should work – Picrotoxin

Answer 2

Why not create a renderless wrapping component with your own vanilla JavaScript solution? Something like this:

http://jsfiddle.net/thrilleratplay/epcybL4v/

(function () {
    var thElm;
    var startOffset;

    Array.prototype.forEach.call(
      document.querySelectorAll("table th"),
      function (th) {
        th.style.position = 'relative';

        var grip = document.createElement('div');
        grip.innerHTML = " ";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = '5px';
        grip.style.position = 'absolute';
        grip.style.cursor = 'col-resize';
        grip.addEventListener('mousedown', function (e) {
            thElm = th;
            startOffset = th.offsetWidth - e.pageX;
        });

        th.appendChild(grip);
      });

    document.addEventListener('mousemove', function (e) {
      if (thElm) {
        thElm.style.width = startOffset + e.pageX + 'px';
      }
    });

    document.addEventListener('mouseup', function () {
        thElm = undefined;
    });
})();

There is no need to use jQuery. You can wrap your table with a custom renderless component and dive deeper into its slot component using this.$el and the document.querySelector.

Fariss

Answer 3

You can try this library in vanillajs https://github.com/MonsantoCo/column-resizer

<div id="app">
  <table border="1" ref="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
</div>

<script>
    new Vue({
      el: "#app",
      data: {},

      mounted() {
        let resizable = ColumnResizer.default

        new resizable(this.$refs.table, {
          liveDrag:true,
          draggingClass:"rangeDrag",
          gripInnerHtml:"<div class='rangeGrip'></div>",
          minWidth:8
        })
      }
    })
</script>

https://jsfiddle.net/Wagner/eywraw8t/414137/

Boots