diff --git a/articles/components/grid/columns.adoc b/articles/components/grid/columns.adoc index f13d45c18f..270ec0a3e9 100644 --- a/articles/components/grid/columns.adoc +++ b/articles/components/grid/columns.adoc @@ -145,37 +145,25 @@ endif::[] == Column Visibility -When you want, columns and column groups can be hidden. You can provide the user with a menu for toggling column visibilities, for example, using Menu Bar. Allowing the user to hide columns is useful when only a subset of the columns is relevant to their task, and if there are plenty of columns. - -In the example here, notice that the email addresses and telephone numbers are not fully visible because the data doesn't wrap and won't fit in the width provided. Now click on the _Show/Hide Columns_ button to see a menu of choices to reduce the number of columns. Notice that all columns are checked. De-select the _First Name_ and then the _Profession_ column. That should allow the email addresses and telephone numbers to be fully visible. Incidentally, if you don't deselect any columns, you can still right-click on an email address to copy it: You'll still get the whole address, even if it's not visible. +When you want, columns and column groups can be hidden. You can provide the user with a menu for toggling column visibilities, for example, using Popover. Allowing the user to hide columns is useful when only a subset of the columns is relevant to their task, and if there are plenty of columns. [.example] -- -ifdef::lit[] -[source,typescript] +[source,html] ---- -include::{root}/frontend/demo/component/grid/grid-column-visibility.ts[render,tags=snippet,indent=0,group=Lit] +include::{root}/frontend/demo/component/popover/popover-anchored-dialog.ts[render,tags=gridsnippet,indent=0,group=Lit] ---- -endif::[] -ifdef::flow[] [source,java] ---- -include::{root}/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java[render,tags=snippet1,indent=0,group=Flow] - -... - -include::{root}/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java[render,tags=snippet2,indent=0,group=Flow] +include::{root}/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java[render,tags=gridsnippet,indent=0,group=Flow] ---- -endif::[] -ifdef::react[] [source,tsx] ---- -include::{root}/frontend/demo/component/grid/react/grid-column-visibility.tsx[render,tags=snippet,indent=0,group=React] +include::{root}/frontend/demo/component/popover/react/popover-anchored-dialog.tsx[render,tags=gridsnippet,indent=0,group=React] ---- -endif::[] -- diff --git a/frontend/demo/component/grid/grid-column-visibility.ts b/frontend/demo/component/grid/grid-column-visibility.ts deleted file mode 100644 index 1668177b21..0000000000 --- a/frontend/demo/component/grid/grid-column-visibility.ts +++ /dev/null @@ -1,82 +0,0 @@ -import 'Frontend/demo/init'; // hidden-source-line -import '@vaadin/button'; -import '@vaadin/context-menu'; -import '@vaadin/grid'; -import '@vaadin/horizontal-layout'; -import { html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import type { ContextMenuItem, ContextMenuItemSelectedEvent } from '@vaadin/context-menu'; -import { getPeople } from 'Frontend/demo/domain/DataService'; -import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; -import { applyTheme } from 'Frontend/generated/theme'; - -@customElement('grid-column-visibility') -export class Example extends LitElement { - protected override createRenderRoot() { - const root = super.createRenderRoot(); - // Apply custom theme (only supported if your app uses one) - applyTheme(root); - return root; - } - - // tag::snippet[] - @state() - private items: Person[] = []; - - @state() - private contextMenuItems: Array = [ - { text: 'First name', checked: true, key: 'firstName', keepOpen: true }, - { text: 'Last name', checked: true, key: 'lastName', keepOpen: true }, - { text: 'Email', checked: true, key: 'email', keepOpen: true }, - { text: 'Phone', checked: true, key: 'phone', keepOpen: true }, - { text: 'Profession', checked: true, key: 'profession', keepOpen: true }, - ]; - - protected override async firstUpdated() { - const { people } = await getPeople(); - this.items = people; - } - - protected override render() { - return html` - - Employees - - Show/Hide Columns - - - - - - - - - - - `; - } - // end::snippet[] -} diff --git a/frontend/demo/component/grid/react/grid-column-visibility.tsx b/frontend/demo/component/grid/react/grid-column-visibility.tsx deleted file mode 100644 index 40189af516..0000000000 --- a/frontend/demo/component/grid/react/grid-column-visibility.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line -import React, { useEffect } from 'react'; -import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line -import { useSignal } from '@vaadin/hilla-react-signals'; -import { Button } from '@vaadin/react-components/Button.js'; -import { ContextMenu } from '@vaadin/react-components/ContextMenu.js'; -import { Grid } from '@vaadin/react-components/Grid.js'; -import { GridColumn } from '@vaadin/react-components/GridColumn.js'; -import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js'; -import { getPeople } from 'Frontend/demo/domain/DataService'; -import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; - -function Example() { - useSignals(); // hidden-source-line - // tag::snippet[] - const items = useSignal([]); - const contextMenuItems = useSignal([ - { text: 'First name', checked: true, key: 'firstName', keepOpen: true }, - { text: 'Last name', checked: true, key: 'lastName', keepOpen: true }, - { text: 'Email', checked: true, key: 'email', keepOpen: true }, - { text: 'Phone', checked: true, key: 'address.phone', keepOpen: true }, - { text: 'Profession', checked: true, key: 'profession', keepOpen: true }, - ]); - - useEffect(() => { - getPeople().then(({ people }) => { - items.value = people; - }); - }, []); - - return ( - <> - - Employees - { - const item = e.detail.value; - item.checked = !item.checked; - contextMenuItems.value = [...contextMenuItems.value]; - }} - > - - - - - - {contextMenuItems.value.map((item) => ( - - - ); - // end::snippet[] -} - -export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/popover/popover-anchored-dialog.ts b/frontend/demo/component/popover/popover-anchored-dialog.ts index e30a8aca41..731e293fe9 100644 --- a/frontend/demo/component/popover/popover-anchored-dialog.ts +++ b/frontend/demo/component/popover/popover-anchored-dialog.ts @@ -62,6 +62,7 @@ export class Example extends LitElement { > + ${this.gridColumns.map( (column) => html` @@ -72,6 +73,7 @@ export class Example extends LitElement { ` )} + `; } diff --git a/frontend/demo/component/popover/react/popover-anchored-dialog.tsx b/frontend/demo/component/popover/react/popover-anchored-dialog.tsx index a9f1ce0e01..0e5782cc73 100644 --- a/frontend/demo/component/popover/react/popover-anchored-dialog.tsx +++ b/frontend/demo/component/popover/react/popover-anchored-dialog.tsx @@ -92,11 +92,13 @@ function Example() { {/* end::snippet[] */} + {/* tag::gridsnippet[] */} {columns.value.map((item) => ( + {/* end::gridsnippet[] */} ); } diff --git a/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java b/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java deleted file mode 100644 index 1b82fc29c3..0000000000 --- a/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java +++ /dev/null @@ -1,85 +0,0 @@ -package com.vaadin.demo.component.grid; - -import java.util.List; - -import com.vaadin.demo.domain.Person; -import com.vaadin.flow.component.Component; -import com.vaadin.flow.component.button.Button; -import com.vaadin.flow.component.button.ButtonVariant; -import com.vaadin.flow.component.contextmenu.ContextMenu; -import com.vaadin.flow.component.contextmenu.MenuItem; -import com.vaadin.flow.component.grid.Grid; -import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.html.Span; -import com.vaadin.flow.component.orderedlayout.FlexComponent; -import com.vaadin.flow.component.orderedlayout.HorizontalLayout; -import com.vaadin.flow.router.Route; -import com.vaadin.demo.DemoExporter; // hidden-source-line -import com.vaadin.demo.domain.DataService; - -@Route("grid-column-visibility") -public class GridColumnVisibility extends Div { - - public GridColumnVisibility() { - // tag::snippet1[] - Grid grid = new Grid<>(Person.class, false); - Grid.Column firstNameColumn = grid - .addColumn(Person::getFirstName).setHeader("First name"); - Grid.Column lastNameColumn = grid.addColumn(Person::getLastName) - .setHeader("Last name"); - Grid.Column emailColumn = grid.addColumn(Person::getEmail) - .setHeader("Email"); - Grid.Column phoneColumn = grid - .addColumn(person -> person.getAddress().getPhone()) - .setHeader("Phone"); - Grid.Column professionColumn = grid - .addColumn(Person::getProfession).setHeader("Profession"); - - Button menuButton = new Button("Show/Hide Columns"); - menuButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); - ColumnToggleContextMenu columnToggleContextMenu = new ColumnToggleContextMenu( - menuButton); - columnToggleContextMenu.addColumnToggleItem("First name", - firstNameColumn); - columnToggleContextMenu.addColumnToggleItem("Last name", - lastNameColumn); - columnToggleContextMenu.addColumnToggleItem("Email", emailColumn); - columnToggleContextMenu.addColumnToggleItem("Phone", phoneColumn); - columnToggleContextMenu.addColumnToggleItem("Profession", - professionColumn); - // end::snippet1[] - - List people = DataService.getPeople(); - grid.setItems(people); - - Span title = new Span("Employees"); - title.getStyle().set("font-weight", "bold"); - HorizontalLayout headerLayout = new HorizontalLayout(title, menuButton); - headerLayout.setAlignItems(FlexComponent.Alignment.BASELINE); - headerLayout.setFlexGrow(1, title); - - add(headerLayout, grid); - } - - // tag::snippet2[] - private static class ColumnToggleContextMenu extends ContextMenu { - public ColumnToggleContextMenu(Component target) { - super(target); - setOpenOnClick(true); - } - - void addColumnToggleItem(String label, Grid.Column column) { - MenuItem menuItem = this.addItem(label, e -> { - column.setVisible(e.getSource().isChecked()); - }); - menuItem.setCheckable(true); - menuItem.setChecked(column.isVisible()); - menuItem.setKeepOpen(true); - } - } - // end::snippet2[] - - public static class Exporter // hidden-source-line - extends DemoExporter { // hidden-source-line - } // hidden-source-line -} diff --git a/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java b/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java index 76c8b468a9..dd51f01ffc 100644 --- a/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java +++ b/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java @@ -18,7 +18,6 @@ import com.vaadin.flow.component.grid.Grid; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.H3; -import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; @@ -26,12 +25,12 @@ import com.vaadin.flow.component.popover.PopoverPosition; import com.vaadin.flow.data.renderer.LocalDateRenderer; import com.vaadin.flow.router.Route; -import com.vaadin.flow.component.orderedlayout.FlexComponent; @Route("popover-anchored-dialog") public class PopoverAnchoredDialog extends Div { public PopoverAnchoredDialog() { + // tag::gridsnippet[] Grid grid = new Grid<>(Person.class, false); grid.addColumn(Person::getFirstName).setKey("firstName") .setHeader("First name"); @@ -45,6 +44,7 @@ public PopoverAnchoredDialog() { .setKey("birthday").setHeader("Birthday"); grid.addColumn(Person::getProfession).setKey("profession") .setHeader("Profession"); + // end::gridsnippet[] grid.setItems(DataService.getPeople()); @@ -71,7 +71,8 @@ public PopoverAnchoredDialog() { List columns = List.of("firstName", "lastName", "email", "phone", "birthday", "profession"); - + // tag::gridsnippet[] + CheckboxGroup group = new CheckboxGroup<>(); group.addThemeVariants(CheckboxGroupVariant.LUMO_VERTICAL); group.setItems(columns); @@ -85,6 +86,7 @@ public PopoverAnchoredDialog() { grid.getColumnByKey(key).setVisible(e.getValue().contains(key)); }); }); + // end::gridsnippet[] Set defaultColumns = Set.of("firstName", "lastName", "email", "profession");