I am currently working on the development of an Angular 2 application that requires displaying a large amount of data in a scrollable table.
The data is stored in an array within my component class:
export class AppComponent {
clients: any[] = [];
constructor(){
for (var i = 0; i < 10; ++i) {
this.clients.push({
id: i,
name: 'Client' + i,
address: 'Address of client ' + i,
phone: '(51) 5454-4646'
});
}
}
}
To display the data, I utilize ngFor in my layout:
<div style="height:600px;overflow:scroll">
<data-table>
<th>Id</th>
<th>Name</th>
<th>Address</th>
<th numeric>Phone</th>
<tr *ngFor="let client of clients">
<td>{{ client.id }}</td>
<td>{{ client.name }}</td>
<td>{{ client.address }}</td>
<td>{{ client.phone}}</td>
</tr>
</data-table>
</div>
This application needs to load and display a large volume of data in a table with potentially tens of thousands of rows and multiple columns. However, there are performance issues causing significant lag during loading and execution.
In this scenario, pagination is not an option and the scroll feature is essential. I aim to maintain the appearance of the scroll thumb size and position as if all data is loaded, even if I need to implement a workaround such as loading only a portion of the data.
I seek guidance on the best practices to effectively handle this task without experiencing slowdowns.