Best practices to manage Data Grid 2 with responsiveness & large datasets in Mendix

0
Specifically, I’m looking for best practices and step-by-step guidance on the following points: How to design responsive Data Grid 2 layouts that work well across: Desktop Tablet Mobile(column visibility, column widths, alignment, and usability)
asked
3 answers
1

Hello Jay,

Data Grid 2 works best when you design for desktop first, then progressively reduce information for smaller screens instead of trying to make everything fit everywhere.

Rule of thumb

  • Desktop → Full data, many columns

  • Tablet → Important columns only

  • Mobile → Minimal columns + drill-down

You can refer to the documentation for Data Grid 2 & Data Grid 2 Properties for step by step configuration.

UI Guide - UI Design

answered
1

Because tablet and mobile screens are narrower than desktop, keeping all columns inside the grid reduces readability. For this reason, primary columns should remain in the grid, while secondary and detailed information should be moved to a details page or a “View details” action triggered from the row. The number of columns should be kept to a minimum and users should be given a separate way to access details. On desktop, you typically won’t face such issues; you can display all fields as needed, since Mendix automatically enables horizontal scrolling when there are too many columns.

answered
0

Hey Jay, I definitely agree with Ahmet and Vikas' suggestions. The only thing I'd add is for tablets/phones when you have people using their fingers to click instead of a mouse/trackpad - you should assume they can be less precise, so it's important that you consider designs that have bigger buttons / rows / etc. Sometimes it's difficult, but for this reason I prefer using a gallery-with-cards setup over a table when possible if I think I will have mobile + tablet users.

answered