Inverting the rows and columns in EJ2 Angular grid - Branched from 161011
Hi Calculei Calculei,
Greetings from Syncfusion support.
After analyzing your request, it was determined that there is a need to transpose the rows and columns of the Syncfusion Grid. Please note that the default functionality of the Grid does not include support for transposing rows and columns. However, a customized sample has been created to meet your specific requirements.
In this sample, the data is looped over and displayed in a transposed format in the Grid by hiding the Grid headers. It is important to mention that this customization is solely for display purposes, as data actions cannot be performed using this architecture. For further details, please refer to the provided sample, code example, and documentation.
|
App.component.html <ejs-grid [dataSource]="transposedData" [allowSelection]="false" [enableHover]="false" cssClass="hide-header"> <e-columns> <e-column *ngFor="let col of columns"> <ng-template #template let-data> <span>{{ data[col] }}</span> </ng-template> </e-column> </e-columns> </ejs-grid>
App.component.ts
export class AppComponent { public columns: string[] = []; public transposedData: any[] = [];
ngOnInit(): void { const data = this.getOrdersDetails(); const transposedTable = this.transposeDataTable(data); this.columns = Object.keys(transposedTable[0]); this.transposedData = transposedTable; }
getOrdersDetails() { return [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 }, ]; }
transposeDataTable(data: any[]) { const output: any[] = []; const keys = Object.keys(data[0]); keys.forEach((key, colIndex) => { const row: any = { [keys[0]]: key }; data.forEach((item, rowIndex) => { row[`Col${rowIndex + 1}`] = item[key]; }); output.push(row); }); return output; } }
|
Screenshot:
If you need any further assistance or have additional questions, please feel free to contact us.
Regards
Aishwarya R
