---
title: "ZingGrid Web Component: `<zg-foot>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-foot>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-foot
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-foot.md
mode: provenance
representation: markdown
origin_response_id: 0e20823c71fd96df1ca41e19eba14528
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.762Z
version_nonce: 6545328681af1a8a29f0a53a17c0ab6a
generated_at_utc: 2026-10-31T01:14:31.984Z
response_nonce: da70ed404412d019d00e036361d9b685
```

# `<zg-foot>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-foot--docs)

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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-foot-web-component-dom.png "Image of the DOM relationship for the zg-foot web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |
| [ZGRow](https://www.zinggrid.com/docs/api/tags/zg-row) | Child | Generated | n/a |

#### Related Web Components

- [`<zg-cell>`](https://www.zinggrid.com/docs/api/tags/zg-cell/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)

## Usage

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

```html
<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:

```css
: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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-foot-background` | Browser's default value | Styles the background of grid foot | [Example code](https://app.zingsoft.com/demos/embed/5NW1UUJB) |
| `--zg-foot-border` | 0 | Styles the border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/GJKYV9E6) |
| `--zg-foot-border-bottom` | var(--zg-foot-border, 0) | Styles the bottom border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/FRJXV4YB) |
| `--zg-foot-border-left` | var(--zg-foot-border, 0) | Styles the left border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/VYNWYDXA) |
| `--zg-foot-border-right` | var(--zg-foot-border, 0) | Styles the right border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/4YL86H63) |
| `--zg-foot-border-top` | var(--zg-foot-border, 0) | Styles the top border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/906SOMMP) |
| `--zg-foot-height` | auto | Sets the height of grid foot | [Example code](https://app.zingsoft.com/demos/embed/NIOBJEMN) |
| `--zg-foot-padding` | 0 | Sets the padding of grid foot | [Example code](https://app.zingsoft.com/demos/embed/XA3FXCSI) |

## CSS Selector

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

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

## Slots

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