Angular Table Component

This Angular table component displays a list of events with sortable columns. This documentation will guide you through the setup and implementation of the table.

Table Structure

The following is the basic HTML structure for the table:

<table>
  <tbody>
    <tr>
      <th *ngFor="let col of columnDefs">
        <div (click)="onSortChange(col)">
           <span *ngIf="col.sortable">
        </div>
      </th>
    </tr>
    <ng-container *ngIf="displayedData.length > 0">
      <ng-container *ngFor="let event of displayedData; let i = index">
        <tr>
          <td>
          //all field
          </td>
        </tr>
      </ng-container>
    </ng-container>
  </tbody>
</table>

TypeScript Logic

Define your column definitions and table logic in the TypeScript file:

// src/app/index.component.ts
import { Component } from '@angular/core';
import { ColDefs } from './col-defs.model'; // Import your ColDefs interface

@Component({
    selector: 'app-index',
    templateUrl: './index.component.html',
})
export class IndexComponent {
    displayedData: EventDetails[] = [];
    hasHeaderCheckbox = this.columnDefs.some((col) => col.headerCheckbox);
    constructor(public domiex: DomixTableService, private modalService: ModalService) {
        // Additional constructor logic here
    }

    columnDefs: ColDefs[] = [
        { field: 'Name', headerName: 'Name', sortable: true, sortDiraction: 'asc', headerCheckbox: true },
        //all field
        { headerName: 'Action', sortable: false },
    ];
}

Column Definitions

Define your table's columns using the columnDefs array. Each object represents a column with properties such as field, headerName, sortable, and sortDiraction.

Sorting Logic

Implement the sorting logic in the onSortChange method to handle the click events on the table headers. This will allow users to sort the table by each column.

Styling the Table

You can apply custom styles to the table and its elements via CSS. Ensure that you include any necessary classes in your component template to match your design requirements.

This setup demonstrates how to create a sortable table in an Angular application. You can customize the table further based on your application needs.