Frozen Cards

When your grid is in card layout, cards can be frozen to either the top or bottom of the grid. Frozen cards stay in place while the rest of the card grid scrolls, so they're always visible in the same position. Enable this by adding frozen-cards-top and/or frozen-cards-bottom to <zing-grid>.

This is the card layout equivalent of Frozen Rows - frozen-rows-top/frozen-rows-bottom freeze rows in row layout, while frozen-cards-top/frozen-cards-bottom freeze cards in card layout. The two are tracked independently, so a grid can switch between layouts without losing either setting.

Setting Frozen Cards

Frozen cards can be set by setting a numeric value n to the <zing-grid> attributes frozen-cards-top and/or frozen-cards-bottom. This will automatically freeze the first n cards to the top of the grid, or the final n cards to the bottom of the grid, each in its own sticky band above/below the scrollable card area.

<zing-grid frozen-cards-top="1" frozen-cards-bottom="1"
  height=500
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

Frozen Cards Grid

Here is a complete grid with a frozen top and bottom card:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• Frozen Rows
• Layouts
• Attribute List