Docs

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

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

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>

It is recommended to define CSS variable overrides inside the :root {} selector (see below) 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; }
Top

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
  1. visibility: 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.
Top

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

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

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

[guides: using CSS]