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
</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.