Datatable scrollToIndex(n)


Topic: Datatable scrollToIndex(n)

ammi pro asked 11 months ago

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>

Rafał Seifert answered 11 months ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: 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