Sortable Grid with dynamic column using angular and Bootstrap 5

Question

How to create a sortable datatable (Grid) with dynamic column definitions using angular and Bootstrap 5

Praveen Mishra · Answer

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 bootstrap@5.0.0 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: 'john@example.com' }, { name: 'Jane', age: 30, email: 'jane@example.com' }, // 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: 'john@example.com' }, { name: 'Jane', age: 30, email: 'jane@example.com' }, // 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 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: Sortable DataTable Step 6: Run the application

Sortable Grid with dynamic column using angular and Bootstrap 5

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)