<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Country</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alexander</td>
<td>Orton</td>
<td>@mdorton</td>
<td>Admin</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">2</th>
<td>John Deo</td>
<td>Deo</td>
<td>@johndeo</td>
<td>User</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Randy Orton</td>
<td>the Bird</td>
<td>@twitter</td>
<td>admin</td>
<td>UK</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Randy Mark</td>
<td>Ottandy</td>
<td>@mdothe</td>
<td>user</td>
<td>AUS</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Ram Jacob</td>
<td>Thornton</td>
<td>@twitter</td>
<td>admin</td>
<td>IND</td>
</tr>
</tbody>
</table>
</div>

<table class="table table-lg">
 <thead>
     <tr>
         <th scope="col">Id</th>
         <th scope="col">Employee Name</th>
         <th scope="col">Date</th>
         <th scope="col">Status</th>
         <th scope="col">Hours</th>
         <th scope="col">Performance</th>
     </tr>
 </thead>
 <tbody>
     @for( table of sizingData; track table){
     <tr>
         <th scope="row">{{table.id}}</th>
         <td>{{table.name}}</td>
         <td>{{table.date}}</td>
         <td class="font-{{table.class}}">{{table.text}}</td>
         <td>{{table.performance}}</td>
         <td>{{table.hours}}</td>
     </tr>
     }
 </tbody>
</table>

// ts file
import { Component } from '@angular/core';
import { sizingTable } from '../../../../../shared/data/table/bootstrap-table/basic-tables';

@Component({
    selector: 'app-sizing-tables',
    templateUrl: './sizing-tables.html',
    styleUrls: ['./sizing-tables.scss'],
    import:[]
})
export class SizingTables {

  public sizingData = sizingTable;

}

// data file
export const sizingTable = [
    {
        id: 1,
        name: 'Mark Jecno',
        date: '22/08/2025',
        class: 'danger',
        text: 'on leave',
        hours: 0,
        performance: '29/30'
    },
    {
        id: 2,
        name: 'Elana Robbert',
        date: '21/08/2025',
        class: 'success',
        text: 'Present',
        hours: 10,
        performance: '30/30'
    },
    {
        id: 3,
        name: 'John Deo',
        date: '18/08/2025',
        class: 'danger',
        text: 'on leave',
        hours: 8,
        performance: '28/30'
    },
]

<div class="card">
    <div class="card-body">
        <form class="table-responsive custom-scrollbar">
            <div class="mb-3 row">
                <label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
                <div class="col-xs-3 col-sm-auto">
                    <input id="table-complete-search" type="text" class="form-control" name="searchTerm"
                        [(ngModel)]="service.searchTerm" autocomplete="off" />
                </div>
                @if(service.loading$ | async){
                    <span class="col col-form-label">Loading...</span>
                }
            </div>
            <table class="table table-striped data-striped">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
                        <th scope="col" sortable="position" (sort)="onSort($event)">Position</th>
                        <th scope="col" sortable="salary" (sort)="onSort($event)">Salary</th>
                        <th scope="col" sortable="office" (sort)="onSort($event)">Office</th>
                        <th scope="col" sortable="extn" (sort)="onSort($event)">Extn</th>
                        <th scope="col" sortable="email" (sort)="onSort($event)">Email</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @for(data of tableData$ | async; track data){
                    <tr>
                        <th scope="row">{{data.id}}</th>
                        <td>
                            <ngb-highlight [result]="data.name" [term]="service.searchTerm"></ngb-highlight>
                        </td>
                        <td>
                            <ngb-highlight [result]="data.position" [term]="service.searchTerm"></ngb-highlight>
                        </td>
                        <td>
                            <ngb-highlight [result]="data.salary | number" [term]="service.searchTerm"></ngb-highlight>
                        </td>
                        <td>
                            <ngb-highlight [result]="data.office" [term]="service.searchTerm"></ngb-highlight>
                        </td>
                        <td>
                            <ngb-highlight [result]="data.extn | number" [term]="service.searchTerm"></ngb-highlight>
                        </td>

                        <td>
                            <ngb-highlight [result]="data.email" [term]="service.searchTerm"></ngb-highlight>
                        </td>
                        <td>
                            <ul class="action">
                                <i class="fa fa-eye font-primary pe-2"></i>
                                <i class="icofont icofont-close-circled font-danger ps-2"
                                    (click)=" removeItem(data.id)"></i>
                            </ul>
                        </td>
                    </tr>
                }
                @if(!Data.length){
                    <tr class="odd">
                        <td colspan="8" class="dataTables_empty" style="text-align: center;">No records found</td>
                    </tr>
                }
                </tbody>
            </table>
            <div class="d-flex justify-content-between p-2">
                <select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
                    <option [ngValue]="2">2 items per page</option>
                    <option [ngValue]="4">4 items per page</option>
                    <option [ngValue]="6">6 items per page</option>
                    <option [ngValue]="10">10 items per page</option>
                </select>
            </div>
        </form>
        <ngb-pagination class="ms-3" [collectionSize]="( total$ | async)!" [(page)]="service.page"
            [pageSize]="service.pageSize" class="pagination-primary d-flex justify-content-end p-2">
        </ngb-pagination>
    </div>
</div>

import { AsyncPipe, CommonModule, DecimalPipe } from '@angular/common';
import { Component, QueryList, ViewChildren } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbHighlight, NgbPagination } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import { NgbdSortableHeader, SortEvent } from '../../../shared/directives/sortable.directive';
import { supportDB } from '../../../shared/interface/support';
import { TableService } from '../../../shared/services/table.service';
import { CommonOutline } from '../../../shared/data/buttons/button-group';

@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.html',
    styleUrls: ['./data-table.scss'],
    providers: [TableService, DecimalPipe],
    imports: [
        FormsModule,
        CommonModule,
        NgbdSortableHeader,
        NgbHighlight,
        NgbPagination,
        AsyncPipe,
        
    ],

})
export class DataTable {

  public tableData$: Observable;
  public  Data: supportDB[];
  public total$: Observable;

  @ViewChildren(NgbdSortableHeader) headers: QueryList;

  constructor(public service: TableService) {
    this.tableData$ = service.supportdata$;
    this.total$ = service.total$;
  }


  ngOnInit() {
    this.tableData$.subscribe((res) => {
      this.Data = res;
    });
  }

  onSort({ column, direction }: SortEvent) {
    this.headers.forEach((header) => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }

  removeItem(id: number) {
    this.tableData$.subscribe((data: supportDB[]) => {
      data.map((elem: supportDB, i: number) => { elem.id == id && data.splice(i, 1) })
    })
  }

}

import { Injectable, PipeTransform } from '@angular/core';
import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
import { supportDB } from '../interface/support';
import { supportData } from '../data/table/data-table/SupportTdb';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortColumn, SortDirection } from '../directives/sortable.directive';

interface SearchResult {
  Details: supportDB[];
  total: number;
}

interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}

const compare = (v1: string | number, v2: string | number) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);

function sort(countries: supportDB[], column: SortColumn, direction: string): supportDB[] {
  if (direction === '' || column === '') {
    return countries;
  } else {
    return [...countries].sort((a, b) => {
      const res = compare(a[column], b[column]);
      return direction === 'asc' ? res : -res;
    });
  }
}

function matches(support: supportDB, term: string, pipe: PipeTransform) {
  return (
    support.name.toLowerCase().includes(term.toLowerCase()) ||
    support.position.toLowerCase().includes(term.toLowerCase()) ||
    pipe.transform(support.salary).includes(term) ||
    support.office.toLowerCase().includes(term.toLowerCase()) ||
    pipe.transform(support.extn).includes(term) ||
    support.email.toLowerCase().includes(term.toLowerCase())
  );
}

@Injectable({ providedIn: 'root' })

export class TableService {
  private _loading$ = new BehaviorSubject(true);
  private _search$ = new Subject();
  private _data$ = new BehaviorSubject([]);
  private _total$ = new BehaviorSubject(0);

  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: '',
  };

  constructor(private pipe: DecimalPipe) {
    this._search$
      .pipe(
        tap(() => this._loading$.next(true)),
        debounceTime(200),
        switchMap(() => this._search()),
        delay(200),
        tap(() => this._loading$.next(false)),
      )
      .subscribe((result) => {
        this._data$.next(result.Details);
        this._total$.next(result.total);
      });

    this._search$.next();
  }


  get supportdata$() {
    return this._data$.asObservable();
  }
  get total$() {
    return this._total$.asObservable();
  }
  get loading$() {
    return this._loading$.asObservable();
  }
  get page() {
    return this._state.page;
  }
  get pageSize() {
    return this._state.pageSize;
  }
  get searchTerm() {
    return this._state.searchTerm;
  }

  set page(page: number) {
    this._set({ page });
  }
  set pageSize(pageSize: number) {
    this._set({ pageSize });
  }
  set searchTerm(searchTerm: string) {
    this._set({ searchTerm });
  }
  set sortColumn(sortColumn: SortColumn) {
    this._set({ sortColumn });
  }
  set sortDirection(sortDirection: SortDirection) {
    this._set({ sortDirection });
  }

  private _set(patch: Partial) {
    Object.assign(this._state, patch);
    this._search$.next();
  }

  private _search(): Observable {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;

    // 1. sort
    let Details = sort(supportData, sortColumn, sortDirection);

    // 2. filter
    Details = Details.filter((support) => matches(support, searchTerm, this.pipe));
    const total = Details.length;

    // 3. paginate
    Details = Details.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({ Details, total });
  }
}

  import { AsyncPipe, CommonModule, DecimalPipe } from '@angular/common';
  import { Component, viewChildren, inject } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  import { NgbHighlight, NgbPagination } from '@ng-bootstrap/ng-bootstrap';
  import { Observable } from 'rxjs';
  
  import {
    NgbdSortableHeaderDirective,
    SortEvent,
  } from '../../../shared/directives/sortable.directive';
  import { supportDB } from '../../../shared/interface/support';
  import { TableService } from '../../../shared/services/table.service';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.html',
    styleUrls: ['./data-table.scss'],
    providers: [DecimalPipe],
    imports: [
      FormsModule,
      CommonModule,
      NgbdSortableHeaderDirective,
      NgbHighlight,
      NgbPagination,
      AsyncPipe,
    ],
  })
  export class DataTable {
    public service = inject(TableService);
  
    public tableData$: Observable = this.service.supportdata$;
    public total$: Observable = this.service.total$;
    public Data: supportDB[];
  
    readonly headers = viewChildren(NgbdSortableHeaderDirective);
  
    ngOnInit() {
      this.tableData$.subscribe(res => {
        this.Data = res;
      });
    }
  
    onSort({ column, direction }: SortEvent) {
      this.headers().forEach(header => {
        if (header.sortable() !== column) {
          header.direction = '';
        }
      });
  
      this.service.sortColumn = column;
      this.service.sortDirection = direction;
    }
  
    removeItem(id: number) {
      this.tableData$.subscribe((data: supportDB[]) => {
        data.forEach((elem, i) => {
          if (elem.id === id) {
            data.splice(i, 1);
          }
        });
      });
    }
}