Grid hover with Gmail Inbox table hover features

When i mouseEnter to the grid row ,that time i want to show hidden icons on the right side of the grid row,and also mouseLeaving time icons will hide,same as gmail inbox table feature.Iam using Hilla with React front-end.

Use a renderer on the column where you want the feature, and in the div (or other element you return there), you can add any CSS or JS logic you need to hide/show stuff on hover

Iam confused about that logic,when i mouseEnter 1st row ,that time it shows right side of the the 1st row and i mouseEnter to 5th row, the rest of all icons are hide and shows only in 5th row.How can i do that sir? Is this using with id or something? grid confusing me.please help me!

Something along the lines of

<Grid items={emails}>
    <GridColumn path="from"/>
    <GridColumn path="email"/>
    <GridColumn path="subject">
        {(row) => (
            <div className="subject flex gap-s items-center" >
                <span>{row.item.subject}</span>
                <span className="actions">
                    <Button>Delete</Button>
                    <Button>Edit</Button>
                </span>
            </div>
        )}
    </GridColumn>
</Grid>
.subject .actions {
    display: none;
}

.subject:hover .actions {
    display: block;
}

Hovering is working when i give opacity.But sir it showing only when i mouseEnter the subject Column.I dont want that,i want total row hover.I mean that even i mouseEnter the form column ,that time also want to show that buttons on the perticular row.not only if i mouseEnter the subject column.please help me…

So it is in your case closer to what is described here: Make Grid cells inherit background from rows (for easier styling) · Issue #6491 · vaadin/web-components · GitHub

I think the ticket linked is no issue for you, since you are not interested on background color specifically, but you can pick the selector ideas regarding grid row

Specifically this Make Grid cells inherit background from rows (for easier styling) · Issue #6491 · vaadin/web-components · GitHub

I.e. define your visibility with custom property and toggle its value on row hover

yes sir.that was nice😍 .But sir now iam facing an issue that, when i hover vaadin-grid::part(row):hover i want to show only the buttons,its default state is false.When i hover the row only want to show the button.

Like that four icons
1697609709372.jpg

What I said above is this

html {
–action-button-visibility: none;
}

vaadin-grid::part(row):hover {
–action-button-visibility: block;
}

vaadin-grid::part(action-column) {
display: var(–action-button-visibility);
}

And use part name generator on your action button column to give it part name, e.g. action-column like above

Thank You❤️