Layouts

ZingGrid automatically resizes your columns and changes from row to card layout in smaller browsers. You can also easily switch your grid between the layouts by setting the layout attribute on the <zing-grid> tag.

Default

ZingGrid is responsive by default, and changes from row to card layout depending on your screen size. Resize your browser to see the change!
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Row

If you don't want ZingGrid to switch between layouts when you resize your screen, you can force a row layout with layout="row" attribute on the <zing-grid> tag. If you don't want users to have the option to toggle between row and card mode at all, add layout-controls="disabled" to the <zing-grid> tag.
CloseCopy Copied
<zing-grid layout="row"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Card

If you don't want ZingGrid to switch between layouts when you resize your screen, you can force a card layout with layout="card" attribute on the <zing-grid> tag. If you don't want users to have the option to toggle between row and card mode at all, add layout-controls="disabled" to the <zing-grid> tag.
CloseCopy Copied
<zing-grid layout="card"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Controls

Set the layout-controls=false attribute on the <zing-grid> tag to hide the controls.
CloseCopy Copied
<zing-grid layout-controls="false"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Pause

You can pause the grid from switching layouts with the viewport-pause attribute on the zing-grid tag.

You can set viewport-pause to keep the current value of viewport (even on refresh), but resizing the device will not update the attribute value, thus freezing the breakpoint until you remove the viewport-pause attribute.

CloseCopy Copied
<zing-grid viewport-pause></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Stop

You can stop the grid from switching layouts with the viewport-stop attribute on the zing-grid tag.

You can set viewport-stop to remove the viewport attribute completely, which means the viewport process will no longer run on device resize.

CloseCopy Copied
<zing-grid viewport-stop></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Types

You can define your own breakpoints with the viewport-types attribute on the zing-grid tag. You will have to style the grid based on the viewport selector.
CloseCopy Copied
<zing-grid
  caption="Top LiverPool Forwards"
  viewport-types='
    {
      "mobile": 600,
      "bob": 875,
      "desktop": 1200,
      "desktop-large": 1600,
      "test": 2000
    }
  '
>

If you don't add a breakpoint with key mobile, it won't switch between card and row layout-mode automatically. Adding custom breakpoints replaces the defaults, instead of combining the two.

The custom-type object must be valid JSON, hence the use of single-quotes in the above example for the attribute's value. This allows the use of double-quotes for the object key/values.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading