<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.
| 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.
| 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>]