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 stylable via CSS variables or the zg-foot CSS selector.

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

Related Web Components


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

<zing-grid selector


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

CSS Variables

All the associated --zg-foot CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
--zg-foot-border-top: 1px solid red;
ZGFoot CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-foot-backgroundBrowser's default valueStyles the background of grid foot
--zg-foot-border0Styles the border of grid foot
--zg-foot-border-bottomvar(--zg-foot-border, 0)Styles the bottom border of grid foot
--zg-foot-border-leftvar(--zg-foot-border, 0)Styles the left border of grid foot
--zg-foot-border-rightvar(--zg-foot-border, 0)Styles the right border of grid foot
--zg-foot-border-topvar(--zg-foot-border, 0)Styles the top border of grid foot
--zg-foot-heightautoSets the height of grid foot
--zg-foot-padding0Sets the padding of grid foot

CSS Selector

<zg-foot> can be styled by common CSS selectors.

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