<zg-filter-menu>

Interactive Storybook Playground

The <zg-filter-menu> tag is the container for the menu that appears when clicking on the column filter button. It is used as a CSS target for styling by the developer. The <zg-filter-menu> web component should not be accessed specifically beyond styling.

Image of the DOM relationship for the zg-filter-menu web component tag

Related Web Components

Usage

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

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

Attributes

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

Top

CSS Variables

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

:root {
--zg-filter-menu-background: red;
}

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

ZGFilterMenu CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-filter-menu-background Browser's defaul value Styles background of filter menu dropdown
--zg-filter-menu-body-background var(--zg-filter-menu-background) Styles the background of filter-menu body
--zg-filter-menu-body-border 0 Styles the border of filter-menu body
--zg-filter-menu-body-border-bottom var(--zg-filter-menu-body-border, 0) Styles the bottom border of filter-menu body
--zg-filter-menu-body-border-left var(--zg-filter-menu-body-border, 0) Styles the left border of filter-menu body
--zg-filter-menu-body-border-right var(--zg-filter-menu-body-border, 0) Styles the right border of filter-menu body
--zg-filter-menu-body-border-top var(--zg-filter-menu-body-border, 0) Styles the top border of filter-menu body
--zg-filter-menu-body-margin 10px 0 Sets the margin of filter-menu body
--zg-filter-menu-body-padding 0 Sets the padding of filter-menu body
--zg-filter-menu-border 1px solid var(--theme-border-color) Styles the border of filter menu dropdown
--zg-filter-menu-border-bottom var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the bottom border of filter menu dropdown
--zg-filter-menu-border-left var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the left border of filter menu dropdown
--zg-filter-menu-border-right var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the right border of filter menu dropdown
--zg-filter-menu-border-top var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the top border of filter menu dropdown
--zg-filter-menu-box-shadow 0 3px 3px #ccc Applies a box shadow to filter menu dropdown
--zg-filter-menu-color var(--theme-body-color) Applies a baseline color to the menu
--zg-filter-menu-font-size 0.8rem Sets the font size of filter menu dropdown
--zg-filter-menu-footer-background var(--zg-filter-menu-background) Styles the background of filter-menu footer
--zg-filter-menu-footer-border 0 Styles the border of filter-menu footer
--zg-filter-menu-footer-border-bottom var(--zg-filter-menu-footer-border, 0) Styles the bottom border of filter-menu footer
--zg-filter-menu-footer-border-left var(--zg-filter-menu-footer-border, 0) Styles the left border of filter-menu footer
--zg-filter-menu-footer-border-right var(--zg-filter-menu-footer-border, 0) Styles the right border of filter-menu footer
--zg-filter-menu-footer-border-top var(--zg-filter-menu-footer-border, 1px solid var(--theme-border-color)) Styles the top border of filter-menu footer
--zg-filter-menu-footer-justify-content flex-end Sets the horizontal alignment of contents in filter-menu footer
--zg-filter-menu-footer-margin 0 Sets the margin of filter-menu footer
--zg-filter-menu-footer-padding .875rem 0 0 Sets the padding of filter-menu footer
--zg-filter-menu-header-background var(--zg-filter-menu-background) Styles the background of filter-menu header
--zg-filter-menu-header-border 0 Styles the border of filter-menu header
--zg-filter-menu-header-border-bottom var(--zg-filter-menu-header-border, 0) Styles the bottom border of filter-menu header
--zg-filter-menu-header-border-left var(--zg-filter-menu-header-border, 0) Styles the left border of filter-menu header
--zg-filter-menu-header-border-right var(--zg-filter-menu-header-border, 0) Styles the right border of filter-menu header
--zg-filter-menu-header-border-top var(--zg-filter-menu-header-border, 0) Styles the top border of filter-menu header
--zg-filter-menu-header-color Browser's default value Sets the font color of filter-menu header
--zg-filter-menu-header-font-size 16px Sets the font size of filter-menu header
--zg-filter-menu-header-font-weight bold Sets the font weight of filter-menu header
--zg-filter-menu-header-margin 0 Sets the margin of filter-menu header
--zg-filter-menu-header-padding 0 Sets the padding of filter-menu header
--zg-filter-menu-input-color Browser's default value Styles the font color of text in the input in the filter menu
--zg-filter-menu-input-font-size Browser's default value Sets the font size of the input in the filter menu
--zg-filter-menu-input-height Browser's default value Sets the height of the input in the dropdown filter menu
--zg-filter-menu-input-margin 5px Sets the margin of the input in the dropdown filter menu
--zg-filter-menu-input-width 100% Sets the width of the input in the dropdown filter menu
--zg-filter-menu-list-background var(--theme-color-light) Sets the background of filter-menu list body
--zg-filter-menu-padding 0 Sets the padding of the filter menu dropdown
--zg-filter-menu-select-color Browser's default value Styles the font color of text in the select dropdown filter menu
--zg-filter-menu-select-font-size Browser's default value Sets the font size of the select dropdown filter menu
--zg-filter-menu-select-height Browser's default value Sets the height of the select dropdown filter menu
--zg-filter-menu-select-margin 5px Sets the margin of the select dropdown filter menu
--zg-filter-menu-select-width 100% Sets the width of the select dropdown filter menu
Top

CSS Shadow Parts

<zg-filter-menu> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-filter-menu::part(filter-menu) {
  background-color: red;
}

Below is a list of all the associated ZGFilterMenu shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

ZGFilterMenu CSS Shadow Parts
Name Description
body The body for the menu
body-conditions The "conditions" area of the menu
body-list The "selectbox" area of the menu
case-sensitive The label and checkbox for "Match Case" in the menu
filter-menu The container for the menu
footer The header for the menu
footer-apply The "apply" button in the menu
footer-close The "close" button in the menu
footer-reset The "reset" button in the menu
header The header for the menu
header-label The header label for the menu
Top

Slots

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

Top

[api: <zg-filter-menu>]