docs
Menu
Menu

ZingGrid Basics

Below we outline the basic structure of the zing-grid tag.

On This Page

Structural Details

Detailed information about the structure of the zing-grid tag.

CloseCopy Copied
<!-- NECESSARY: Most common place to add attributes https://www.zinggrid.com/docs/api-elements#zing-grid -->
<zing-grid>

  <!-- NECESSARY: structural container when defining columns -->
  <zg-colgroup>
    <!-- define columns and attributes https://www.zinggrid.com/docs/api-elements#zg-column -->
    <zg-column>
      <!-- OPTIONAL: slotted content in template or reference template tag by id -->
      <template>
        Slotted content goes here
      </template>
    </zg-column>
  </zg-colgroup>

  <!-- OPTIONAL: slotted content to override default mobile layout -->
  <zg-card>
    <!-- OPTIONAL: slotted content in template or reference template tag by id -->
    <template>
      Slotted content goes here
    </template>
  </zg-card>

  <!-- STRUCTURAL: user doesn't need to define zg-header but can style -->
  <zg-header>
    <!-- OPTIONAL: slotted caption -->
    <zg-caption>
      Slotted content goes here
    </zg-caption>
    <!-- STRUCTURAL: user doens't need to define zg-menu-bar but can style -->
    <zg-menu-bar>
      <!-- STRUCTURAL: user doens't need to define zg-menu-bar but can style -->
      <zg-layout-controls></zg-layout-controls>
    </zg-menu-bar>
  </zg-header>

  <!-- OPTIONAL: slotted head content. Similar to "THEAD" tag -->
  <zg-head>
    <!-- STRUCTURAL: Similar to "TR" tag  -->
    <zg-row>
      <!-- STRUCTURAL: table headings are always the first thing in the zg-head. Similar to "TH" tag  -->
      <zg-head-cell></zg-head-cell>
    </zg-row>
  </zg-head>

  <!-- STRUCTURAL: user doesn't need to define zg-header but can style. Similar to "TBODY" tag -->
  <zg-body>
    <!-- STRUCTURAL: Similar to "TR" tag  -->
    <zg-row>
      <!-- STRUCTURAL: Similar to "TD" tag  -->
      <zg-cell></zg-cell>
    </zg-row>
  </zg-body>

  <!-- OPTIONAL: slotted foot content. Similar to "TFOOT" tag -->
  <zg-foot>
    <!-- STRUCTURAL: Similar to "TR" tag  -->
    <zg-row>
      <!-- STRUCTURAL: Similar to "TD" tag  -->
      <zg-cell></zg-cell>
    </zg-row>
  </zg-foot>

  <!-- STRUCTURAL: user doens't need to define zg-pager but can style -->
  <zg-pager>
    <!-- bunch of internal stuff in here -->
  </zg-pager>

  <!-- STRUCTURAL: user doens't need to define zg-footer but can style -->
  <zg-footer>
    <!-- OPTIONAL: slotted source content -->
    <zg-source>
        Slotted content goes here
    </zg-source>
  </zg-footer>

  <!-- STRUCTURAL: user doens't need to define zg-status but can style -->
  <zg-status></zg-status>

  <!-- OPTIONAL: slotted content in dialog -->
  <zg-dialog>
    <!-- OPTIONAL: slotted content in template or reference template tag by id -->
    <template>
      Slotted content goes here
    </template>
  </zg-dialog>

</zing-grid>

<!-- OPTIONAL: slotted content in template or reference template tag by id -->
<template id="myTemplate"></template>

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading