How to delete selected column from table?Angular?

Question

I want to create a dynamic table that it can able to add Row & Column that I have done then I want to delete the selected column from the table. Here it is my Stack Blitz Link -- > https://stackblitz.com/edit/delete-selected-column How to deleted the column using checkbox, if I selected 5 checkboxes then 5 columns should be deleted.

HTML FILE

<div class="main-content">
                    <mat-accordion>
                    <!-- Expansion Pannel One Starts Here -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                test
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </mat-panel-title>
                            <mat-panel-description>
                                Test 2
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <!-- Table One Data Starts Here -->
                        <table id="tableOne" class="table-style">
                            <tr>
                                <th *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true">
                                        <mat-checkbox
                                            value="checked"
                                            (click)="delete(checked, $event)"
                                        ></mat-checkbox>
                                    </div>
                                </th>
                            </tr>
                            <tr *ngFor="let column of tableOneRowData">
                                <td *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true"></div>
                                </td>
                            </tr>
                        </table>

                        <!-- Table Two Data Ends Here -->
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addColumnForTableOne()"
                        >
                            Add Column
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addRowForTableOne()"
                        >
                            Add Row
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="warn"
                        >
                            Remove Column
                        </button>
                  
                    </mat-expansion-panel>                                 
                </mat-accordion>

   </div>

TS FILE

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
tableOneColumnData: any = ['1', '1'];
    tableOneRowData: any = ['1', '1'];
 panelOpenState: boolean = false;
 checked :boolean = false;

   addColumnForTableOne() {
        this.tableOneColumnData.push('1');
        console.log(this.tableOneColumnData);
    }
    addRowForTableOne() {
        console.log();
        this.tableOneRowData.push('1');
        console.log(this.tableOneRowData);
    }

    delete(value, $event) {
        this.checked = !value;
        console.log(this.checked);
    }
    ngOnInit() {}
}

I want to create a dynamic table that it can able to add Row & Column that I have done then I want to delete the selected column from the table. Here it is my Stack Blitz Link -- > https://stackblitz.com/edit/delete-selected-column how to deleted the column using checkbox , if i selected 5 checkbox then 5 columns should be deleted.

Kishan · Accepted Answer · 2019-04-16T05:30:12.057

Please check below code : https://stackblitz.com/edit/delete-selected-column-t7ecei?file=app/table-basic-example.html Explanation : We have taken one variable with incremental value with no of columns in table so when user will add column in table, value will be increase by one and it will be stored in tableOneColumnData array. After that when user click on checkbox of table columns we will first check that, if it is checked then we will add that particular indexed number of tableOneColumnData in new array named removeItems for deletion of columns or if checkbox is unchecked then we will remove that number from removeItems array. After that when finally user click on remove columns button we will loop the removeItems array and find index of that number in tableOneColumnData array if it exists then will splice that index from tableOneColumnData array.

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
tableOneColumnData: any = [0,1];
    tableOneRowData: any = ['1', '1'];
 panelOpenState: boolean = false;
 checked :boolean = false;
 last_number : number = 2;
 removeItems : any = [];

   addColumnForTableOne() {
        this.last_number++;
        this.tableOneColumnData.push(this.last_number);
        console.log(this.tableOneColumnData);
    }
    addRowForTableOne() {
        console.log();
        this.tableOneRowData.push('1');
        console.log(this.tableOneRowData);
    }

    delete(event,index) {
      if(event.checked){
        this.removeItems.push(this.tableOneColumnData[index]);
        console.log(index,this.tableOneColumnData[index],this.removeItems);
      }
      else{
        var ind = this.removeItems.indexOf(this.tableOneColumnData[index]);
          if(ind >= 0){
            this.removeItems.splice(ind,1);
          }
      }
      console.log(index,this.tableOneColumnData[index],this.removeItems);
    }

    removeAllCol(){
      if(this.removeItems.length > 0){
        for(var i=0;i<=(this.removeItems.length - 1);i++){
          var ind = this.tableOneColumnData.indexOf((this.removeItems[i]));
          if(ind >= 0){
            this.tableOneColumnData.splice(ind,1);
          }
        }
        this.removeItems = [];
      }
    }
    ngOnInit() {}
}

<div class="main-content">
                    <mat-accordion>
                    <!-- Expansion Pannel One Starts Here -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                test
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </mat-panel-title>
                            <mat-panel-description>
                                Test 2
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <!-- Table One Data Starts Here -->
                        <table id="tableOne" class="table-style">
                            <tr>
                                <th *ngFor="let column of tableOneColumnData;let index = index;">
                                    <div contenteditable="true">
                                        <mat-checkbox
                                            (change)="delete($event,index)"
                                        ></mat-checkbox>
                                    </div>
                                </th>
                            </tr>
                            <tr *ngFor="let column of tableOneRowData">
                                <td *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true"></div>
                                </td>
                            </tr>
                        </table>

                        <!-- Table Two Data Ends Here -->
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addColumnForTableOne()"
                        >
                            Add Column
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addRowForTableOne()"
                        >
                            Add Row
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="warn"
                            (click)="removeAllCol()"
                        >
                            Remove Column
                        </button>
                  
                    </mat-expansion-panel>                                 
                </mat-accordion>

   </div>

could you please explain me For loop logic that how it is working? — , Apr 15 '19 at 10:27
Please check my updated answer with explanation of whole code. I hope it will help you. — Kishan, Apr 16 '19 at 05:30

dannybucks · Answer 2 · 2019-04-12T11:26:49.740

I forked your stackblitz to make that work. In order to have something to bind to mat-checkbox, I used an object. So I extended tableOneColumnData like this:

tableOneColumnData: any[] = [{checked: false, data: '1'}, {checked: false, data: '1'}];

Html:

<th *ngFor="let column of tableOneColumnData; let i = index">
  <div contenteditable="true">
    <mat-checkbox [checked]="column.checked" (click)="markDelete(i, $event)"></mat-checkbox>
  </div>
</th>

.ts:

markDelete(index, $event) {
    this.tableOneColumnData[index].checked = !this.tableOneColumnData[index].checked
    console.log(index);
}

delete() {
  this.tableOneColumnData = this.tableOneColumnData.filter(c => !c.checked);
}

In case you are not happy with me using objects in tableOneColumnData: You can also use a seperate array to store which cols are marked for deletion. Here is how you bulk delete all the elements in that array from tableOneColumnData: remove all elements contained in another array

score 0 · Answer 3 · answered Apr 12 '19 at 11:11

0

You just need to add splice method in your delete method. Try this I hope it'll help you out. Thanks

delete(value, $event) {
 this.checked = !value;     
 this.tableOneColumnData.splice(this.tableOneColumnData[this.tableOneColumnData.length - 1], 1);
}

I just create a working example when you click remove column it'll remove last column from your list.

Working Example: https://stackblitz.com/edit/delete-selected-column-fbcnet

answered Apr 12 '19 at 11:11

Hassan Siddiqui

2,799
1
13
22

Yes, But I want to delete a selected column from the table, not last column from my list. do you have any idea? to delete selected column from table – Apr 12 '19 at 11:18
Ok, let me update my code. I have one question If the user checked multiple checkboxes you want to delete all selected column? Thanks – Hassan Siddiqui Apr 12 '19 at 11:21
no currently User needs to delete only one column at a time – Apr 12 '19 at 11:28
Right now user can checked multiple columns. – Hassan Siddiqui Apr 12 '19 at 11:48

How to delete selected column from table?Angular?

3 Answers3