ssuperczynski / ngx-easy-table

The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features and growing!
https://ngx-easy-table.eu
MIT License
371 stars 100 forks source link

cell template not working with rowReorder enabled #304

Closed simfyz closed 4 years ago

simfyz commented 4 years ago

Here is my code. I need to have my first column to show a reorder icon. I did add a custom cellTemplate. But it doesn't work when the rowReorder is set to true. It works when I disable it. I tried with default changeDetection and also onPush as well. It doesn't work with rowReorder.

import {ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {APIDefinition, Columns, Config, DefaultConfig} from 'ngx-easy-table';

@Component({
  selector: 'app-approval-path-list-view',
  templateUrl: './approval-path-list-view.component.html',
  styleUrls: ['./approval-path-list-view.component.scss'],
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class ApprovalPathListViewComponent implements OnInit {
  @ViewChild('table', {static: false}) table: APIDefinition;
  @ViewChild('dragIcon', {static: true}) dragIcon: TemplateRef<any>;

  public configuration: Config;
  public columns: Columns[];
  public data = [
    {code: 'TEST1', name: 'Test 1'},
    {code: 'TEST2', name: 'Test 2'},
    {code: 'TEST3', name: 'Test 3'}
  ];

  ngOnInit(): void {
    this.columns = [
      {key: '', title: '', cellTemplate: this.dragIcon},
      {key: 'code', title: 'Code'},
      {key: 'name', title: 'Name'},
      {key: 'assignedCriteria', title: 'Assigned Criteria'},
      {key: 'filterValues', title: 'Filter Values'}
    ];
    this.configuration = {...DefaultConfig};
    this.configuration.rowReorder = true;
    this.configuration.fixedColumnWidth = false;
    this.configuration.paginationEnabled = false;
    this.configuration.searchEnabled = false;
  }

  eventEmitted($event: { event: string, value: any }): void {
    console.log('$event', $event);
    if ($event.event === 'onRowDrop') {
      console.log('');
      const previousPos = $event.value.previousIndex;
      const currentPos = $event.value.currentIndex;
      this.data.splice(currentPos, 0, this.data.splice(previousPos, 1)[0]);
      console.log(this.data);
    }
  }
}

my template is

<div class="row">
  <div class="col-md-12">
    <ngx-table
      [data]="data"
      [configuration]="configuration" [columns]="columns"
      (event)="eventEmitted($event)"
      #table
    ></ngx-table>
  </div>
</div>
<ng-template #dragIcon let-row let-rowIndex="rowIndex" let-column="column">
  <div>
    <span><i class="fas fa-grip-horizontal"></i></span>
  </div>
</ng-template>
ssuperczynski commented 4 years ago

Fixed in https://github.com/ssuperczynski/ngx-easy-table/releases/tag/13.0.3

simfyz commented 4 years ago

@ssuperczynski Thank you. Confirmed it's working great. ☺️