Using CSS with ZingGrid

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

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

<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 ShadowDOM where CSS variables are the only recourse. For most use cases, using direct inline/external styling will be the smoother experience.

View the ful list ZingGrid CSS Variables.

<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>

It is recommended to define css-variable overrides inside the :root {} selector for maximum cross-browser support. You can also define css variables within the 'scope' of an element, although this is less universally supported:

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:

  • background
  • border
  • ~visibility: collapse~
  • ~width~
1
visiblity: collapse; has inconsistent cross-browser behavior and is discouraged.
2
While width does work, cell widths are generated dynamically (and with min-width), and your setting will likely not work as intended.

Custom Grid CSS Classes

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:

  • 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.

<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. This works for all built-in themes.

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