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);
});
}
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.