在表格中实现列切换

Question

I am working on angular app. In that I am using primeng table with column toggle feature. My code is as follows

HTML -

<p-table [columns]="selectedColumns" [value]="products">
    <ng-template pTemplate="caption">
        <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
            selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}" placeholder="Choose Columns"></p-multiSelect>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th>Code</th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product let-columns="columns">
        <tr>
            <td>{{product.code}}</td>
            <td *ngFor="let col of columns">
                {{product[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Component -

import { Component, OnInit, Input } from '@angular/core';
import { Product } from './product';
import { ProductService } from './productservice';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent { 
        products: Product[];
        
        cols: any[];
    
        _selectedColumns: any[];
    
        constructor(private productService: ProductService) { }
    
        ngOnInit() {
            this.productService.getProductsSmall().then(data => this.products = data);
    
            this.cols = [
                { field: 'name', header: 'Name' },
                { field: 'category', header: 'Category' },
                { field: 'quantity', header: 'Quantity' }
            ];
    
            this._selectedColumns = this.cols;
        }
    
        @Input() get selectedColumns(): any[] {
            return this._selectedColumns;
        }
    
        set selectedColumns(val: any[]) {
            //restore original order
            this._selectedColumns = this.cols.filter(col => val.includes(col));
        }
    }

Stackblitz -

https://stackblitz.com/edit/primeng-tablecoltoggle-demo?file=src%2Fapp%2Fapp.component.ts

Code is working fine but I want reverse functionality in col toggle. By default columns are coming as ticked in drop down and if user want to remove any column he can uncheck it. I want to implement exactly reverse, that is by default all columns in dropdown should come as uncheck and if user wish to see data of any column he can tick the column in dropdown and can see the column with data. how can I do that?

Answer 1

Just set the selected columns as an empty array to start out with.

   ngOnInit() {
            this.productService.getProductsSmall().then(data => this.products = data);
    
            this.cols = [
                { field: 'name', header: 'Name' },
                { field: 'category', header: 'Category' },
                { field: 'quantity', header: 'Quantity' }
            ];
    
            this._selectedColumns = []; // just leave an empty array from the start
        }