Mobile First Grids

ZingGrid is responsive and mobile-ready by default! This makes it easy to make data grids with your mobile users in mind.

ZingGrid Layouts

ZingGrid has two layouts for displaying your data: as rows, with each entry being a row in a standard table, or as customizable cards that can be displayed vertically for a mobile friendly experience. ZingGrid automatically switches from row mode to card mode on smaller screens, so you don't have to worry about changing the view dynamically based on screen size.

Modal Editor

When optimizing your editable grid for mobile, ensure that users are able to edit using the modal editor.

Enable the modal (overlay) editor by adding [editor="modal"] to the <zing-grid> tag, like so:

<zing-grid data="..." editor="modal"></zing-grid>

By default, the 'modal' editor is automatically enabled for viewport="mobile" device widths.

Styling

To customize and style your mobile grid, look no further than the <zg-card> tag. With <zg-card>, you can set an HTML template for your custom modal

Mobile Responsiveness

Defining Viewports

The viewport attribute automatically changes its value based on the current width of the grid, according to internal presets. Similar to the native @media CSS directive (albeit only in the horizontal), it changes based on the width of the grid, not the device.

The value of viewport changes as the width of the grid changes. You can use these breakpoints when styling your custom grids, or create your own using the viewport-types='' config. Currently, there are 5 built-in breakpoints:

• mobile - 0 to 550px
• tablet-portrait - 551px to 1023px
• tablet-landscape - 1024px to 1199px
• desktop - 1200px to 1399px
• desktop-large - 1400px+

For more information on defining viewports, view our Viewport documentation.