How can i show Enable/disable with colors in my smart table

Question

i want to show enabled/disabled in my status column based on boolean value from the api, do i have to make a separate component or i can do it with the smart table

export let settings = {
    columns: {

        FirstName: {
            title: 'First Name',
            filter: true
        },
        LastName: {
            title: 'Last Name',
            filter: true
        },
        Title: {
            title: 'Title',
            filter: true
        },
        No_longer_with_company__c: {
            title: 'Status',
        }
    },
    edit: {
        editButtonContent: '<i class="ti-pencil text-info m-r-10"></i>',
        saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
        cancelButtonContent: '<i class="ti-close text-danger"></i>'
    },
    delete: {
        deleteButtonContent: '<i class="ti-trash text-danger m-r-10"></i>',
        saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
        cancelButtonContent: '<i class="ti-close text-danger"></i>'
    }
};

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Filterable Table</h4>
        <h6 class="card-subtitle">Smart data table library with sorting, filtering, pagination & add/edit/delete
            functions.</h6>
        <div class="table table-responsive smart-table">
            <ng2-smart-table [settings]="settings" [source]="source" class=""></ng2-smart-table>
        </div>
    </div>
</div>

Answer 1

Use [ngClass] on your smart table. This will allow you to run conditional statements and select which CSS class or id you want to apply based on the condition.

For Example:

<div class="table table-responsive smart-table" [ngClass]="{'first': true, 'second': true, 'third': false}">
            <ng2-smart-table [settings]="settings" [source]="source" ></ng2-smart-table>
</div>

See more here: https://angular.io/api/common/NgClass