Attached are images for reference of this issue.
I have utilized ngx-datatable to showcase data. Upon continuous hovering over visible rows, three scenarios occur:
- The background of one row turns black;
- The text of one row becomes pixelated;
- The text of another row is not visible;
If anyone has experienced this problem before, please lend a hand. Below is the code snippet:
HTML Code:
The attribute I removed: columnMode="force"
<ngx-datatable
class="material"
[rows]="rows"
[rowHeight]="80"
[scrollbarV]="true"
[scrollbarH]="true">
<ngx-datatable-column [width]="30" name="Sr#" prop="sr"></ngx-datatable-column>
<ngx-datatable-column [width]="350" name="KPIs" prop="kpis"></ngx-datatable-column>
...
</ngx-datatable>
TS File:
export class CompObjectivesComponent implements OnInit {
rows = [];
constructor() {
this.fetch((data) => {
this.rows = data;
console.log(this.rows)
});
}
ngOnInit() {}
fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', `assets/100k.json`);
req.onload = () => {
cb(JSON.parse(req.response));
};
req.send();
}
addRow() {
const obj = {
"id": 0.0,
"name": "Immad Hamid",
"gender": "male",
...
}
this.rows.push(obj);
console.log(this.rows);
}
}
Issues Encountered:
Case One:(Both issues happened simultaneously): https://i.sstatic.net/fCi01.png
Case Two: https://i.sstatic.net/apnL0.png
Case Three: Issue couldn't be reproduced...