In this post I will tell you about right-angled, an open source library for building grids (aka lists, aka data tables) for Angular apps.

At the moment right-angled is stable and works well with Angular 4.x+ both in JIT and AOT modes.

right-angled is distributed under the MIT license. The source code is available on github.

There is a demo application with the detailed description of the library features, live demos and code samples. If one day you want to see the source code of this demo application, you can also find it on github.

What right-angled can do

As I mentioned before, this library is designed for constructing grids in angular applications.

Also it is an advanced model of selection which works separately from grids. It is just selection of whatever.

One more idea is the declarative configuration of components properties which gives you the following features without manual coding:

• persisting and restoring component state (paging, sorting, any other properties you need),

• resetting values of configured properties to their defaults,

• sending values of configured properties as parameters in the server request

Why develop “another one grid library”?

When we were choosing among the existing angular grid libraries, we realized that they were too “heavy” and complicated. The template of the simplest grid from the typical angular grid library looks like this:

This template has too little HTML and too much of “grid library”. Lots of components, lots of settings, and too many things you have to remember about. This seemed quite excessive for the modern development approach.

Also, the consequence of the first drawback is the second one — markup generated by such components.

Grid is quite a complicated control. And HTML generated by such components doesn’t always look good when integrated into the application with its own styles and layout.

The opposite side is the universal markup which considers all possible variants. But such markup is not always rendered quickly and it is hard to style. You can spend hours on styling the third-party grid, but it still will not look native in your UI.

Actually, simple styling is the most important thing, because customers are not happy with stamped faceless sites today. So, each new project means new unique UI design.

After thinking through all of it, we decided to create library with the following fundamentals:

Minimum of components

The library should contain minimum of components and integrate into an application markup rather than generate its own markup. The same idea concerns the styles — right-angled doesn’t have any css. The app styles is 100% up to you.

Below you can see the template of simple list implemented with right-angled library. As you noticed it is an ordinary markup with the use of bootstrap (the use of bootstrap is not necessary, it is used for illustration) and a bit of custom directives.

Such template looks very simple, because it doesn’t have such notions as “row”, “column”, “view template”, “edit template” and others so common for grid libraries. Such abstractions are often added to grid libraries. However, we think they are not really necessary and just bring more complication in.

And of course you can change such markup anytime you need.

Simple but functional

In order not to turn “minimum of components” into “minimum functionality”, right-angled is equipped with the set of functional services. They serve as the foundation for the library components.

It is possible to get the access to these services right in the template by using host-directives. There are four such directives — rtList with list functionality, rtSelectionArea with selection functionality, and rt-buffered-pager and rt-pager-pager components to work with paging. Also you can inject these services into your components to implement the behavior you need.

In this way, instead of a complex pager component with dozens of configuration options, right-angled provides a couple of simple components and directives mentioned above to build exactly the pager you need. And there is a detailed example to help you implement your own fully functional pager component.

Below you can see the list template from the final example in quick tour of demo application. It has:

paging

sorting

filters

selection

buttons for data loading, request cancellation, resetting filters values

serialization of list state in query string (so that you can share a link to another user, and the page will be displayed with exact same state of the grid component).

The template is quite large, but at the same time it has a lot of functionality. And this is still regular HTML which is easy to style and can be separated into small reusable components (it is not done in demo application so that the example remains simple).

Minimum of dependencies

right-angled doesn’t depend on such libraries as bootstrap, jquery and so on. These libraries are useful, but it’s up to you to decide whether to use them or not. As for grid implementation, they are not necessary.

The only dependency, beside angular, is e2e4 library, also created by us. This library supplies services abstracted from the presentation frameworks and implements the whole functionality of grids, selection and state management.

Conclusion

This blog post was a brief introduction to right-angled library. There’re plenty of additional options which you can examine in demo application. Also you can follow the project on github or follow right-angled account on twitter.

If you enjoyed this article, please tap the ❤ so other people will see this on Medium.