<!-- Datatable Ts Files -->
import { CommonModule, DecimalPipe } from "@angular/common";
import { Component, QueryList, ViewChildren } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { NgbPaginationModule } from "@ng-bootstrap/ng-bootstrap";
import { Observable } from "rxjs";

import { BasicDataTableService } from "../../../shared/services/basicdatatable.service";
import { BasicDataTableDirective, SortEvent } from "../../../shared/directive/basic-data-table.directive";
import { Table } from "../../../shared/data/table/data-table";
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";

@Component({
    selector: "app-data-tables",
    templateUrl: "./data-tables.component.html",
    styleUrls: ["./data-tables.component.scss"],
    providers: [BasicDataTableService, DecimalPipe],
    imports: [FormsModule, CommonModule, NgbPaginationModule, BasicDataTableDirective, PageWrapperComponent, CardComponent]
})

export class DataTablesComponent {
  public isShow: boolean = false;
  public basicDataTable$: Observable;
  public total$: Observable;
  public basicData: Table[];
  @ViewChildren(BasicDataTableDirective)
  public headers: QueryList;

  constructor(public service: BasicDataTableService) {
    this.basicDataTable$ = service.basicDataTable$;
    this.total$ = service.total$;
  }

  ngOnInit() {
    this.service.basicDataTable$.subscribe((data) => {
      if (data) {
        this.basicData = data;
      }
    });
  }

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

<!-- Datatable Service -->
import { DecimalPipe } from '@angular/common';
import { Injectable, PipeTransform } from '@angular/core';
import { BehaviorSubject, Observable, Subject, debounceTime, delay, of, switchMap, tap } from 'rxjs';
import { Table, basicDataTable } from '../data/table/data-table';
import { SortColumn, SortDirection } from '../directive/basic-data-table.directive';

interface SearchResult {
	basic: Table[];
	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(basic: Table[], column: SortColumn, direction: string): Table[] {
	if (direction === '' || column === '') {
		return basic;
	} else {
		return [...basic].sort((a, b) => {
			const res = compare(a[column], b[column]);
			return direction === 'asc' ? res : -res;
		});
	}
}

function matches(basic: Table, term: string, pipe: PipeTransform) {
	return (
		basic.name.toLowerCase().includes(term.toLowerCase()) ||
		basic.office.toLowerCase().includes(term.toLowerCase()) ||
		basic.position.toLowerCase().includes(term.toLowerCase()) ||
		basic.salary.toLowerCase().includes(term.toLowerCase()) ||
		basic.startDate.toLowerCase().includes(term.toLowerCase()) ||
		pipe.transform(basic.age).includes(term) ||
		pipe.transform(basic.id).includes(term)
	)
}

@Injectable({
	providedIn: 'root'
})
export class BasicDataTableService {

	private _loading$ = new BehaviorSubject(true);
	private _search$ = new Subject();
	private _basicTable$ = new BehaviorSubject([]);
	private _total$ = new BehaviorSubject(0);

	private _basic: State = {
		page: 1,
		pageSize: 10,
		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._basicTable$.next(result.basic);
				this._total$.next(result.total);
			});
		this._search$.next();
	}

	get basicDataTable$() {
		return this._basicTable$.asObservable();
	}
	get total$() {
		return this._total$.asObservable();
	}
	get loading$() {
		return this._loading$.asObservable();
	}
	get page() {
		return this._basic.page;
	}
	get pageSize() {
		return this._basic.pageSize;
	}
	get searchTerm() {
		return this._basic.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._basic, patch);
		this._search$.next();
	}

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

		// 1. sort
		let basic = sort(basicDataTable, sortColumn, sortDirection);

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

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

<!-- Datatable Directive -->
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { Table } from '../data/table/data-table';

export type SortColumn = keyof Table | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()',
  },
})

export class BasicDataTableDirective {

  constructor() { }

  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter();
  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({ column: this.sortable, direction: this.direction });
  }
  
}

<!-- Datatable Data -->
export interface Table {
    id: number;
    name: string;
    position: string;
    office: string;
    startDate: string;
    salary: string;
    age: string;
}

export const basicDataTable: Table[] = [
    {
      id: 1,
      name: 'Tiger Nixon',
      position: 'System Architect',
      office: 'Edinburgh',
      age: '61',
      startDate: '2011/04/25',
      salary: '$320,800',
    },
    {
      id: 2,
      name: 'Garrett Winters',
      position: 'Accountant',
      office: 'Tokyo',
      age: '63',
      startDate: '2011/07/25',
      salary: '$170,750',
  
    },
    {
      id: 3,
      name: 'Ashton Cox',
      position: 'Junior Technical Author',
      office: 'San Francisco',
      age: '66',
      startDate: '2009/01/12',
      salary: '$86,000',
  
    },
    {
      id: 4,
      name: 'Cedric Kelly',
      position: 'Senior Javascript Developer',
      office: 'Edinburgh',
      age: '22',
      startDate: '2012/03/29',
      salary: '$433,060',
  
    },
    {
      id: 5,
      name: 'Airi Satou',
      position: 'Accountant',
      office: 'Tokyo ',
      age: '33',
      startDate: '2008/11/28',
      salary: '$162,700',
  
    },
    {
      id: 6,
      name: 'Brielle Williamson',
      position: 'Integration Specialist',
      office: 'New York ',
      age: '61',
      startDate: '2012/12/02',
      salary: '$372,000',
  
    },
    {
      id: 7,
      name: 'Herrod Chandler',
      position: 'Sales Assistant',
      office: 'San Francisco',
      age: '59',
      startDate: '2012/08/06',
      salary: '$137,500',
  
    },
    {
      id: 8,
      name: 'Rhona Davidson',
      position: 'Integration Specialist',
      office: 'Tokyo',
      age: '55',
      startDate: '2010/10/14',
      salary: '$327,900',
  
    }, 
    {
      id: 9,
      name: 'Colleen Hurst',
      position: 'Javascript Developer',
      office: 'San Francisco',
      age: '39',
      startDate: '2009/09/15',
      salary: '$205,500',
  
    },
    {
      id: 10,
      name: 'Sonya Frost',
      position: 'Software Engineer',
      office: 'Edinburgh',
      age: '23',
      startDate: '2008/12/13',
      salary: '$103,600',
  
    },
    {
      id: 11,
      name: 'Jena Gaines',
      position: 'Office Manager',
      office: 'London',
      age: '30',
      startDate: '2008/12/19',
      salary: '$90,560',
  
    },
    {
      id: 12,
      name: 'Quinn Flynn',
      position: 'Support Lead',
      office: 'Edinburgh',
      age: '22',
      startDate: '2013/03/03',
      salary: '$342,000',
  
    },
    {
      id: 13,
      name: 'Charde Marshall',
      position: 'Regional Director',
      office: 'San Francisco',
      age: '36',
      startDate: '2008/10/16',
      salary: '$470,600',
  
    },
    {
      id: 14,
      name: 'Donna Snider',
      position: 'Customer Support',
      office: 'New York',
      age: '27',
      startDate: '2011/01/25',
      salary: '$112,000',
    },
  ];