Using CSS with ZingGrid

Using custom elements, you are able to bind CSS directly to ZingGrid tags. For certain elements within a tag's Shadow DOM, you can target them with our CSS Variable API system.

Inline CSS

Here is an example of how you can style your grid with inline CSS:

<zing-grid 
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  style="border: 10px solid #003749;"
>
  <zg-caption style="background: #ef5350;">Hello World</zg-caption> 
</zing-grid>

External CSS

Here is an example of how you can style your grid with external CSS:

<style>
  zing-grid { border: 10px solid #003749; }
  zg-caption { background: #ef5350; }
</style>

</zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption>Hello World</zg-caption> 
</zing-grid>

CSS Variables

ZingGrid also exposes a CSS variables-based API, used primarily for the built-in themes and creating custom themes. There are also a few instances where you might need to style an element inside the tag's Shadow DOM where CSS variables are the only recourse (see below). For most use cases, using direct inline/external styling will be the smoother experience.

<style>
  :root {
    --zing-grid-border: 10px solid #003749;
    --zg-caption-background: #ef5350;
  }
</style>

</zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption>Hello World</zg-caption> 
</zing-grid>

zing-grid { --zing-grid-border: 5px solid red; }
zing-grid[layout="card"] { --zing-grid-border: 3px solid blue; }

Generated Elements

Some ZingGrid tags act as configuration items and are not visible when the grid is rendered. Styling these elements will have no effect on screen:

• zg-colgroup
• zg-column
• zg-data
• zg-param

<zg-column> is a tricky case. It behaves the same as a table's <col> element in native HTML and therefore has a limited subset of CSS properties that will affect it. These properties are:

• background
• border
• visibility: collapse
• width

Custom CSS Classes Grid

You also have the ability to set a custom CSS class on all grid rows, columns, and cells. Since they are auto-generated, you define the classes on the <zing-grid> tag itself (see below):

• row-class="myRowClass"
• col-class="myColClass"
• cell-class="myCellClass"

<style>
  .myRowClass { border: 5px solid #003749; }
  .myColClass:nth-of-type(even) { color: #fff; background: #ef5350; border: #ef5350; }
  .myCellClass:nth-of-type(odd) { background: yellow; }
</style>

<zing-grid 
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  row-class="myRowClass" 
  col-class="myColClass" 
  cell-class="myCellClass"
></zing-grid>

Column Override

Add cell-class="myOverrideClass" to individual <zg-column> tags to override on a per-column basis, like so:

<style>
  /* Applies to all body cells */
  .myCellClass { background: #ef5350; }
  /* Override specific cells */
  .cell-lastname { background: yellow; }
</style>

<zing-grid 
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  cell-class="myCellClass"
>
  <zg-colgroup>
    <zg-column index="firstName"></zg-column>
    <zg-column index="lastName" cell-class="cell-lastname"></zg-column>
  </zg-colgroup>
</zing-grid>

Compact Display

Add compact to <zing-grid> to show a compact version of the grid (see below). This works for all built-in themes.

<zing-grid 
    data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
    compact
  ></zing-grid>