Contact us Create app

Directory

← Back

BeanTable

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

Author

Rating

Links

Popularity

500+

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

Last updated: 2024-07-17

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

3.1.7

  • Fixes addComponentColumn not setting column caption
  • Rerelease 3.1.6 due packaging issue
Released
2024-07-17
Maturity
STABLE
License
Apache License 2.0

Compatibility

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

BeanTable - Vaadin Add-on Directory

A bean populated html table component for Vaadin 24, 23.3.x and Vaadin 14.x backed by a dataprovider. BeanTable - Vaadin Add-on Directory
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.
Online Demo
View on GitHub

BeanTable version 1.0.0
### Version 1.0.0 - The first version, feedback needed, API wishes welcome

BeanTable version 1.0.1
### Version 1.0.1 - Fixed typo in one API - Fixed memory leak

BeanTable version 1.0.2
### Version 1.0.2 - Small fix, use th in header instead of td

BeanTable version 1.1.0
### Version 1.1.0 - Basic paging support

BeanTable version 1.1.1
### Version 1.1.1 - Fixing issue with setItems(..) not clearing old items

BeanTable version 1.2.0
### Version 1.2.0 - Added methods for setting class name providers - Added support for chaining setters of Column configuration

BeanTable version 2.0.0
### Version 2.0.0 - Added support for DataView API with newest Vaadin versions. Tested with Vaadin 21

BeanTable version 2.1.0
### Version 2.1.0 - Tested compatible with Vaadin 22 - Added setHeader(Component) overloading to set component instead of text in header. Hint: use Html component for adding html content.

BeanTable version 2.1.1
### Version 2.1.1 - Fix issue with initial data reset missing with in-memory data

BeanTable version 2.2.0
### Version 2.2.0 - Added getters for the Column and List

BeanTable version 2.3.0
### Version 2.3.0 - Added Tooltip support for table cells and paging buttons - Added Column width API - Added Column alignment API

BeanTable version 2.4.0
### Version 2.4.0 - Add A11y features for screenreader friendliness

BeanTable version 2.4.1
### Version 2.4.1 - Fix NPE using paged mode when i18n was not set

BeanTable version 2.5.0
### Version 2.5.0 - Add getPage / setPage - Fixed issue page not being adjusted when filtering

BeanTable version 2.6.0
### Version 2.6.0 - Added cell focus behaviors, which are useful with A11y. By default no focus behavior. - Did some small improvements in A11y behaviors by testing the component with NVDA

BeanTable version 2.7.0
### Version 2.7.0 - Added theme variants for stripes, bordering, padding and wrapping

BeanTable version 2.8.0
### Version 2.8.0 - Added menu for column visibility selection - Added API to control column visibility - Added row index variant

BeanTable version 1.3.0
### 1.3.0 - Backport features from 2.8.0 - Added menu for column visibility selection - Added API to control column visibility - Added row index variant - Added theme variants for stripes, bordering, padding and wrapping - Added cell focus behaviors, which are useful with A11y. By default no focus behavior. - Add A11y features for screenreader friendliness - Add getPage / setPage - Fixed issue page not being adjusted when filtering - Added Tooltip support for table cells and paging buttons - Added Column width API - Added Column alignment API - Added getters for the Column and List - Added setHeader(Component) overloading to set component instead of text in header. Hint: use Html component for adding html content.

BeanTable version 2.9.0
### Version 2.9.0 - Better keyboard navigation - Selection features and API

BeanTable version 3.0.0
### Version 3.0.0 - Compatible with Vaadin 24

BeanTable version 3.0.1
### Version 3.0.1 - Small performance improvement in programmatic column visibility toggling

BeanTable version 3.0.2
### Version 3.0.2 - Fix column menu button styles

BeanTable version 2.9.1
### Version 2.9.1 - Fix column menu button disappearing when last column is hidden - Fix column menu button styles - Fix issue when using callback dataprovider without - Small performance improvement in programmatic column visibility toggling

BeanTable version 3.0.3
### Version 3.0.3 - Fix column menu button disappearing when last column is hidden - Fix issue when using callback dataprovider without count query

BeanTable version 3.1.0
### Version 3.1.0 - Improve keyboard navigation - Improve A11y of the row selection - Added item click event

BeanTable version 3.1.1
### Version 3.1.1 - Small performance improvement in keyboard events

BeanTable version 1.4.0
### Version 1.4.0 - Backport from version 3.1.1 - A11y and performance improvements - Keyboard navigation - Selection and item click

BeanTable version 3.1.2
### Version 3.1.2 - Fix keyboard navigation getting lost with PreserveOnRefresh

BeanTable version 2.10.0
### Version 2.10.0 - Fix keyboard navigation getting lost with PreserveOnRefresh and improve keyboard navigation - Small performance improvement in keyboard events - Improve A11y of the row selection - Added item click event

BeanTable version 2.10.1
### Version 2.10.1 - Add "No data" and "Failed fetching data" messages. The both can be localized and have A11y.

BeanTable version 3.1.3
### Version 3.1.3 - Added "No data" and "Fetching data failed" messages

BeanTable version 3.1.4
### 3.1.4 - Fix A11y metadata update upon programmatic selection

BeanTable version 1.5.0
### Version 1.5.0: - Fix A11y metadata update upon programmatic selection - Added an alert text for "No data" when the table is empty - Added an error alert text "Fetching data failed" when data provider fetch fails - Fix keyboard navigation getting lost with PreserveOnRefresh

BeanTable version 3.1.5
### Version 3.1.5 - Small fixes and fix class name conflict with Tree add-on

BeanTable version 3.1.6
### Version 3.1.6 - Fix bug: addComponentColumn did not set the header caption

BeanTable version 3.1.7
### 3.1.7 - Fixes addComponentColumn not setting column caption - Rerelease 3.1.6 due packaging issue

Online