Editable treetable or datatable

Dear webix developers,

I´d like to ask you for advise on how to create ui.treetable or ui.datatable with a function enabling to group items similar to the attached picture.

The database should contain basic calculation functions for multiplying amounts by their prices.

I was able to create a basic data structure, mathematical functions for multiplying amounts by price, for calculating totals,
Ajax call back functions for loading and saving data on the server.

It´s been a while since I started to solve the problem that the items are grouped in a strange way.
The first initialised categories don´t contain the necessary data, the ones which are downloded from the server. Unfolded items are then ok.
Data structure as per the following picture Screenshot by Lightshot

I need to know whether my requirements are realistic and the data structure for the first items can be adjusted or I should look for an other program.

My last question is whether I can set html5 data attributes for rows or cells.

Thank you for your replies.

Hi,

During grouping aggregated data items for displaying group headers and footers are added to the dataset.

And you can tune group header and footer. For instance, if you want to show the subtotal in the group header, you can use mapping: http://webix.com/snippet/000fbe74

As for cell attributes, it is possible to specify templates within columns array where any HTML can be added:

columns:[
   { id:"rank", header:"Rank", template:"<div>#rank#</div>"},
  //or
   { id:"rank", header:"Rank", template:function(obj){
          return  "<div>"+obj.rank+"</div>";
   }}
]