Two issues:
1. I keep receiving duplicate tables when using @handsontable/angular. If I create two tables, then the words don't overlap anymore.
2. Unable to select any of the cells if I use colHeaders and rowHeaders.
Not exactly sure what is going on. I suspect it's conflict with bootstrap?
Top image shows the overlap of the header. Second image is when I add another hot-table
one table:
<hot-table class="hot inline-block vert-top" width="{{ window_width }}"
[data]="data" [colHeaders]="colHeaders" [rowHeaders]="rowHeaders"
[tableClassName]="['table', 'table-hover', 'table-striped']"
>
</hot-table>
two tables:
<hot-table></hot-table>
<hot-table class="hot inline-block vert-top" width="{{ window_width }}"
[data]="data" [colHeaders]="colHeaders" [rowHeaders]="rowHeaders"
[tableClassName]="['table', 'table-hover', 'table-striped']"
>
</hot-table>
component.ts
ngOnInit() {
let headers = [];
this.rowHeaders = ['Revenue', 'Gross Profit', 'SGA', 'Total Operating Expense']
this.selection = Object.keys(this.income);
for (var j=0;j< this.rowHeaders.length;j++){
const temp = [];
for (var i = 0; i < this.income['Year'].length; i++) {
let head = this.income['Year'][i] + this.income['Type'][i] + this.income['Qtr'][i]
if (headers.indexOf(head) < 0 ){
headers.push(head);
}
temp.push(this.income[this.rowHeaders[j]][i])
}
this.data.push( temp )
}
this.colHeaders = headers;
}
Also tried this: duplicate headers when using Handsontable
I tried freezing the headers instead. Same result.
