0

I'm am trying to import excel sheet and display it in tabular format, i mean i wants to dynamic creation of table as per the excel sheet uploaded in angular. for example, on uploading sheet i get the data in the form of array,

0:{
Name: "Ram"
Grade: "A"
Roll No: "10001"
Address: "ABC"
Sr No: 1
}
1:
{
Name: "Sam"
Grade: "B"
Roll No: "10002"
Address: "xyz"
Sr No: 2
}

On uploading i get the above data. but how can i forms table dynamically with these header. if i upload different excel with some data with different fields will set accordingly. i know upload functionality. please help me in table formation.

James Z
  • 12,209
  • 10
  • 24
  • 44
anjali
  • 25
  • 1
  • 8
  • Refer : https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor – MdAshiff Jun 18 '20 at 05:35
  • Please, try using basic grammar rules when writing, so the post is easier to read, like using uppercase after a dots. – Pizzicato Jun 18 '20 at 07:44

2 Answers2

0

Use angular-material table. Generate the column array for the table by pushing all the keys of a single row into it. i.e

my-component.component.ts

    import { Component, OnInit } from '@angular/core';
    import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
        
     @Component({
        selector: 'blank',
        templateUrl: './blank.component.html',
        styleUrls: ['./blank.component.scss']
      })
     export class MyComponent implements OnInit {
        yourColumns: string[] = [];
        data: any[] = data_array_from_your_file;
        dataSource: any = new MatTableDataSource(this.data);
        
        constructor() { 
         for(let i=0; i < this.data.length; i++) {
           let row = this.data[i];
           for(let key of Object.keys(row)) {
            this.yourColumns.push(key);
           }
           break; //one row is enough to be used as a reference assuming the dataset is uniform
        }
        
         ngOnInit() {
         }
        
     }

my-component.component.html

<div>
            <table [dataSource]="dataSource" mat-table matSort>

              <!-- Column -->
              <ng-container *ngFor="let tColumn of yourColumns" matColumnDef="{{tColumn}}">
                <th *matHeaderCellDef mat-header-cell mat-sort-header> {{tColumn}}</th>
                <td *matCellDef="let row" mat-cell> {{row[tColumn] }} </td>
              </ng-container>

              <tr *matHeaderRowDef="yourColumns" mat-header-row></tr>
              <tr *matRowDef="let row; columns: yourColumns;" mat-row>
              </tr>
            </table>
          </div>
Community
  • 1
  • 1
elonaire
  • 1,846
  • 1
  • 11
  • 17
  • hi.. elonaire, the header part is working fine but i cannot get the rows data in table. thank you – anjali Jun 18 '20 at 06:52
  • 1
    Thanks elonair.. this was working fine.. i had made small changes in html file replace {{row?.tColumn }} with {{row[tColumn] }} this and worked for me . thanks alot :) – anjali Jun 18 '20 at 09:25
  • @anjali lol you're right. I forgot it was a variable and not a property. – elonaire Jun 18 '20 at 09:51
0

Try this simple method..

.ts

tableObj = [{
      Name: "Ram",
      Grade: "A",
      RollNo: "10001",
      Address: "ABC",
      SrNo: 1
      },{
      Name: "Sam",
      Grade: "B",
      RollNo: "10002",
      Address: "xyz",
      SrNo: 2
      }];

headers = [];

ngOnInit() {
    this.tableObj.map((item) => {
       this.headers = Object.keys(item);
    })
 }

getData(item) {
  return Object.keys(item);
}

.html

 <table border="1">
      <tr>
         <th *ngFor="let header of headers"> {{header}} </th>
      </tr>
      <tr *ngFor="let item of tableObj">
         <td *ngFor="let data of getData(item)"> {{item[data]}} </td>
      </tr>
 </table>
aks44
  • 422
  • 3
  • 12