Sorting Data table with 10k rows is very slow

Topic: Sorting Data table with 10k rows is very slow

EyedPes free asked 4 years ago

Hey guys, I'm having issues with sorting a table with many rows. I have a table with the mdbTable directive and I use sorting (mdbTableSort) to sort by column. I have tables with 10k rows or more. Sorting the data takes a long time (10s of seconds). Which sorting algorithm is implemented and is there a convenient way to change the the sorting alogrithm?

Thanks in advance :)

Arkadiusz Idzikowski staff commented 4 years ago

Thanks for letting us know about that, we will try to debug that on our end. Unfortunately, the sorting method is currently used in internal code of the component and cannot by changed. We will think about making it more customizable but it will probably require breaking changes.

EyedPes free commented 4 years ago

Thanks for your response. More information: Sorting a table with 10k rows increases the cpu usage by 30 % and sometimes freezes the browser.

Do you have any estimation when the changes will be implemented? In the meantime: Do you have any suggestions how i could set up a workaround for this problem?

Arkadiusz Idzikowski staff commented 4 years ago

We can't provide an ETA yet because we don't know yet how long it will take to fix this problem.

I'm afraid there is no easy workaround for that for now. We will probably need to change the internal code of the component.

EyedPes free commented 4 years ago

No problem. Thank you for your quick response and your support.

Add comment

Konrad Stępień staff answered 4 years ago

1 0 Best answer

<p>Hi <a href="/profile/?id=65027" target="_blank" rel="nofollow">@EyedPes</a>,</p>

<p>This is not exactly a problem with sort system. Of course, we will refactor of sort system, but the main problem is in render data with <code>*ngFor</code> loop. For better performance, you should use <code>trackBy</code> function in your loop. </p>

<p>This is a simple example:</p>

<pre class="prettyprint"><code><table id="tableSortExample" mdbTable class="z-depth-1">
  <thead>
    <tr>
      <th
        *ngFor="let head of headElements; let i = index"
        aria-controls="tableSortExample"
        scope="col"
        [mdbTableSort]="elements"
        [sortBy]="headElements[i]"
      >
        {{ head | titlecase }}
        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of elements; trackBy: trackByFn; let i = index">
      <th scope="row">{{ el.id }}</th>
      <td>{{ el.first }}</td>
      <td>{{ el.last }}</td>
      <td>{{ el.handle }}</td>
    </tr>
  </tbody>
</table>
</code></pre>

<pre class="prettyprint"><code>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

elements: any = [];
  headElements = ['id', 'first', 'last', 'handle'];

ngOnInit() {
    for (let i = 1; i <= 10000; i++) {
      this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
    }
  }

trackByFn(index: any ) {
    return( index );
  }
}
</code></pre>

<p>More info about it you can find here: <a href="https://angular.io/api/core/TrackByFunction" target="_blank" rel="nofollow">TrackByFunction</a>.</p>

<p>Best, Konrad.</p>

Please insert min. 20 characters.

Hi @EyedPes,

This is not exactly a problem with sort system. Of course, we will refactor of sort system, but the main problem is in render data with *ngFor loop. For better performance, you should use trackBy function in your loop.

This is a simple example:

HTML

<table id="tableSortExample" mdbTable class="z-depth-1">
  <thead>
    <tr>
      <th
        *ngFor="let head of headElements; let i = index"
        aria-controls="tableSortExample"
        scope="col"
        [mdbTableSort]="elements"
        [sortBy]="headElements[i]"
      >
        {{ head | titlecase }}
        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of elements; trackBy: trackByFn; let i = index">
      <th scope="row">{{ el.id }}</th>
      <td>{{ el.first }}</td>
      <td>{{ el.last }}</td>
      <td>{{ el.handle }}</td>
    </tr>
  </tbody>
</table>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  elements: any = [];
  headElements = ['id', 'first', 'last', 'handle'];

  ngOnInit() {
    for (let i = 1; i <= 10000; i++) {
      this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
    }
  }

  trackByFn(index: any ) {
    return( index );
  }
}

More info about it you can find here: TrackByFunction.

Best, Konrad.

EyedPes free commented 4 years ago

Hi Konrad, Thank you for your answer! You are right, I didn't really think about the trackBy function. Implementing the function cut the sorting time in half (from 8 seconds to 4 seconds)!! Thank you very much!

Konrad Stępień staff commented 4 years ago

We will still try to refactor it. But we are happy that the issue was resolved. :)

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.5.4
Device: PC
Browser: Firefox
OS: Windows 7
Provided sample code: Yes
Provided link: No

EyedPes

10Support score
2Questions 0Answers 0Snippets