Resizing columns
RobbieTheWagner opened this issue · comments
Is resizing columns supported?
It isn't, but it would be a great addition!
Seems that this feature requires a bit of css, which "kind of" goes against the simplicity principle of yeti table (see Styling section of docs).
We could add inline css styles for this. We need a position: absolute resize grip inside <th>s with some width and cursor. And the <th> itself would have to be position: relative.
I don't think the position: relative on the <th> would hurt anyone.
For the resize grip, we can add a default customizable class to it, and users can override inline styles with !important if desired.
Another option is to detect if a custom class is passed in, and if so do not apply any inline styles, but this probably makes it less predictable.
So, I'm inclined to just use inline styles to make this happen, since they are essential for the feature to work and not just an aesthetic preference. What do you think?
@miguelcobain perhaps it is outside the scope of the addon. ember-table supports it, and perhaps we should keep things lightweight here, and people can use a heavier library to do the more in depth stuff?
The main reason I use this library is the declaration of the table in HBS. All the others use a column array in the JS. Using a heavier weight one means switching declarative style as well.
I am not very good with CSS, will help if I can.
I would think there should be a switch though to opt in. You should condition all the extra css with this switch. The bad thing though is the re-size would not preserve across invocations, where as the others could put the column array in a singleton and store the sizes in that array.
I took a stab at it in the resize branch: https://github.com/miguelcobain/ember-yeti-table/tree/resize
This adds new theme properties that you can use to control the classes that are applied for resizing:
The implementation uses the excellent HammerJS library, but that is only imported dynamically if needed. So, if you never use @resizable={{true}}, Hammer js will never be downloaded.
Using this feature is very identical to @sortable. You just need to pass @resizable={{true}} to <YetiTable> or to any specific column. You can also define resizable globally in your config, pretty much like sortable.
Can you guys test it and let me know how this is working for you?
Shouldnt the initHammer be called from registerTH and teardown from unregisterTH with element just being passed to the methods? This would allow you not to have the div that you have to hide. Although I guess this does support turing resizing on and off after the component has been rendered. I wonder how often that would happen.
Nice use of the element-modifiers
@cah-briangantzler that was actually a mistake on my part. I was testing some things.
We can only respond to to the resize grip div. We can't resize if user drags the whole cell. It should work fine now.