<zg-body>

The <zg-body> tag is created dynamically by the ZingGrid library and as such, should not be manually added by the developer. However, the user can style <zg-body> through CSS variables or by targeting the tag directly.

Image of the DOM relationship for the zg-body web component tag

Related Web Components

Attributes

There are no attributes available for the <zg-body> web component.

CSS Variables

<zg-body> can be styled by common CSS variables, like so:

root: {
  --zg-body-background: red;
}

Below is a list of all the associated --zg-body CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGBody CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-body-backgroundtransparentStyles the background of grid body
--zg-body-border0Styles the border of grid body
--zg-body-border-bottomvar(--zg-body-border, 0)Styles the bottom border of grid body
--zg-body-border-leftvar(--zg-body-border, 0)Styles the left border of grid body
--zg-body-border-rightvar(--zg-body-border, 0)Styles the right border of grid body
--zg-body-border-topvar(--zg-body-border, 0)Styles the top border of grid body. Note: If `--zg-row-border-top` set, it will override `--zg-body-border-top`.
--zg-body-card-backgroundlinear-gradient(45deg, #f9fafb 20%, #fff)Styles the background of grid body in 'card' layout-mode
--zg-body-card-border0Styles the border of grid body in 'card' layout-mode
--zg-body-card-border-bottomvar(--zg-body-card-border, 0)Styles the bottom border of grid body in 'card' layout-mode
--zg-body-card-border-leftvar(--zg-body-card-border, 0)Styles the left border of grid body in 'card' layout-mode
--zg-body-card-border-rightvar(--zg-body-card-border, 0)Styles the right border of grid body in 'card' layout-mode
--zg-body-card-border-topvar(--zg-body-card-border, 0)Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode it will override `--zg-body-border-top`.
--zg-body-card-displaygridSets display of grid body in 'card' layout-mode
--zg-body-colorinheritSets the font color of contents inside grid body
--zg-body-font-familyinheritSets the font family of contents inside grid body
--zg-body-font-sizeinheritSets the font size of contents inside grid body
--zg-body-font-styleinheritSets the font style of contents inside grid body
--zg-body-font-weightinheritSets the font weight of contents inside grid body
--zg-body-line-heightinheritSets the line-height of contents inside of grid body

CSS Selector

<zg-body> can be styled by common CSS selectors, like so:

zg-body {
  background: red;
}