The first version of the SeatFinder seating chart was one long flat list. Eighty guests, each row with a name and a table number in parentheses, sorted by table. It worked, technically. It also looked like a spreadsheet that had lost its will to live, and finding your own table meant scanning the whole page. A seating chart is not a list of guests. It is a list of tables, and each table has its own list of guests, and the page should look like that.
The fix was a map inside a map . It felt weird the first time I wrote it, like I was nesting something that should stay flat, and I spent a while wondering if there was a cleaner way. There is not, really. When the data is nested, the render is nested, and the cleanest version is the one that admits it.
the shape of the data decides the shape of the render
The data already had the answer in it. Each table is an object with a guests array inside it, because that is how a wedding actually works. Nobody thinks of a seating chart as eighty loose guests.…