How do I show/hide columns in ng2 smart table using checkboxes

Question

I would like to understand how to show/hide the columns using the below code.

TS File -

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Issue } from './issues';
import { CheckboxControlValueAccessor } from '@angular/forms';

@Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
})

export class TableComponent implements OnInit {

    constructor(private tservice: TableService) { }
    characters: Issue[];

    settings = {
        columns: {
            id: {
                title: 'ID',
                editable: false
            },
            description: {
                title: 'Description'
            },
            severity: {
                title: 'Severity',
                editor: {
                    type: 'list',
                    config: {
                        selectText: 'Select',
                        list: [
                            { value: 'Minor', title: 'Minor' },
                            { value: 'Major', title: 'Major' },
                            { value: 'Critical', title: 'Critical' },
                        ],
                    },
                },
            },
            status: {
                title: 'Status',
                editor: {
                    type: 'list',
                    config: {
                        selectText: 'Select',
                        list: [
                            { value: 'Open', title: 'Open' },
                            { value: 'In progress', title: 'In progress' },
                            { value: 'Closed', title: 'Closed' },
                        ],
                    },
                },
            },
            created: {
                title: 'Created'
            },
            resolved: {
                title: 'Resolved'
            },
        }
    };

    ngOnInit() {
        this.tservice.getCharacters().subscribe((data: Issue[]) => {
        this.characters = data;
        });
    }
}

HTML CODE -

<p>Issue Tracker</p>

<ul>
    <li><input type="checkbox" [(ngModel)]=showIssueId/> ID </li>
    <li><input type="checkbox" [(ngModel)]=showDesc/> Description</li>
    <li><input type="checkbox" [(ngModel)]=showSeverity/> Severity</li>
    <li><input type="checkbox" [(ngModel)]=showStatus/> Status</li>
    <li><input type="checkbox" [(ngModel)]=showCreated/> Created</li>
    <li><input type="checkbox" [(ngModel)]=showResolved/> Resolved</li>
</ul>
<button class="updateColumn" title="Update Columns" (click)="updateColumns()">Update Table</button>

<ng2-smart-table [settings]="settings" [source]="characters">
</ng2-smart-table>

Answer 1

 this.settings = {
      columns: {
         id: {
          title: 'id',
          type: 'html',   
           },
         },
       }

:host /deep/ ng2-smart-table > table .id  { 
  display: none;
}
:host /deep/ ng2-smart-table > table td:last-child  { 
  display: none;
}

You can target the ID with the nth-child. In this example, the ID is the last column in the table, so target it with last-child.

Answer 2

A solution is provided by Arno van den Brink, by modifying the ng2-smart-table module to address the exact problem you faced. You can find it here