How to make a table row editable to update the value in Angular?

Question

I'm trying to build an Angular application that takes data from an excel sheet and displays it in a table on upload. I have added an edit link under one column for editing the row data, upon clicking edit it shows save and cancel buttons. I tried to implement this functionality with some components but it didn't work out as I expected. Can someone suggest to me a way to implement this, please?

-> app.component.html


  Upload Excel File
  
      
      
  




  
    
      
          {{column}}
      
    
    
        
            {{row["Employee Name"]}}
        
        
            {{row["Email Id"]}}
        
        
          {{row["UID"]}}
        
        
          {{row["place"]}}
        
        
          {{row["DOB"]}}
        
        
          

          
          
          Edit

-> app.component.ts

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'excelUpload';
  buffer: any;
  file: File;
  worksheet: any;
  excelData: any[];
  excelDatas: any[];
  tableData: any[];
  uploadFile(event) {
    this.file = event.target.files[0];
  }
  private dataLoaded: boolean;
  submitted: boolean = false;
  tableHeaders = ["Employee Name", "Email Id", "place", "UID", "DOB", "Actions"]; 
  tableRows = [];
  enableEdit: boolean = false;
  enableEditIndex = null;

  upload() {
    this.submitted = true;
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      this.buffer = fileReader.result;
      var data = new Uint8Array(this.buffer);
      var arr = new Array();
      for (var i = 0; i != data.length; ++i) {
        arr[i] = String.fromCharCode(data[i]);
      }
      var bstr = arr.join("");
      var workbook = XLSX.read(bstr, { type: "binary" });
      var first_sheet_name = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[first_sheet_name]; // worksheet_name
      this.excelData = XLSX.utils.sheet_to_json(worksheet, { raw: true })
      this.excelDatas = this.excelData.map(data => Object.values(data));
      console.log(this.excelData);
      // console.log(this.excelData[0]["Email Id"]);
      // var newArr = this.excelData.map((data, index) => {
      //   console.log(data)
      // })
    }
    fileReader.readAsArrayBuffer(this.file);
  }

  editRowData(e, i) {
    this.enableEdit = true;
    this.enableEditIndex = i;
  }

  saveSegment(){}
}

Akhil Suseelan · Accepted Answer

I was able to fix my issue with NG-ZORRO components. NG-ZORRO table components have an Editable Cells component with which I was able to edit each row inside the tables.

Reference: Click here for reference

=> app.component.ts

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'edit-table';
  i = 0;
  editId: string | null = null;
  listOfData: any;
  file: File;
  buffer: any;
  worksheet: any;
  excelData: any[];
  tableData: any;
  uploadFile(event) {
    this.file = event.target.files[0];
  }
  submitted: boolean = false;
  
  // function to read data from excel
  upload() {
    this.submitted = true;
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      this.buffer = fileReader.result;
      var data = new Uint8Array(this.buffer);
      var arr = new Array();
      for (var i = 0; i != data.length; ++i) {
        arr[i] = String.fromCharCode(data[i]);
      }
      var bstr = arr.join("");
      var workbook = XLSX.read(bstr, { type: "binary" });
      var first_sheet_name = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[first_sheet_name]; // worksheet_name
      this.excelData = XLSX.utils.sheet_to_json(worksheet, { raw: true })
      // this.tableData = this.excelData.map(data => Object.values(data)); 
    }
    fileReader.readAsArrayBuffer(this.file);
  }

  startEdit(id: string): void {
    this.editId = id;
  }

  stopEdit(): void {
    this.editId = null;
  }

  addRow(): void {
    this.tableData = [   
    ];
    this.i++;
  }

  deleteRow(id: string): void {
    this.tableData = this.tableData.filter(d => d.id !== id);
  }
}

=> app.component.html


  Upload Excel File
  
      
      
  

    

    

    
      
        
          Employee Name
          Email Id
          UID
          place
          DOB
        
      
      
        

          
            
              {{ data['Employee Name'] }}
            
            
          
          
            
              {{ data['Email Id']}}
            
            
          
          
            
              {{ data['UID']}}
            
            
          
          
            
              {{ data['Place'] }}
            
            
          
          
            
              {{ data['DOB'] }}

How to make a table row editable to update the value in Angular?

Answers (1)

Related Questions