What is grid in Angular - amresh087/newronaRepos GitHub Wiki

A data grid (or data table) is a component that displays data in a tabular format. It typically includes features like sorting, filtering, pagination, and editing. In Angular, you can create a data grid using various approaches and libraries.

Implementing a Data Grid with Angular Material Table

Angular Material is a UI component library for Angular applications that follows Material Design principles. It includes a powerful and flexible table component (MatTableModule).

Steps to Implement a Data Grid using Angular Material

Install Angular Material:

    ng add @angular/material

Import MatTableModule:

   import { MatTableModule } from '@angular/material/table';

  @NgModule({
    imports: [
      // other imports
      MatTableModule
    ],
    // other properties
  })
  export class AppModule { }

Define the Data and Columns in the Component:

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

   export interface PeriodicElement {
     name: string;
     position: number;
     weight: number;
     symbol: string;
   }

   const ELEMENT_DATA: PeriodicElement[] = [
     { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
     { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
     // more data
   ];

   @Component({
     selector: 'app-table',
     templateUrl: './table.component.html',
     styleUrls: ['./table.component.css']
   })
   export class TableComponent {
     displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);
   }

Create the HTML Template:

   <!-- table.component.html -->
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

     <!-- Position Column -->
     <ng-container matColumnDef="position">
       <th mat-header-cell *matHeaderCellDef> No. </th>
       <td mat-cell *matCellDef="let element"> {{element.position}} </td>
     </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef> Name </th>
       <td mat-cell *matCellDef="let element"> {{element.name}} </td>
     </ng-container>

     <!-- Weight Column -->
     <ng-container matColumnDef="weight">
       <th mat-header-cell *matHeaderCellDef> Weight </th>
       <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
     </ng-container>

     <!-- Symbol Column -->
     <ng-container matColumnDef="symbol">
       <th mat-header-cell *matHeaderCellDef> Symbol </th>
       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>

Implementing a Data Grid with ag-Grid

ag-Grid is a feature-rich data grid that provides advanced features like sorting, filtering, pagination, and editing.

Steps to Implement a Data Grid using ag-Grid

Install ag-Grid:

   npm install ag-grid-angular ag-grid-community

Import AgGridModule:

   import { AgGridModule } from 'ag-grid-angular';

   @NgModule({
     imports: [
       // other imports
       AgGridModule.withComponents([])
     ],
     // other properties
   })
   export class AppModule { }