swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Using [selected] property trigger re-rendering and animation #862

Open jamalx31 opened 7 years ago

jamalx31 commented 7 years ago

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior 1- Make table selectable with custom checkboxes (ng2-material) and add [selected]="selected" 2- Add column with ng2-material toggle 3- clicking any of the checkboxes will rerender the whole table and the toggle buttons will re-animate

<ngx-datatable
  #table
  *ngIf="filteredAssets"
  class="material expandable"
  [rows]="filteredAssets"
  [columnMode]="'flex'"
  [headerHeight]="40"
  [footerHeight]="40"
  [rowHeight]="'auto'"
  [selected]="selected"
  [selectionType]="(selectable) ? 'checkbox' : ''"
  [limit]="50"
  [selectionType]="(selectable) ? 'multi' : ''"
  (activate)="onActivate($event)"
  >
  <ngx-datatable-column
    *ngIf="selectable"
    [width]="30"
    [flexGrow]="1"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <md-checkbox [ngModel]="selected.indexOf(row) !== -1" (change)="toggleSelection(row)"></md-checkbox>
    </ng-template>
  </ngx-datatable-column>

Expected behavior clicking the checkbox should not trigger rendering

Reproduction of the problem

What is the motivation / use case for changing the behavior? 1- performance 2- using toggles (with animation) in other columns of the data table

Please tell us about your environment: Angular cli, macOS

amcdnl commented 7 years ago

Its because we watch rows and since thats a property on the row it calls render. :S

I'll look into this, we have a lot of re-rendering going on.