Directory

← Back

BeanTable

A bean populated html table component for Vaadin 24, 23.3.x and Vaadin 14.x backed by a dataprovider.

Author

Contributors

Rating

This is a simple html table based component backed by DataProvider. The data provider populates the Table with data from the beans. The component has minimal API and ultra simple design. The purpose of this component is to be a little sibling to Grid. Thus there are many features intentionally left out.

This component does support basic support lazy loading of the data in paged mode. Non paged mode is purposed for the small data sets only. In other words this is designed for use cases where Grid is too heavy, overkill, etc.

  • The latest version attempts to add top-notch accessibility support when focus behavior is enabled.

  • There is proper keyboard navigation when focus behavior is enabled.

  • BeanTable's cells can be populated by text, html or components. Also Tooltip provider can be applied.

  • There are theme variants for striped rows, padding, wrapping and border styles.

  • The component has css class name "bean-table" and custom css can be applied with it. CSS class name generator can be applied also.

  • There is rudimentary paging support for larger sets of data. This seems to work well also with accessibility.

  • There is selection mode for multiple rows

The component seems to have better performance than Grid when using Firefox as a browser. When using Chrome, the case is the opposite by Grid rendering faster.

Sample code

        // API follows the same patters as Grid

        // Instiate a new table and scan properties
        BeanTable<MonthlyExpense> table = new BeanTable<>(MonthlyExpense.class,false);

        table.setHtmlAllowed(true);

        // Different ways to add columns
        table.addColumn("year", MonthlyExpense::getYear);
        table.addColumn("month", expense -> "<i>" + expense.getMonth() + "</i>");
        table.addColumn("expenses");

        // Add component column
        table.addComponentColumn(null, expense -> {
           Button edit = new Button("edit");
           edit.addClickListener(event -> {
              Dialog dialog = new Dialog();
              index = data.indexOf(expense);
              dialog.add(createForm());
              dialog.open();
           });
           return edit;
        });

        // Add data
        List<MonthlyExpense> data = service.getData();
        table.setItems(data);

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

Version 2.2.0

  • Added getters for the Column and List
Released
2022-05-11
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 21
Vaadin 22
Vaadin 23
Vaadin 24+ in 3.0.0
Vaadin 14 in 1.0.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
Online