BeanTable

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

View larger

Close

View larger

Close

View larger

Close

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);

Links

• Online Demo
• View on GitHub

Compatibility