Q-Table support to columns drag resizing

[dariodepaolis]

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like I'd like to have a prop to enable the manual resize of column by user. (Like Grid component in ExtJS or Syncfusion) Also a dblclick on the resizer the will expand to maximum width of the col will be awesome.

Describe alternatives you've considered No alternative so far found, we have to manually rewrite the table header adding dragging function, auto-width, expand, ellipsis etc.

[rfox12]

+1. If Quasar is going to get serious about an improved data table (which I would love) I think perhaps we should have a holistic discussion. Potentially huge amounts of work.

[antonispat10]

Hello,

You could check my pull request https://github.com/quasarframework/quasar/pull/5460

[dariodepaolis]

Great ty, asap I'll give it a try!

[rfox12]

This is more important now. User's expect columns to be able to be resized! Also need a nice / easy solution for truncating text. Some other thoughts...

• set a minimum column size (entire table or per column). We don't want the user to make the column completely disappear unintentionally.

• Have treatment options for text that is too long to fit in the cell (wrap text, use ellipses, or some "other" slot) AND be able to have variables that we can use to provide other UI actions (e.g. maybe I want to display a tooltip--but only if the text in that particular cell had to be truncated)

• Sticky header and footer options without complicated CSS--to stay in effect if the QTable goes "fullscreen". I think having some caveats about browser support in the documentation would be ok...

• Stretch goal... drag / reorder columns / rows

[satyavh]

We would also love this feature 👍

[bytebrain]

I had same problem, now I use https://quasar.dev/vue-components/splitter instead of tables.

[Jokertwo]

I would like to ask about the status of this feature. Is there any progress?

[Jokertwo]

I would like to ask about the status of this feature. Is there any progress?

Or exist there some workaround on how to solve it?

[giftofsky]

Any update/solution on the issues? How can we raise the priority of this?

[Jokertwo]

I found one possible workaround for how to solve this issue. Example

[hawkeye64]

It's a "work-in-progress" as a directive that will work on any table (QTable, QMarkupTable, etc) but here is a starting point. There are issues with context for this directive. The data should be attached to the element itself and retrieved from there. Right now, you could only have one directive going. Also, the created divs should be maintained, so they can be deleted if necessary. Consider it a WIP. https://codepen.io/Hawkeye64/pen/dypyNWL

[giftofsky]

Many thanks @Jokertwo @hawkeye64. Tentatively, we'll try this while waiting Q-Table to fully support it ;)

[hawkeye64]

I will work on my this coming week and see if I can't clean it up a bit. Consider it pre-alpha and should not be usedfor anything yet, other than testing purposes

[pdanpdan]

Cross ref:

• https://github.com/quasarframework/quasar/issues/5115
• https://github.com/quasarframework/quasar/issues/4138

[hawkeye64]

You know what, I had forgotten all about this. :( Such is a busy life

[mikebrsv]

Any updates on that? Or maybe there any any 3rd party modules to drag resizing (and, by any change, drag column reordering)?

[henryfool91]

Hey guys! Is there any plans for this, or there is no point to wait? No pressure, just wanna know :)

[hawkeye64]

We're going to be starting a roadmap for Quasar v3. I will push to get this in, but no promises.

[goldenram]

Is there any update on this. I thought I could hack up a work around to this real easy, but since the sorting icon is adding at the end (or beginning (yuck)) of the header, the resize icon is inside the sorting icon. No way around this without templating the entire header. So, it would be great to have this in 2.x, unless we are close to v3. I really don't want to have to go back to ag-grid. :-)

[goldenram]

Or if there is way to keep the sorting icon always on the left side instead of it moving around based on how the text is aligning, then it would be easier to template this. But cannot figure out a way to do that either.

[wz5899]

Here is a workaround for the sorting triggered by column resizing, based on hawkeye64's solution in https://codepen.io/Hawkeye64/pen/dypyNWL

In Class ResizableTable, set an indicator in the table for column resizing

onMouseDown(e) {
   ...
   this.table.colResizing = true;
}

In q-table, add a custom sort method :sort-method="customSort". In "customSort" function, check the indicator. If true, ignore the sorting and clear the indicator.

const table = document.getElementById([your table id]).__tableResizable.table;
if (table.colResizing) {
    table.colResizing = false;
    // return rows unsorted
} else {
    // sort as usual
}

[kiranfenrir]

Is this still being investigated? We have an active request on our implementation for this.

[0xhellord]

Is it still WIP?

[hope-zjl]

Hello, please tell me, when the table appears horizontal scroll bar, this column dragging function is disabled, how should I solve it?

[neluckoff]

I know this problem is not solved yet, but maybe someone wants to share their working solution? The problem with @hawkeye64 and @Jokertwo solution is that with a large volume of table columns, they simply stop working. I want to make an implementation that will extend beyond the table in width and include overflows.

Maybe someone implemented this?

[agroebe]

Would love to see this get implemented. I think this deserves to be moved up in priority and I think lots of users kind of expect this convenience from a UI/UX perspective. For example, we have a lot of active discussions and an issue opened for this exact request.

[Daemach]

+1 - we have clients asking for this now.

[aleksmelnyk]

yep, agree, basic feature which is missing.

[kirillidze]

Here is a workaround for the sorting triggered by column resizing, based on hawkeye64's solution in https://codepen.io/Hawkeye64/pen/dypyNWL

In Class ResizableTable, set an indicator in the table for column resizing

onMouseDown(e) {
   ...
   this.table.colResizing = true;
}

In q-table, add a custom sort method :sort-method="customSort". In "customSort" function, check the indicator. If true, ignore the sorting and clear the indicator.

const table = document.getElementById([your table id]).__tableResizable.table;
if (table.colResizing) {
    table.colResizing = false;
    // return rows unsorted
} else {
    // sort as usual
}

@wz5899 thanks! However, when using your solution, the sorting icon will be changed. Actually we need to prevent sorting at all: add the no-pointer-events class to the table inside the onMouseDown event. Then remove the no-pointer-events class in the onMouseUp event:

onMouseDown(e) {
   ...
   this.table.classList.add('no-pointer-events');
}

onMouseUp(e) {
   ...
   this.table.classList.remove('no-pointer-events');
}

[gaby]

5 years later and still no update on this?