<zg-foot>

Interactive Storybook Playground

The <zg-foot> tag contains the foot cells (<zg-foot-cell>) of the data grid specified via the foot-cell attribute found on <zg-column> tags. The tag roughly corresponds to the idea of the <tfoot> tag used in HTML tables. The <zg-foot> tag is generated by the library and should not be placed in a grid manually by a user. The footer cell is styleable via CSS variables or the zg-foot CSS selector.

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

Related Web Components

Usage

The <zg-foot> element is a generated element added to <zing-grid> when the selector attribute is defined.

<zing-grid selector
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>

Attributes

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

CSS Variables

<zg-foot> can be styled with CSS variables, like so:

:root {
--zg-foot-border-top: 1px solid red;
}

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

CSS Selector

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

zg-foot {
  border-top: 1px solid red;
}

Slots

There are no slots available for the <zg-foot> web component.