BeanTable
A bean populated html table component for Vaadin 24, 23.3.x and Vaadin 14.x backed by a dataprovider.
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
Compatibility
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.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