[Masonry] Ability to sort elements from left to right

[Whitelistedd]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The ability to sort Masonry elements from left to right instead of top to bottom where it just fills any spot instead of force sorting from left to right

Examples 🌈

I am assuming this is how it works right now maybe I am wrong

Motivation 🔦

I need to sort hotel cards from most expensive to less expensive and its not really displaying the order correctly

[Whitelistedd]

any updates?

[Whitelistedd]

any updates?

[Whitelistedd]

please?

[ZeeshanTamboli]

@hbjORbj Can you take a look?

[aredden]

Yeah- seems like it orders items like-

1 4 7
2 5 8
3 6 9

instead of-

1 2 3
4 5 6
7 8 9

Unless I'm doing something incorrectly, but- the way it works right now makes it very difficult to use masonry with any sort of infinite scrolling- as it would result in things being completely rearranged. I hope there's a simple fix for this and that I'm completely wrong- but as it is, it's not very convenient for most use cases.

[DiegoAndai]

Hi @Whitelistedd, thanks for the report, and sorry for the late reply

One of the initial requirements for the Masonry component was that items should be placed in the shortest column available, so "by design" it disregards the order they are provided.

It would be nice if we could deactivate this for the use case you report, so if you (or anyone) would like to work on a PR, that would be great 😊🚀

[Rishi556]

I've started implementing it over here: /~https://github.com/Rishi556/material-ui/tree/sequential-columns if anyone wants to follow along i've got a draft PR up #39904. I've got an eslint error to resolve and some tests to add, but maybe I'll be able to PR it in on Monday.