Apply table header merging to ui-grid

ui-grid is one of the most used angular UI components.

ui-grid already offers a lot of powerful and versatile features, but I do not know if it’s the specific taste of the company’s UX decision makers, but they prefer a table design with merged headers.

So, from a long time ago, I had a difficult time according to their decision.


The first solution was dhtmlxgrid. Until I met angular, we had a lot of projects over the years.

dhtmlxgrid

After meeting angular, I decided to break up with dhtmlxgrid. So the decision I chose was to directly implement header merging based on angular.js.
But it was not an easy choice. The expectations of the UX decision makers were already high, and the time was not enough.

ui-grid was already in use in areas where header merging is not required. However, the header merge function that is waiting is still not available.
After a few tries, I found a way to implement the header merge functionality that is not perfect.

Put the sample code here, and someone would like to see this code and give us your feedback.