<zg-cell>

Interactive Storybook Playground

The <zg-cell> tag is a web component that controls the styling and display for the grid cells. It corresponds to HTML table's td tag and is automatically inserted so it should not be placed directly in user's HTML.

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

ZGCell Relationships
Component Relationship Type Ancestor
ZGButton Child Generated ZGBody
ZGCheckbox Child Generated ZGBody
ZGIcon Child Generated ZGBody
ZGInput Child Generated ZGBody
ZGSelect Child Generated ZGBody
ZGText Child Generated ZGBody

Related Web Components

Attributes

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

Top

CSS Variables

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

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

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

ZGCell CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-cell-background var(--zg-cell-background) Styles the background of cells
--zg-cell-background_hover Browser's default value Styles the background of cells on hover
--zg-cell-background_hover_layout_row var(--zg-cell-background_hover) Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_row var(--zg-cell-background) Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sorted var(--zg-cell-background_sorted) Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sorted Browser's default value Styles the background of cells in sorted column
--zg-cell-border 0 Styles the border of cells
--zg-cell-border-bottom var(--zg-cell-border, 0) Styles the bottom border of cells
--zg-cell-border-bottom_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-bottom, var(--zg-cell-border, 0))) Styles the bottom border of cells in 'row' layout-mode
--zg-cell-border-left var(--zg-cell-border, 0) Styles the left border of cells
--zg-cell-border-left_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-left, var(--zg-cell-border, 0))) Styles the left border of cells in 'row' layout-mode
--zg-cell-border-right var(--zg-cell-border, 0) Styles the right border of cells
--zg-cell-border-right_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-right, var(--zg-cell-border, 0))) Styles the right border of cells in 'row' layout-mode
--zg-cell-border-top var(--zg-cell-border, 0) Styles the top border of cells
--zg-cell-border-top_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-top, var(--zg-cell-border, 0))) Styles the top border of cells in 'row' layout-mode
--zg-cell-border_layout_row var(--zg-cell-border-bottom, var(--zg-cell-border, 0)) Styles the border of cells in 'row' layout-mode
--zg-cell-color inherit Styles font color of text in cells
--zg-cell-color_hover var(--zg-cell-color) Styles font color of cells on hover
--zg-cell-color_hover_layout_row var(--zg-cell-color_hover, var(--zg-cell-color)) Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_row var(--zg-cell-color, inherit) Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sorted var(--zg-cell-color_sorted, var(--zg-cell-color)) Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sorted var(--zg-cell-color) Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card 0 Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_card inherit Sets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card 3px 0 Sets the padding of cards in 'card' layout-mode
--zg-cell-font-family inherit Sets the font family in cells
--zg-cell-font-family_layout_row var(--zg-cell-font-family, inherit) Sets the font family in cells in 'row' layout-mode
--zg-cell-font-size inherit Sets the font size in cells
--zg-cell-font-size_layout_row var(--zg-cell-font-size, inherit) Sets the font size in cells in 'row' layout-mode
--zg-cell-font-style inherit Sets the font style in cells
--zg-cell-font-style_layout_row var(--zg-cell-font-style, inherit) Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weight inherit Sets the font weight in cells
--zg-cell-font-weight_layout_row var(--zg-cell-font-weight, inherit) Sets the font weight in cells in 'row' layout-mode
--zg-cell-height auto Sets height of cells
--zg-cell-height_layout_row var(--zg-cell-height, auto) Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_card var(--theme-color-primary) Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_card flex Sets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card 85% Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_card Browser's default value Sets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card 0 0 2px Sets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_card Browser's default value Sets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_card Browser's default value Sets transform of label in cards in 'card' layout-mode
--zg-cell-line-height inherit Sets line height of cells
--zg-cell-line-height_layout_row var(--zg-cell-line-height, inherit) Sets line height of cells in 'row' layout-mode
--zg-cell-padding var(--theme-padding_y) var(--theme-padding_x) Sets padding of cells
--zg-cell-padding_layout_row var(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x)) Sets padding of cells in 'row' layout-mode
--zg-cell-transition Browser's default value Sets the transition of cells
--zg-cell-transition_layout_row var(--zg-cell-transition) Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-align middle Sets vertical alignment of items in cells
--zg-cell-vertical-align_layout_row var(--zg-cell-vertical-align, middle) Sets vertical alignment of items in cells in 'row' layout-mode
Top

CSS Selector

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

zg-cell {
  background: red;
}
Top

Slots

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

Top

[api: <zg-cell>]