0

I have created a simple data table with approx. 20 columns and 50 rows with something like this:

<ngx-datatable
    class="bootstrap"
    [rows]="filteredlist"
    [reorderable]="reorderable"
    [headerHeight]="50"
    [rowHeight]="38"
    [selectionType]="'single'"
    [scrollbarV]="true"
    [scrollbarH]="true"
    style="max-height: 60vh"
>
    <ngx-datatable-column name="#" width="50">
        <ng-template let-rowIndex="rowIndex" let-row="row" ngx-datatable-cell-template>
            {{ rowIndex + 1}}
        </ng-template>
    </ngx-datatable-column>
    ...

</ngx-datatable>

What I'm wondering now is the slow performance. When I scroll horizontal the header moves with a delay. Furthermore when I use some [frozenLeft]="true" it flickers a lot.

Is there something wrong with my table or are there any performance hints available?

Selaka Nanayakkara
  • 3,296
  • 1
  • 22
  • 42
Lars
  • 920
  • 1
  • 14
  • 34
  • Maybe giving a try to turn on/off the virtualization? https://swimlane.gitbook.io/ngx-datatable/api/table/inputs#virtualization By default it is turned on. If you turn it off, you will have worse performance but maybe the flickering will be gone. – Milan Tenk Dec 28 '19 at 13:13
  • Did you ever find a solution to this or the cause? – edjm Aug 20 '20 at 10:53
  • 1
    @Elijah yes and no. Check out here https://stackblitz.com/edit/angular-fixed-table-column Pls note the stackblitz doesn't work yet (sorry, but no time) but you'll find all corresponding code for "table fixed". Give it a try :-) – Lars Aug 20 '20 at 11:17

1 Answers1

2

try setting "OnPush" change detection on your table component:

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
Matt Anders
  • 69
  • 4