Directory

← Back

Hover Column

Hide contents of a Grid Column until hovering on the row.

Author

Rating

Popularity

<100

Simple CSS add-on that will hide the contents of a Grid Column until the user hovers over the row, by simply adding a CSS class to column.

grid.addComponentColumn(person -> {
               //this component will be invisible
            HorizontalLayout buttons = new HorizontalLayout();
            Button edit = new Button(VaadinIcon.PENCIL.create());
               //exclude this button so that it is always displayed
            edit.addClassName(HoverColumn.HOVER_COLUMN_EXCLUDE_CLASS);
            Button delete = new Button(VaadinIcon.TRASH.create());
            buttons.add(edit,delete);
            return buttons;
        }).setClassNameGenerator(person -> {
            return HoverColumn.HOVER_COLUMN_CLASS;
        });

Useful for hiding redundant button or status columns.

Sample code

@Route("")
public class AddonView extends Div {
	
	String[] names = {"Rob","Ashley","Victoria","Nate","Rosie","Axl","Caleb","Lucas","Trey","Dana","Beth"};
	Random random = new Random(System.currentTimeMillis());

    public AddonView() {

    	List<Person> data = new ArrayList<>();
    	for(int i=0;i<names.length;i++) {
    		data.add(new Person(names[i],random.nextInt(70)));
    	}
    	
    	Grid<Person> grid = new Grid<>();
    	grid.setWidthFull();
    	grid.setItems(new ListDataProvider<>(data));
    	
    	grid.addColumn(Person::getName);
    	grid.addColumn(Person::getAge);
    	
    	grid.addComponentColumn(person -> {
    		HorizontalLayout buttons = new HorizontalLayout();
    		Button edit = new Button(VaadinIcon.PENCIL.create());
    		edit.addClassName(HoverColumn.HOVER_COLUMN_EXCLUDE_CLASS);
    		Button delete = new Button(VaadinIcon.TRASH.create());
    		buttons.add(edit,delete);
    		return buttons;
    	}).setClassNameGenerator(person -> {
    		return HoverColumn.HOVER_COLUMN_CLASS;
    	});
    	
    	add(grid);
    	
    }
    
    public static class Person {
    	String name;
    	Integer age;
		public Person(String name, Integer age) {
			super();
			this.name = name;
			this.age = age;
		}
		public String getName() {
			return name;
		}
		public void setName(String firstName) {
			this.name = firstName;
		}
		public Integer getAge() {
			return age;
		}
		public void setAge(Integer age) {
			this.age = age;
		}
		
    	
		
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2023-06-08
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Browser
Browser Independent

Hover Column - Vaadin Add-on Directory

Hide contents of a Grid Column until hovering on the row. Hover Column - Vaadin Add-on Directory
Simple CSS add-on that will hide the contents of a Grid Column until the user hovers over the row, by simply adding a CSS class to column. ``` grid.addComponentColumn(person -> { //this component will be invisible HorizontalLayout buttons = new HorizontalLayout(); Button edit = new Button(VaadinIcon.PENCIL.create()); //exclude this button so that it is always displayed edit.addClassName(HoverColumn.HOVER_COLUMN_EXCLUDE_CLASS); Button delete = new Button(VaadinIcon.TRASH.create()); buttons.add(edit,delete); return buttons; }).setClassNameGenerator(person -> { return HoverColumn.HOVER_COLUMN_CLASS; }); ``` Useful for hiding redundant button or status columns.
Online