Angular 5 + ng2-smart-table: Hide/disable actions column conditionally

Question

I have a table built by ng2-smart-table, data in the table has two states as Draft and Ready. When data.status = 'Draft', it's possible to show actions column for CRUD purpose, but then the state changes to data.status = 'Ready', I want to disabled the actions column. How to do this conditionally?

table setting:

  tableSettings = {
    add: {
      addButtonContent: '<i class="fas fa-plus fa-fw"></i>',
      createButtonContent: '<i class="fas fa-plus fa-fw"></i>',
      cancelButtonContent: '<i class="fas fa-times fa-fw"></i>',
      confirmCreate: true
    },
    edit: {
      editButtonContent: '<i class="fas fa-pencil-alt fa-fw"></i>',
      saveButtonContent: '<i class="fas fa-check fa-fw"></i>',
      cancelButtonContent: '<i class="fas fa-times fa-fw"></i>',
      confirmSave: true
    },
    delete: {
      deleteButtonContent: '<i class="far fa-trash-alt fa-fw"></i>',
      confirmDelete: true
    },

    columns: {
      title: {
        title: 'Title',
        type: 'text',
        filter: false,
      },
      description: {
        title: 'description',
        type: 'text',
        filter: false,
      }
    }
  };

ngOnInit() {
  this.apiService.getData.subscribe((res: any) => {
    this.data = res;
    console.log(this.data.status);
  });
}

Wiatt

Answer 1

I will customization by myself.

settings = {
    columns: {
        name: {
            title: 'Name',
            filter: true
        }
    },
    mode: 'external',
    actions: {
        delete: false,
        add: false,
        position: 'right'
    },
    rowClassFunction: (row) => {
        var curUserId = localStorage.getItem('user_id');
        if(row.data.createdBy == parseInt(curUserId)){
            return '';
        } else {
            return 'hide-action';
        }
    },
    edit: {
        editButtonContent: '<i class="ti-pencil text-info m-r-10"></i>'
    }
};
source = new LocalDataSource([{name:'Jai', createdBy:12}, {name:'Jack', createdBy:63}])

add your css file

.hide-action td.ng2-smart-actions a {
    display: none;
}

My requirement is use edit authorized user.

Groggy

@Hoàng Nguyễn It's useful for your requirement.?? If any other solution you have plz share with me. – Groggy

Answer 2

maybe a bit late, but in your settings set "actions: false" and this, you can do dynamic with a variable

Goddamn

By your way it will remove action for all rows but he need to do that in some rows not all. He needs to do based on condition not globally. – Sitnik

Answer 3

Follow my approach: First I created a custom action component:

[...]
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';


@Component({
  selector: 'ngx-custom-actions',
  template: `
  <div class="btn-group btn-group-sm" role="group">
  <button (click)="doEdit()"
          nbButton
          outline
          status="info"
          size="small"
          [disabled]="!isEditable"
          class="mr-2">
    Editar
  </button>
  <button (click)="doDelete()"
          nbButton
          outline
          status="danger"
          [disabled]="!isEditable"
          size="small">
    Excluir
  </button>
</div>
  `,
})
export class CustomActionsComponent implements ViewCell, OnInit {

  isEditable: boolean;

  @Input() value: string | number;
  @Input() rowData: any;

  @Output() edit: EventEmitter<any> = new EventEmitter();
  @Output() delete: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
    this.isEditable = this.value === 'Draft';
  }

  doEdit() {
    this.edit.emit(this.rowData);
  }
  doDelete() {
    this.delete.emit(this.rowData);
  }

}

Register at module and register at entryComponents!

@NgModule({
  declarations: [FormsEngineListComponent, CustomActionsComponent],
  imports: [
    // others imports
    Ng2SmartTableModule,
  ],
  entryComponents: [
    CustomActionsComponent,
  ],
})
export class FormsEngineModule { }

Use your configuration on your ng2-smart-table

list.component.ts

settings = {
  actions: false,
  hideSubHeader: true,
  columns: {
    id: {
      title: 'ID',
      type: 'number',
    },
    actions: {
      title: 'Ações',
      type: 'custom',
      renderComponent: CustomActionsComponent,
      onComponentInitFunction(instance) {
        instance.edit.subscribe(row => {
          console.log('edit', row);
        });
        instance.delete.subscribe(row => {
          console.log('delete', row);
        });
      },
    }
  },
};

demoData = [
  {id: '122323', actions: 'Draft'},
  {id: '2342342', actions: 'Ready'},
];

ngOnInit() {
  this.source.load(this.demoData);
}

Collected

Answer 4

Very Useful tips for hidding edit and delete icons (ngx-smart-table) Add this to your component css

:host /deep/ ng2-smart-table table > tbody > tr.hide-action > td > ng2-st-tbody-edit-delete {
  display:none;
  visibility: hidden;
}

Associate