I am working with Angular datatables in my app and I am showing my list of data I am getting from the service, and I have 3 actions buttons in the UI (showAll – filter check in – filter check out)

at the first I am pushing the data I am getting to the main array and also to the filteredData array and on every filter action I am filtering the main array in change the filteredData array with the filtered data, and always showing the filteredData array in the datatable

The filter check in button filters the data of the list and just take the data which have the check_in_date same as today date and the filter check out data is taking the data with the check_out_date same as today and updates the filteredData array with the new data, and every function calls reinitializeTable() that refreshes the table

but the filteration only works at the first time, for example if I filtered the check ins it works fine but if I again tried to filter the check outs or decided to show all the data it just emptying the datatable

this is the ts code:

dtOptions: Config = {};
dtTrigger: Subject<any> = new Subject<any>();
reservations: Reservation[] = [];
filteredReservations: Reservation[] = [];

constructor(private reservationsService: ReservationsService) { }

ngOnInit(): void {
  this.dtOptions = {
    scrollX: true,
    scrollCollapse: true,
    pageLength: 25,
    processing: true,
    stateSave: true,
    pagingType: 'full_numbers',
    retrieve: true
  };

  this.getReservations();
}

getReservations(): void {
  this.reservationsService.getReservations().subscribe(data => {
    for (let reservation of data.data) {
      let finalReservation: Reservation = new Reservation(
        reservation.id, reservation.name, reservation.national_id, reservation.phone,
      reservation.unit, reservation.platform, reservation.guest, reservation.reference_id,
      reservation.day_amount, reservation.total_amount, reservation.paid_amount,
      reservation.remaining_amount, reservation.notes, reservation.employee,
      reservation.check_in_date, reservation.check_in_time, reservation.check_out_date,
      reservation.check_out_time, reservation.duration, reservation.status
      );
      this.reservations.push(finalReservation);
    }

    this.filteredReservations = [...this.reservations];
    this.dtTrigger.next(null);
    console.log("All reservations: ", this.reservations);
  }, error => {
    Swal.fire({
      icon: 'error',
      title: 'Error!',
      text: error.error.message
    });
  });
}

showAllReservations(): void {
  this.filteredReservations = [...this.reservations];
  this.reinitializeTable();
  console.log("Show all reservations: ", this.filteredReservations);
}

filterCheckIns(): void {
  const today = this.formatDate(new Date());
  console.log("Today's date: ", today);
  this.filteredReservations = this.reservations.filter(reservation => {
    const checkInDate = this.formatDate(new Date(reservation.check_in_date));
    console.log("Checking in date: ", checkInDate);
    return checkInDate === today;
  });
  this.reinitializeTable();
  console.log("Filtered check-ins: ", this.filteredReservations);
  console.log("Main Reservations: ", this.reservations);
}

filterCheckOuts(): void {
  const today = this.formatDate(new Date());
  console.log("Today's date: ", today);
  this.filteredReservations = this.reservations.filter(reservation => {
    const checkOutDate = this.formatDate(new Date(reservation.check_out_date));
    console.log("Checking out date: ", checkOutDate);
    return checkOutDate === today;
  });
  this.reinitializeTable();
  console.log("Filtered check-outs: ", this.filteredReservations);
  console.log("Main Reservations: ", this.reservations);
}

formatDate(date: Date): string {
  const day = ('0' + date.getDate()).slice(-2);
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

reinitializeTable(): void {
  if ($.fn.dataTable.isDataTable('#reservationsTable')) {
    $('#reservationsTable').DataTable().destroy();
  }
  this.dtTrigger.next(null);
}

ngOnDestroy(): void {
  this.dtTrigger.unsubscribe();
}

And this the html code

<table id="reservationsTable" class="table table-hover row-border hover nowrap" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  <thead class="bg-danger">
    <tr>
      <th class="p-3 text-center">ID</th>
      <th class="p-3 text-center">Name</th>
      <th class="p-3 text-center">Unit</th>
      <th class="p-3 text-center">Platform</th>
      <th class="p-3 text-center">Check In Date</th>
      <th class="p-3 text-center">Duration</th>
      <th class="p-3 text-center">Total Amount</th>
      <th class="p-3 text-center">Remaining Amount</th>
      <th class="p-3 text-center">Status</th>
      <th class="p-3 text-center">View</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let reservation of filteredReservations">
      <td class="p-3 text-center">{{ reservation.id }}</td>
      <td class="p-3 text-center">{{ reservation.name }}</td>
      <td class="p-3 text-center">{{ reservation.unit.name }}</td>
      <td class="p-3 text-center">
        <img [src]="'https://back.sky2030central.com' + reservation.platform.logo"
          [alt]="reservation.platform.name + 'Logo'" class="platform-logo">
      </td>
      <td class="p-3 text-center">{{ reservation.check_in_date | date: 'dd/MM/yyyy' }}</td>
      <td class="p-3 text-center">{{ reservation.duration }}</td>
      <td class="p-3 text-center">{{ reservation.total_amount }} SAR</td>
      <td class="p-3 text-center">
        <span class="p-2 rounded" [class.remaining-amount-positive]="+reservation.remaining_amount > 0"
          [class.remaining-amount-negative]="+reservation.remaining_amount <= 0">{{ reservation.remaining_amount }}
          SAR</span>
      </td>
      <td class="p-3 text-center">
        <span class="p-2 rounded" [class.status-box-unconfirmed]="reservation.status === 'Unconfirmed'"
          [class.status-box-confirmed]="reservation.status === 'Confirmed'"
          [class.status-box-staying]="reservation.status === 'Staying'"
          [class.status-box-suspended]="reservation.status === 'Suspended'"
          [class.status-box-closed]="reservation.status === 'Closed'">{{ reservation.status }}</span>
      </td>
      <td class="p-3 text-center">
        <button type="button" class="btn btn-success text-center" [routerLink]="'../view/' + reservation.id">
          <i class="bi bi-eye"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>