Hi community,
I'm currently reworking the frontend data layout for a public menu directory and nutrition calculator hub. Managing large tables with multiple dynamic vectors (like pricing structures, age-appropriate caloric counts, macros, and allergen warnings) is becoming a huge headache when optimizing for mobile-first rendering.
On our main directory page here: https://chickensaladchickmenu.us/, we implemented a clean responsive grid system using compact UI cards for the younger demographic's data sheet, but standard clinical tables still look cluttered on small screens.
How do you guys usually handle massive multi-column data sheets in your design projects? Do you prefer sticky column headers, horizontal swipe indicators, or hiding advanced nutritional metrics behind an expandable overlay trigger? Would love some layout inspiration or component tips!