Seven Advanced CxJS Grid Features

Marko Stijak
2018-02-10

Grid (data-table) widget is a very important building block of enterprise applications. CxJS includes a versatile grid control which beside standard grid operations such as selection, sorting, paging, and filtering, offers more advanced features out of the box.

1. Rich Content

CxJS grids allow super simple date, number, and currency formatting. On top of that it’s possible to use other CxJS widgets inside the grid, such as sliders, number fields or even charts and other grids.

2. Drag & Drop

Grid supports dragging & droping of rows. This can be used to reorder records within a grid or to move records between multiple collections.

3. Grouping & Aggregates

Data in the grid can be easily aggregated (grouped) by any column. Group-level headers and footers display aggregated values.

4. Row Editing

In some scenarios, the easisest way to edit the data is to do it directly inside the grid. Each grid row is a separate validation group which makes row editing very simple.

5. Row Expanding

Grids can display a lot of data, but sometimes it’s required to display even more data on demand. This is easily implemented by expanding rows into additional lines with their own unique content.

6. Trees

Did you know that a grid can be easily converted into a tree by indenting and rendering tree icons in the first column? CxJS offers TreeNode and TreeAdapter components which makes this task very straightforward.

7. Buffering & Infinite Scrolling

Dealing with large data collections can cause UI performance problems. When grid buffering is enabled, only visible rows are rendered. Instead of rendering all 5000 rows, only 10–20 currently visible rows are rendered. Grid tracks scroll position and re-renders new rows when necessary and optionally loads more data (a.k.a infinite scrolling).

Conclusion

Grids are extensively used in many different ways. Instead of building multiple widgets, the Grid widget in CxJS is packed with features that cover the most common use-cases. I believe we managed to struck the balance between customization options, performance and user experience. Feel free to comment and suggest new features or enhancements in the comments.

CxJS allows you to easily build enterprise JavaScript applications. There is no better tool for the job, now completely free for small teams and startups. Form widgets, tables, charts, client-side routing, advanced layouts, themes, and many other features are available out of the box.


Seven Advanced CxJS Grid Features was originally published in Codaxy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Back to Blog