gridColumnVisibility

gridColumnVisibility lets users show or hide columns in a dataGrid.

XML Element

gridColumnVisibility

Java Class

JmixGridColumnVisibility

Basics

gridColumnVisibility consists of a button and a dropdown menu with the list of columns.

Below is an example of using gridColumnVisibility in a list view:

<hbox id="buttonsPanel" classNames="buttons-panel">
    <!-- ... -->
    <gridColumnVisibility dataGrid="stepsTable"
                          icon="COG"
                          themeNames="icon"
                          exclude="duration">
        <menuItem refColumn="name" text="msg://menuItem.text"/>
    </gridColumnVisibility>
</hbox>
<dataGrid id="stepsTable"
          width="100%"
          minHeight="20em"
          dataContainer="stepsDc">
    <columns>
        <column property="name"/>
        <column property="duration"/>
        <column property="sortValue"/>
    </columns>
</dataGrid>

Setting Up Dropdown Menu

By default, the item text is copied from the column header. You can customize this using the menuItem element.

For example, in the previous example, the menuItem element is used to set a different localized message for the name column than the one specified in the dataGrid header.

include

The include attribute is used to specify which columns should be included in a dropdown menu of gridColumnVisibility.

exclude

The exclude attribute is used to specify which columns should be excluded from a dropdown menu of gridColumnVisibility.

For example, in the previous example, we excluded the duration column from the gridColumnVisibility dropdown menu.

hideAllEnabled

The hideAllEnabled attribute is used to control the visibility of a Hide all item in the dropdown menu of gridColumnVisibility.

showAllEnabled

The showAllEnabled attribute is used to control the visibility of a Show all item in the dropdown menu of gridColumnVisibility.

Theme Variants

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

primary

Applies the primary button style.

Aura, Lumo

tertiary

Applies a lower-emphasis button style.

Aura, Lumo

tertiary-inline

Applies an inline button style intended for use inside text content.

Lumo

icon

Reduces the whitespace around the icon.

Lumo

small

Makes the button smaller.

Aura, Lumo

large

Makes the button larger.

Aura, Lumo

success

Applies the success style.

Aura, Lumo

error

Applies the error style.

Aura, Lumo

contrast

Applies the contrast style.

Lumo

Attributes

The following attributes are specific to gridColumnVisibility:

Name Description Default

dataGrid

Sets a grid which columns will be managed by this component.

—

exclude

Specifies columns to exclude from the visibility menu. See exclude.

—

hideAllEnabled

Controls whether the visibility menu contains the Hide all item. See hideAllEnabled.

—

icon

Sets the icon.

—

include

Specifies columns to include in the visibility menu. See include.

—

showAllEnabled

Controls whether the visibility menu contains the Show all item. See showAllEnabled.

—

The following shared attributes are supported by gridColumnVisibility:

id - alignSelf - classNames - colspan - css - enabled - focusShortcut - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - text - themeNames - visible - whiteSpace - width

Elements

A gridColumnVisibility can include menuItem as its nested elements.