How to add animation to rows in ngx-datatable?

Question

I want to display the rows of my data table (ngx) in a stacked fashion: one row following the other.

I want to add [@datatableAnimation]. but I dont know where add that. When I add it to <ngx-datatable [@datatableAnimation]> it only applies to the header and footer

<ngx-datatable
        #table
        [rows]="rows" 
        [columns]="columns" 
        class="bootstrap"
        [columnMode]="ColumnMode.force" 
        [footerHeight]="50" 
        rowHeight="auto"
        [count]="totalItems"
        [externalPaging]="true"
        [externalSorting]="true"
        [limit]="nbItemPerPage"
        [messages]="{emptyMessage: emptyMessage}"
        [sorts]="[{prop: 'SendAt', dir: 'desc'}]"
        (sort)="onSort($event)"
        > 
            <ngx-datatable-column name="Date" prop="SendAt" [maxWidth]="200">
                <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row.SendAt }}
                </ng-template>
            </ngx-datatable-column>
//...

Thank's

I've searched the documentation, but can't find a section on this subject.

Answer 1

You need to use Angular's animation functionality. You can define a trigger for your animation in your component's TypeScript file and then apply that trigger to your ngx-datatable in the HTML file.

Define the animation in your component's TypeScript file.

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('datatableAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
      ]),
    ]),
  ],
})

Apply the animation to the ngx-datatable-row elements.

<ngx-datatable
  #table
  [rows]="rows"
  [columns]="columns"
  class="bootstrap"
  [columnMode]="ColumnMode.force"
  [footerHeight]="50"
  rowHeight="auto"
  [count]="totalItems"
  [externalPaging]="true"
  [externalSorting]="true"
  [limit]="nbItemPerPage"
  [messages]="{emptyMessage: emptyMessage}"
  [sorts]="[{prop: 'SendAt', dir: 'desc'}]"
  (sort)="onSort($event)"
>
  <ngx-datatable-column name="Date" prop="SendAt" [maxWidth]="200">
    <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.SendAt }}
    </ng-template>
  </ngx-datatable-column>
  <!-- Apply animation to ngx-datatable-row -->
  <ngx-datatable-row *ngx-datatable-row="let row; columns: columns;" [@datatableAnimation]></ngx-datatable-row>
</ngx-datatable>