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

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 2

 this.settings = { columns: { ID: { title: 'ID', type: 'html', valuePrepareFunction: (cell: any, row: any) => { return `<p class="ID"> ${cell} </p>` }, }, }, }

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

U can target ID with last child. In this eg. ID is the last column in table.