Categories

Tuesday, July 16, 2024
#919814419350 therichposts@gmail.com
AngularAngular 18DatatableMaterialAngular

Angular 18 Datatable with Export Buttons working demo

Angular 18 Datatable with Export Buttons working demo

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 18 Datatable with Export Buttons working demo.

Live Demo

Guy’s Angular 18 came and if you are new in Angular 18 then please check below links:

  1. Angular 18 Tutorials
  2. Angular Free Templates

To implement a data table with export buttons in Angular 18, you can use the Angular Material library along with a library like ngx-datatable or mat-table-exporter for export functionality. Below is a step-by-step guide to setting this up:

First, install Angular Material and Mat-Table-Exporter:

ng add @angular/material
npm install mat-table-exporter --force

Update your app.component.html to include the table and export buttons:

<div class="mat-elevation-z8">
  <div class="buttons">
    <button mat-raised-button (click)="exporter.exportTable('csv')" color="primary">Export as CSV</button>
    <button mat-raised-button (click)="exporter.exportTable('xlsx')" color="accent">Export as XLSX</button>
    
  </div>
  <table mat-table [dataSource]="dataSource" matTableExporter #exporter="matTableExporter">

    <!-- Define columns -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

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

    <!-- Header and Row Declarations -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  
</div>

Update your app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTableExporterModule } from 'mat-table-exporter';
import { MatTableDataSource } from '@angular/material/table';
export interface PeriodicElement {
  id: number;
  name: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { id: 1, name: 'Hydrogen' },
  { id: 2, name: 'Helium' },
  { id: 3, name: 'Helium' },
  { id: 4, name: 'Hydrogen' },
  // Add more data as needed
];
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MatTableModule, MatButtonModule, MatIconModule, MatTableExporterModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular18';
  displayedColumns: string[] = ['id', 'name'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
}

Step 4: Styling the Component

You can add some basic styles to app.component.css:

table {
  width: 100%;
}

.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
ng serve

This setup will give you a basic data table with export buttons for Excel and CSV. Make sure to replace the URL in the ngOnInit method with your actual data source.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch the above video.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thank you.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.