The latest version of Vaadin Spreadsheet is now available for Vaadin 24 with the same feature set as found in Vaadin 8. Read on to learn more about the updates!
Vaadin Spreadsheet is a component that enables users to create, edit, and view spreadsheets in the web browser. It offers an intuitive user interface and a range of features that are commonly found in desktop spreadsheet applications, including;
- Cell formatting: both the cell style and data format can be customized.
- Conditional formatting: the cell style changes when the data matches certain criteria.
- Freezing rows and columns: makes certain rows and columns remain visible even when scrolling.
- Grouping: multiple rows and columns can be grouped together.
- Table with filters: create tables from cell ranges with filtering support.
Users with experience working with spreadsheet applications will find the Vaadin Spreadsheet component familiar and easy to use.
Background
The component was first created to enable developers to integrate spreadsheet functionality directly into their applications, so the application users wouldn’t have to seek other tools to interact with the data.
The first iteration of Vaadin Spreadsheet was introduced in 2015 for Vaadin 7. It was then updated for Vaadin 8; however, the complexity of the component made it difficult to port it to the major changes present in Vaadin 10.
After two years of development and effort, the latest version of Vaadin Spreadsheet is now available for Vaadin 24 with the same feature set as found in Vaadin 8. This will enable users to seamlessly migrate to the new platform version without having to resolve to use workarounds such as the Multiplatform Runtime tool.
What's in the new Spreadsheet release with Vaadin 24?
The latest release of Vaadin, version 24, includes two Spreadsheet features absent in the previous version shipped with Vaadin 23. These features were present in the original version of the Spreadsheet and have now been restored.
Charts support
When a spreadsheet file containing charts is imported, the Spreadsheet component renders them as Vaadin Charts. This provides a convenient way to examine and evaluate data visually in chart format, facilitating the identification of patterns and trends. The charts are also interactive, so any changes made to the data in the spreadsheet are immediately reflected on the chart. Respectively, clicking a specific section on the chart highlights the referenced data range in the spreadsheet.
Embedded components support
Other Vaadin components can be embedded directly within the spreadsheet cells. This makes it possible to include additional functionality and features and create customized solutions. For example, you could include fields such as DatePicker or TextField for editing the cell values.
What’s different compared to the original Spreadsheet?
Compared to the original Spreadsheet in Vaadin 8, the latest version is nearly identical regarding its feature set and API. The primary difference is that the new version renders as a web component, concealing the internal DOM structure and styles within the component's shadow root.
Unfortunately, stylable parts have not yet been added to the component, which means that customizing the spreadsheet's appearance is not supported for the time being.
Future plans
Although the Spreadsheet component in Vaadin 24 is now feature-equivalent to the original Spreadsheet, there are still some things on our roadmap to align it with the requirements of modern Vaadin components.
Firstly, the current appearance of Spreadsheet is based on Valo, which was the default theme used by the components in Vaadin 8. We plan to replace it with the current default theme, Lumo, so the component better aligns with the Vaadin design system. A crucial part of the overall themeability improvement is labeling the elements within the component's shadow root with appropriate part names to be customized with global styles.
Secondly, good accessibility (a11y) support is essential for people with visual, auditory, or physical disabilities, allowing them to access and navigate digital content effectively. It is crucial to have good accessibility to all digital products and services to ensure all users can benefit from their features and capabilities. We intend to perform an a11y analysis on the Spreadsheet component in the future and, based on the results, make the necessary adjustments to enhance its accessibility and support for screen readers.
Lastly, most modern Vaadin Components have built-in support for right-to-left (RTL) languages, which are written and read from right to left rather than left to right. As we continue to improve the Spreadsheet component, we will be enhancing it also to support RTL, thereby increasing its usability for a broader range of languages. This means that the Spreadsheet will be more accessible and functional for people who speak and write languages that follow a right-to-left orientation, such as Arabic, Hebrew, and Persian.
Get started
Getting started with the Vaadin Spreadsheet component is straightforward. There are a couple of options, depending on whether you have an existing Vaadin application.
You can include the following dependency to your existing Vaadin 24 project and start using the component like any other Vaadin component. There are several embedded live demos with expandable code-example sections using the Spreadsheet’s various features in the Vaadin Docs.
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-spreadsheet-flow</artifactId>
</dependency>
If you do not yet have a Vaadin application, you can generate one with a Spreadsheet included by heading over to start.vaadin.com, then picking the Spreadsheet option from the list of views, and finally downloading the project to your local environment.
For more detailed information, check out the Spreadsheet documentation.
Please note that you need a Pro subscription to use the Spreadsheet component. Start a free trial!