pile ties up when sorting?

[giovannicoppola]

Test case: https://codepen.io/Giovanni-Coppola/pen/mdQOBMJ

When sorting, is there an option or a way to pile up the ties?

e.g. in the test case, when sorting by number, to place Te and Tex (which have the same number) on top of each other.
Thanks!!

[thesublimeobject]

@giovannicoppola — There isn't a way to put them "on top of each other", but you could hide one of them by hooking into the events/writing a custom function around it. Off the top of my head, you would probably need to write a specifically named sort method and then hook into arrangeComplete, get the last sort order, and then manually filter out the items you don't want shown in the current sort if they match your criteria.

[giovannicoppola]

sorry @thesublimeobject I was not clear. I meant piling them up, stacking them so that it is visually clear they have the same value. Perhaps I can achieve that with a new grid?

[thesublimeobject]

Do you mean "stacking" as in "cascading" them so that you can see there are multiple tiles in on "group"? If so, I don't think there would be a good way to do this natively through the library. You could potentially mess with the CSS on targeted classnames after animation, but I'm not sure that would work out very well. Especially since with more than a couple of tiles you might start running into other rows, but I might not be interpreting what you're wanting correctly.

[giovannicoppola]

yes I meant something like this:

[thesublimeobject]

I don't think there's a native way to do this, unfortunately. You could try a different layout type with some tweaks, but depending on the scale of the grid/# of items, I think it would get really tricky really quick.

[giovannicoppola]

thank you so much for thinking about this and trying to help @thesublimeobject! In order to avoid the XY problem, I will outline what I am trying to accomplish, in case you have suggestions. I was actually able to arrange tiles based on status in plain HTML (pen here), but I wanted the tiles to 'fly' from one status to another when rearranging, just like Isotope does. Are you aware of other ways to accomplish this? I read about CSS3, Greensock, and Draggable? Thanks!

[thesublimeobject]

I would probably just use some simple CSS transitions. There are a lot of libraries that have nice pre-built effects. Here are two I can think of off the top of my head:

• animate.css
• animista

You could always go with a library like greensock as well. It's a very in-depth library, but I think it would probably be overkill for this. I would think any sort of transition/animation library like the ones above would work fine.

In addition, I don't know how big this project is or what you're using it for, but from just a quick look at your code on that newest pen, I would maybe even just go with React and then use an animation library like React Spring. Maybe you don't want/need to get into a whole frontend framework for this, but it might be easier depending on the size of the project.

Hope this helps!