DevExtreme Reactive - A Feature Update (v1.7)

It’s been a while since the last blog post about DevExtreme Reactive controls and it’s time to catch up with the latest developments! Our developers have been hard at work and we are now on version 1.7. Here’s a summary of new functionality.

Vue Grid

The Vue Grid has received lots of attention in an effort to work towards feature parity with the React Grid.

Advanced Filtering

The filtering feature set of the Vue Grid is now the same as that of the React Grid. You can find documentation and demos here.

Vue Grid Filtering

Banded Columns

Banded columns are fully supported now, including the ability to customize their appearance. They allow you to group columns in bands and provide group titles, making the structure of the grid easier to understand for the end-user. Here are documentation and demos.

Vue Grid Banded Columns

Virtual Scrolling

Row and column virtualization enable the grid to deal with large data structures efficiently. Instead of generating row and column objects in memory for all data elements at once, the grid uses placeholders for the larger part of the data that is not currently visible at any given point. Documentation and demos for this functionality are here.

Column Chooser

This UI element allows the end-user to select visible columns at runtime. Here are documentation and demos.

Vue Grid Column Chooser

Tree Data Mode

There is special support for hierarchical Tree Data in the Vue Grid now. The functionality is very flexible, so you can easily utilize any data structure you already have in your application.

In comparison to the React Grid, the hierarchical selection feature is currently missing.

Find documentation and demos for Tree Data in the Vue Grid here.

Vue Grid Tree Data Mode

React Grid Summaries

The React Grid now supports very flexible summaries. Default summaries can be calculated automatically for all rows as well as for grouped subsets using Tree Data or Grouping. You can implement custom summary algorithms or completely take over the calculation algorithm (for instance to offload the job to a server), and of course you can influence the display format of calculated values.

Full documentation and demos are here.

React Grid Summaries

React Chart Grouped and Stacked Series

Grouped and stacked series are now supported by the React Chart. These two features are implemented by the same plugin and a simple property defines whether a particular series is part of a stack. You can even customize order and offset parameters of the stack, and the documentation page shows an example of a Streamgraph to illustrate this.

Documentation and demos are here.

React Chart Stacked Series

Test It Today!

All the features described above are available now and you can try them yourself by installing the latest versions of the DevExtreme Reactive packages.

What do you think? If you’d like to share your thoughts, please feel free to leave a comment below or post questions or suggestions to our GitHub issues page.

6 comment(s)
Juan Antonio Trujillo Montenegro

Glad to see some great progress on Vue components.

5 September, 2018
KTAS

Great. Can this be posted in DevExtreme blog as well?

5 September, 2018
Oliver Sturm (DevExpress)

Hi - we fixed up the tags a bit ("DevExtreme" was missing), so the post now appears in a few places where it might have been missing before. But I would argue that this is the DevExtreme blog, so please let me know if you meant some other location where the post is still missing!

6 September, 2018
KTAS

Thanks for fixing it. DevExtreme Components are simply RISING... :-)

12 September, 2018
Jerzy Rzaniak

Hi,

Do you plan to prepare the devextreme plugin for Vue CLI v.3 ?

14 September, 2018
Serge Al (DevExpress)

Hi,

Currently, we don't have such plans. We'll discuss the possibility of implementing it in the future.

14 September, 2018

Please login or register to post comments.