Topic: Datatable scrollToIndex(n)
How to programmatically scroll to a particular row? Is it possible to implement something like
scrollToIndex() {
this.table.scrollToIndex(2);
}
HTML
<div class="datatable table-responsive table-hover datatable-sm" >
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sortSearch="mdbTableSort"
[dataSource]="dataSource"
[sort]="sortSearch"
[forceSort]="true"
[pagination]="paginationSearch"
>
<thead class="datatable-header">
<tr>
</tr>
</thead>
<tbody class="datatable-body">
<tr scope="row" *ngFor="let ps of table.data; let i=index">
<td>
{{ps.date}}
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #paginationSearch></mdb-table-pagination>
</div>
You can use the scrollIntoView Javascript method to achieve that. Firstly you need to grab the list of rows. I will show you an example how to do it.
Place template variable on <tr> element:
<tr *ngFor="let data of table.data" scope="row" #tableRow>
In component's class grab the list of elements via ViewChildren() decorator like so:
@ViewChildren('tableRow') rows: QueryList<ElementRef>;
And then you can implement a method and call it when desired:
scrollToRow(index: number) {
const rowElements: HTMLTableRowElement[] = this.rows
.toArray()
.map((element) => element.nativeElement);
rowElements[index].scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
Let me know if that worked for you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 5.2.0
- Device: laptop
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: No