Resize table rows and columns for Qtable

[Gemiou]

Hello i have a vue 3 directive for nuxt 3 to create our q-table cell Resizable , you can view the code above

For nuxt 3 plugin
Create a file inside plugins folder and add these code

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('columns-resizable', {
        mounted(el) {
            const tableClass = el.getElementsByClassName('q-table')[0];
            const nodeName = tableClass.nodeName;
            if (['TABLE', 'THEAD'].indexOf(nodeName) < 0) return;

            const thead = tableClass.querySelector('thead');
            const ths = thead.querySelectorAll('th');
            const barHeight = nodeName === 'TABLE' ? tableClass.offsetHeight : thead.offsetHeight;

            const resizeContainer = document.createElement('div');
            tableClass.style.position = 'relative';
            resizeContainer.style.position = 'relative';
            resizeContainer.style.width = tableClass.offsetWidth + 'px';
            resizeContainer.className = 'vue-columns-resizable';
            tableClass.parentElement.insertBefore(resizeContainer, tableClass);
            let moving = false;
            let movingIndex = 0;

            ths.forEach((th, index) => {
                th.style.width = th.offsetWidth + 'px';

                if (index + 1 >= ths.length) return;

                const nextTh = ths[index + 1];

                const bar = document.createElement('div');
                bar.style.position = 'absolute';
                bar.style.left = nextTh.offsetLeft + 4 + 'px';
                bar.style.top = 0;
                bar.style.height = barHeight + 'px';
                bar.style.width = '8px';
                bar.style.cursor = 'col-resize';
                bar.style.zIndex = 1;
                bar.className = 'columns-resize-bar';

                bar.addEventListener('mousedown', () => {
                    moving = true;
                    movingIndex = index;
                    document.body.style.cursor = 'col-resize';
                    document.body.style.userSelect = 'none';
                });

                resizeContainer.appendChild(bar);
            });
            const bars = resizeContainer.querySelectorAll('.columns-resize-bar');

            document.addEventListener('mouseup', () => {
                if (!moving) return;

                moving = false;
                document.body.style.cursor = '';
                document.body.style.userSelect = '';

                bars.forEach((bar, index) => {
                    const th = ths[index];
                    const nextTh = ths[index + 1];
                    th.style.width = th.offsetWidth + 'px';
                    bar.style.left = nextTh.offsetLeft - 4 + 'px';
                });
            });
            const cutPx = (str) => +str.replace('px', '');

            const handleResize = (e) => {
                if (moving) {
                    const th = ths[movingIndex];
                    const nextTh = ths[movingIndex + 1];
                    const bar = bars[movingIndex];
                    th.style.width = cutPx(th.style.width) + e.movementX + 'px';
                    nextTh.style.width = cutPx(nextTh.style.width) - e.movementX + 'px';
                    bar.style.left = nextTh.offsetLeft - 4 + e.movementX + 'px';
                }
            };

            resizeContainer.addEventListener('mousemove', handleResize);
            tableClass.addEventListener('mousemove', handleResize);
        },
    });
});

And then in q-table component add v-columns-resizable

<q-table v-columns-resizable **other options** </q-table>

Thanks a lot

[zhongjiaguo001]

Hi, I am trying to use your example to add this function to my table, but it is not working properly

this is my demo link https://codesandbox.io/p/sandbox/confident-mccarthy-rcnc4d?file=%2Fsrc%2Fboot%2Fdirectives%2FcolumnResize.js%3A7%2C1

[zhongjiaguo001]

Thank you for your valuable time and prompt response. If you have made any modifications to this feature, I kindly request you to inform me as it is of great importance to me. Once again, I sincerely appreciate your time and assistance.

[Gemiou]

const resizable = {
  mounted(el) {
    const tableClass = el.getElementsByClassName("q-table")[0];
    const nodeName = tableClass.nodeName;
    if (!["TABLE", "THEAD"].includes(nodeName)) return;

    const thead = tableClass.querySelector("thead");
    const ths = thead.querySelectorAll("th");
    const barHeight = thead.offsetHeight;

    const resizeContainer = document.createElement("div");
    tableClass.style.position = "relative";
    resizeContainer.style.position = "relative";
    resizeContainer.className = "vue-columns-resizable";
    tableClass.parentElement.insertBefore(resizeContainer, tableClass);
    let moving = false;
    let movingIndex = 0;

    ths.forEach((th, index) => {
      th.style.width = th.offsetWidth + "px";

      if (index + 1 >= ths.length) return;

      const nextTh = ths[index + 1];

      const bar = document.createElement("div");
      bar.style.position = "absolute";
      bar.style.left = nextTh.offsetLeft + 4 + "px";
      bar.style.top = "0px";
      bar.style.height = barHeight + "px";
      bar.style.width = "8px";
      bar.style.cursor = "col-resize";
      bar.style.zIndex = "1";
      bar.className = "columns-resize-bar";

      bar.addEventListener("mousedown", () => {
        moving = true;
        movingIndex = index;
        document.body.style.cursor = "col-resize";
        document.body.style.userSelect = "none";
      });

      resizeContainer.appendChild(bar);
    });
    const bars = resizeContainer.querySelectorAll(".columns-resize-bar");

    document.addEventListener("mouseup", () => {
      if (!moving) return;

      moving = false;
      document.body.style.cursor = "";
      document.body.style.userSelect = "";

      bars.forEach((bar, index) => {
        const th = ths[index];
        const nextTh = ths[index + 1];
        th.style.width = th.offsetWidth + "px";
        bar.style.left = nextTh.offsetLeft - 4 + "px";
      });
    });
    const cutPx = (str) => +str.replace("px", "");

    const handleResize = (e) => {
      if (moving) {
        const th = ths[movingIndex];
        const nextTh = ths[movingIndex + 1];
        const bar = bars[movingIndex];
        th.style.width = cutPx(th.style.width) + e.movementX + "px";
        nextTh.style.width = cutPx(nextTh.style.width) - e.movementX + "px";
        bar.style.left = nextTh.offsetLeft - 4 + e.movementX + "px";
      }
    };

    resizeContainer.addEventListener("mousemove", handleResize);
    tableClass.addEventListener("mousemove", handleResize);
  },

};

export default ({ app }) => {
  app.directive("resizableo", resizable);
};

Can you try these code ?

[zhongjiaguo001]

It still doesn't work. Here's the demo
https://codesandbox.io/p/sandbox/confident-mccarthy-rcnc4d?file=%2Fsrc%2Fpages%2FIndex.vue%3A8%2C29

[zhongjiaguo001]

Thank you for your example. After modifying and analyzing the code, I made changes to this section of code. I found that the 'th' attribute in Quasar can't be used to change the width, instead, the 'min-width' property should be used for that purpose. I have made certain restrictions on column width dragging based on whether there is a scrollbar present. If there is a scrollbar, only the width of the element itself is changed. If there is no scrollbar, it's necessary to judge the width of adjacent elements. Here is the code, which I have encapsulated into a directive for ease of use. https://codesandbox.io/p/sandbox/confident-mccarthy-rcnc4d?file=%2Fsrc%2Fboot%2Fdirectives%2Fresizable.js%3A4%2C24

[lee1994522]

Could you please share your demo again because your link is unavailable now. @zhongjiaguo001