checkbox table ideas

Hi, I have a requirement to create a table with checkboxes, as show in the attachment. I looked into pivot grid, which was the closest match to what I am looking for, but I am not sure if I can add checkboxes to a pivot grid. Any idea on how to achieve the control structure I am looking for will be helpful. thx
Attachment: sync_cbaa0e47.zip

let pivotObj: PivotView = new PivotView({      //....          dataBound(): void {              trend();          },                  cellTemplate: '${getCellContent(data)}',                });  (<{ getCellContent?: Function }>window).getCellContent = (e: any): any => {          let template: string;          if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 ) {              template = '<input id= "element'+ i +'" type="checkbox">'; //Here,  you can append the html elements              i++;          } else {              template = '';          }          return template;    };                       function trend() {         //....                              for (let rnt: number = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) {                let row: number = fields[fieldHeaders[rnt]];                                for (var j = 0, ci = 1; j < cLen && ci < colLen; j++ , ci++) {                    let node: HTMLElement = cTable[3].children[1].children[row].childNodes[j] as HTMLElement;                         let checkbox1: CheckBox = new CheckBox({ checked: false, change: onChange,                     created: () => {                      removeClass([node.lastElementChild.querySelector('.e-frame')], 'e-icons');                    } });                    checkbox1.appendTo(node.lastElementChild as HTMLElement);     //create check boxes for the appended html input types.                    node.firstElementChild.remove();                                 checkbox1.checked = j==0? false: true                 }              }           }          }      }

thx for your sample. I tried to follow your stackblitz example, but I found it really hard to follow, as the json file you are using, has several hundred records. 

Query	Response
Can you please create another stackblitz demo using minimal json data (preferably only 10 -15 records)?	As per you request, we have created a minimal level sample for your convenience.  Sample link: https://stackblitz.com/edit/wntdbd-79gk43?file=index.ts
Also, can you show me how I could find out the Ids of the selected checkboxes,  on clicking a button?	You can get the ids of selected checkboxes on button click through the following code snippet.  Code snippet: [JavaScript]  button.element.onclick = (): void => {          var arr= []          var ct = [].slice.call(document.getElementsByClassName("e-table"));          var tbody = ct[3].children[1].children;          for(var p=0; p<tbody.length; p++) {            for(var q=0; q < tbody[p].cells.length; q++) {              if(tbody[p].cells[q].querySelector(".e-checkbox-wrapper[aria-checked='true']"))              arr.push(tbody[p].cells[q].querySelector(".e-checkbox-wrapper input").id);            }     }  console.log(arr);  };  Meanwhile, we have prepared sample for your convenience.    Sample link: https://stackblitz.com/edit/wntdbd-g9svmv?file=index.ts    Screenshot:

this was much better. However, why are your examples in pure js? I am using angular 7 and  I was looking at the angular docs to learn about more features, that are written specifically in angular 2+. Can you please rewrite your last code sample in angular2+ format. Something like this- https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information/#selection-type 

none of the checkboxes in your angular sample is clickable. Can you please fix it?

Query	Response
none of the checkboxes in your angular sample is clickable. Can you please fix it?	Please find the modified sample here.  https://stackblitz.com/edit/angular-e4otvr-nbvmrs?file=app.component.ts
Also, I would like to hide the "Grand Total" column AND row. How can I do that?	You can hide grand totals by the property “showGrandTotals:false” inside dataSourceSettings.  Documentation link: https://ej2.syncfusion.com/angular/documentation/pivotview/summary-customization/#showhide-grand-totals  Sample link: https://stackblitz.com/edit/angular-e4otvr-nbvmrs?file=app.component.ts

Thanks, this works great. I do see a warning in the console that says 'WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss'. I feel this is a security issue that needs to be fixed. Can you take a look?