Hi Piyush , 

Please find these steps.

Step 1: Set up the Angular project
1. Make sure you have Node.js and Angular CLI installed on your system.
2. Create a new Angular project by running the following command in your terminal:
   ng new sortable-datatable
   
3. Navigate to the project directory:
  
   cd sortable-datatable
  

Step 2: Install Bootstrap
1. Install Bootstrap 5 by running the following command:
  
   npm install [email protected]
  
2. Open the "angular.json" file in the root directory of your project.
3. Add the following CSS styles to the "styles" array:
  
   "styles": [
     "src/styles.css",
     "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ]
   

Step 3: Create the data table component
1. Generate a new component by running the following command:
   
   ng generate component datatable
   
2. Open the "datatable.component.ts" file and define the column definitions as an array of objects. Each object should contain the column name and a corresponding property name from the data object.
  
   import { Component, OnInit } from '@angular/core';

   @Component({
     selector: 'app-datatable',
     templateUrl: './datatable.component.html',
     styleUrls: ['./datatable.component.css']
   })
   export class DatatableComponent implements OnInit {
     data: any[] = [
       { name: 'John', age: 25, email: '[email protected]' },
       { name: 'Jane', age: 30, email: '[email protected]' },
       // Add more data objects as needed
     ];

     columns: any[] = [
       { name: 'Name', property: 'name' },
       { name: 'Age', property: 'age' },
       { name: 'Email', property: 'email' }
     ];

     ngOnInit() {
     }
   }
   
3. Open the "datatable.component.html" file and add the following code to display the data table:
   
   

     
       
         
       
     
     
       
         
       
     
   

{{ column.name }}
{{ item[column.property] }}

  

Step 4: Add sorting functionality
1. Open the "datatable.component.ts" file and add the following code to enable sorting:
   
   import { Component, OnInit } from '@angular/core';

   @Component({
     selector: 'app-datatable',
     templateUrl: './datatable.component.html',
     styleUrls: ['./datatable.component.css']
   })
   export class DatatableComponent implements OnInit {
     data: any[] = [
       { name: 'John', age: 25, email: '[email protected]' },
       { name: 'Jane', age: 30, email: '[email protected]' },
       // Add more data objects as needed
     ];

     columns: any[] = [
       { name: 'Name', property: 'name' },
       { name: 'Age', property: 'age' },
       { name: 'Email', property: 'email' }
     ];

     sortedColumn: string | null = null;
     sortDirection: string = 'asc';

     ngOnInit() {
     }

     sortTable(column: string) {
       if (this.sortedColumn === column) {
         this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
       } else {
         this.sortedColumn = column;
         this.sortDirection = 'asc';
       }

       this.data.sort((a, b) => {
         const valueA = a[column];
         const valueB = b[column];

         if (valueA < valueB) {
           return this.sortDirection === 'asc' ? -1 : 1;
         } else if (valueA > valueB) {
           return this.sortDirection === 'asc' ? 1 : -1;
         } else {
           return 0;
         }
       });
     }
   }
  
2. Update the "datatable.component.html" file to include sorting functionality:
   
   

     
       
         
       
     
     
       
         
       
     
   

{{ column.name }}
{{ item[column.property] }}

   

Step 5: Add the DataTable component to the app component
1. Open the "app.component.html" file and replace its content with the following code:
   
   

Step 6: Run the application