Show component in column when the mouse hover the row in grid

Flow
1

Hello Team, I’m using V23
I’m using a grid and I want to show components in the column when the user hovers over a row, for example, Gmail(refer to image) but I don’t know what styles i should use to do something like that
I’m sharing my code please contribute to it

public void empGrid() {
List employeeList = new ArrayList<>();

    employeeList.add(new Employee("Mike", "CA"));
    employeeList.add(new Employee("Andrew", "NY"));
    employeeList.add(new Employee("Sam", "LA"));
    employeeList.add(new Employee("Antony", "SC"));
    
    
    GridPro<Employee> mygrid = new GridPro<>();
    mygrid.addColumn(Employee::getName).setHeader("Name").setFlexGrow(1);
    mygrid.addColumn(Employee::getLocation).setHeader("Location").setFlexGrow(1);
    mygrid.addComponentColumn(e -> {            
        HorizontalLayout layout = new HorizontalLayout();
        
        Button remove = new Button("x");
        remove.addThemeVariants(ButtonVariant.LUMO_ERROR,ButtonVariant.LUMO_SMALL);
        remove.addClickListener((event) -> {
            //something actions
        });
        layout.add(remove);
        
        return layout;
    }).setTextAlign(ColumnTextAlign.END).setFlexGrow(0).setWidth("1px");
    mygrid.setItems(employeeList);
    
    add(mygrid);
}

}

class Employee {
String name;
String location;

public Person() {
}

public Employee(String name, String location) {
    this.name = name;
    this.location = location;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getLocation() {
    return location;
}

public void setLocation(String location) {
    this.location = location;
}

}

2

Hi Yu, good question, this is actually a bit tricky because of the way the Grid’s rows (whose hover state you want to target) are in the shadow DOM, while your custom cell content (that you want to show) is in light DOM, and, to make things worse, the content is not directly slotted into the row, but wrapped in two layers of wrappers.

I think the easiest way to do this is to introduce your own custom css property, e.g. --toolbar-visibility that you use to toggle the visisbility.

(In this example I’m using the visibility css property, toggling between hidden and visible, but you might also want to try display: none / flex or opacity: 0 / 1 – there are way too many ways to hide something in css :grin: )

// Toggle the property when the row is hovered
vaadin-grid::part(row):hover {
  --toolbar-visibility: visible;
}

// Define the toolbar's visibility based on the property
.my-toolbar {
  visibility: var(--toolbar-visibility, hidden);
}
3

Of course this still won’t give you the kind of overlaid toolbar like the one in Gmail, since that solution is based on 2 alternating contents: the datetime and the toolbar whose visibilities alternates on hover. Also I just noticed that the gmail hover-toolbar somehow manages to force the content on the left to shrink to accommodate it, without affecting other rows… I’m not entirely sure how they do that, but I’m pretty sure that’s not really doable in a Vaadin Grid.