Dynamic UI Grid using DevExtreme in Angular, React, Vue

All Client side applications need custom components which can be used to show and represent data in order to edit or perform some operations.

Most of the components in DevExtreme were more powerful. I explored them a lot and found that components are very dynamic and easily configured as per our needs.I have worked with many Grids but this Grid solved most of our problems in making the Grid more dynamic based on the columns and data sources. So when we switch the columns automatically the displayed Columns are updated.

I would like to share some of the beautiful features.

1. There components support Angular, JQuery, Vue, React.
2. We can easily drag and drop columns based on user need.
3. Filter and Sort data inside grid.
4. Bind Columns from Components so that they are dynamic.
5. Export to Excel.

In Order to Install Dev Extreme to your project you can follow their guide.

DevExtreme Angular Components

Sample Grid : Code

This is how I customized the Columns with some of them having drop downs and date.

They have other beautiful components too…