Add integrated row actions to Vaadin Grids with ActionGrid

Vaadin Grids are used not only to display tabular data, but frequently also to perform actions on the items in their rows. However, developers have had to add that functionality themselves, usually via a column or columns containing buttons and the logic to manage the state of each button and perform its desired action. It is tricky to get everything just right, particularly security, accessibility, and click event propagation suppression. And if your application has a lot of Grids, that can result in a lot of duplicated, challenging-to-maintain code.

Enter the Grid with Action Column for Vaadin Flow (ActionGrid) Add-On. This powerful extension of the Vaadin Grid component integrates row action support into your grids. Whether you’re building a maintenance view or a data management interface, ActionGrid eliminates the need to manually implement a custom row-level action mechanism by providing a built-in action column managed with a clean, fluent API.

What is ActionGrid?

ActionGrid enhances the standard Vaadin Grid by incorporating a dedicated column for icon-based “action” buttons. Each action can be dynamically tailored per row with properties for icon, styling, tooltip, accessibility label, visibility, and click handling. This add-on provides a cohesive and integrated solution for adding interactive controls to your grid, ensuring a polished and accessible user experience without custom action column logic.

Key features

• Dedicated action column: Adds a column, which can be frozen to the start or end of the grid or hidden as needed, for action buttons.
• Fluent API: Configure actions with a chainable, intuitive API, similar to Grid’s fluent column configuration API.
• Dynamic customization: Tailor each action’s appearance and behavior per row, including icon, CSS style, ARIA label, tooltip, visibility, and enabling.
• Seamless integration: The action column is automatically managed for ordering and visibility, preventing conflicts with other grid columns.
• Event propagation suppression: Block click events on action buttons from also inadvertently generating a row selection event.
• Accessibility: Built-in support for ARIA labels to help facilitate WCAG compliance.
• Security: Server-side logic to disregard invalid client-side interactions.

Get started with ActionGrid

Adding the ActionGrid to your Vaadin project is straightforward as it is a drop-in replacement for Grid. Here’s a quick example to demonstrate its use:

ActionGrid<Item> actionGrid = new ActionGrid<>();

actionGrid.addColumn(Item::getName)
    .setHeader("Name");

actionGrid.addColumn(Item::getDescription)
    .setHeader("Description");

actionGrid.addAction("edit")
    .setIcon(VaadinIcon.EDIT.create())
    .setAccessibleName(item -> "Edit " + item.getName())
    .setTooltip("Edit this item")
    .setVisible(Item::isUnlocked)
    .setEnabled(Item::isEditable)
    .addClickHandler(item -> Notification.show("Editing: " + item.getName()));

actionGrid.addAction("delete")
    .setIcon(VaadinIcon.TRASH.create())
    .setAccessibleName(item -> "Delete " + item.getName())
    .setTooltip("Delete this item")
    .setVisible(Item::isUnlocked)
    .setEnabled(Item::isRemovable)
    .addClickHandler(item -> Notification.show("Deleting: " + item.getName()));

actionGrid.setItems(
    new Item("Item 1", "Editable and removable", true, true, true),
    new Item("Item 2", "Non-editable", true, false, true)
);

This code creates a grid with two columns and two actions (edit and delete) that are conditionally enabled based on the item’s properties. The result is a clean, interactive grid with dynamic action buttons.

Why use ActionGrid?

The ActionGrid saves you time by providing a fully integrated action column, eliminating the need to build custom action mechanisms from scratch. Its familiar, fluent API and dynamic rendering make it easy to create responsive, accessible interfaces without writing and maintaining repetitive boilerplate code. Plus, it integrates seamlessly with Vaadin Flow’s Grid, ensuring compatibility with your existing projects.

Try it out!

Ready to enhance your Vaadin grids? Add the ActionGrid to your project via Maven:

<dependency>
    <groupId>org.vaadin.addons.joelpop</groupId>
    <artifactId>action-grid</artifactId>
    <version>1.0.0</version>
</dependency>

Explore the full documentation and examples on the GitHub repository or try it out in your next Vaadin project.

We’d love to hear your feedback and see how you’re using ActionGrid to build better web applications! Leave a comment below or join the conversation on the Vaadin Forum.