React Data Grid - Tree Data and Banded Columns (v1.2)

Oliver's Blog
23 April 2018

Our upcoming release v1.2 of the React Grid contains two new big features: support for hierarchical data, and banded columns.

Hierarchical Data Support

Hierarchical data can be displayed in a tree structure. This feature is made available through three new plugins: TreeDataState, CustomTreeData and TableTreeColumn.

Tree Data

A guide for the Tree Data feature as well as an online sample are already available. You can see in the demo that other Grid functionality like Sorting, Filtering, Selection etc. can be used in conjunction with Tree Data.

Banded Columns

The second big new feature is Banded Columns, which are visual groups of columns. The TableBandHeader plugin is responsible for the implementation.

Banded Columns

A guide page is available for Banded Columns, which includes samples. This online demo also includes a Banded Columns configuration. Note that columns can still be resized and rearranged when they are included in a band!

Availability

At this time, a beta version of React Grid v1.2 is available. You can install it using the next tag:

npm i --save @devexpress/dx-react-core@next @devexpress/dx-react-grid@next
npm i --save @devexpress/dx-react-grid-material-ui@next

As usual, any feedback is greatly appreciated!

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
CRM-ad8ccd73-6576-4ba3-b11a-df45936f8106
Carmen G

Hi,

Does react data grid-tree data support data editing? (including added a new row to a child element)


16 March 2020
Oliver Sturm (DevExpress)
Oliver Sturm (DevExpress)

Hi,

The React Grid supports editing in conjunction with tree data. You can use the relevant plugins as described here: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/editing/ 

The problem of adding a row to a specific parent doesn't have a built-in solution at this time. However, we have a GitHub issue that describes possible solutions and includes a demo: https://github.com/DevExpress/devextreme-reactive/issues/1540 

I found several other issues in our GitHub repo with hints for a drag&drop implementation (I searched for "tree drag"), but I'm afraid we don't have a complete sample at this time. Please feel free to get in touch if you need more help with your implementation.

16 March 2020
CRM-ad8ccd73-6576-4ba3-b11a-df45936f8106
Carmen G
Thank you very much.
16 March 2020

Please login or register to post comments.