🅰️ 동적 데이터 표 구현

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any[]> {
    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users');
  }
}

// table.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent implements OnInit {
  @Input() columns = ['id', 'name', 'email'];
  data: any[] = [];
  filteredData: any[] = [];
  loading = false;
  error: string | null = null;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.loadTable();
  }

  loadTable(): void {
    this.loading = true;
    this.error = null;
    this.dataService.getData().subscribe({
      next: (response) => {
        this.data = response;
        this.filteredData = [...this.data];
        this.loading = false;
      },
      error: (err) => {
        this.error = '데이터 로딩 중 오류가 발생했습니다.';
        this.loading = false;
      }
    });
  }

  filterData(searchTerm: string): void {
    if (!searchTerm.trim()) {
      this.filteredData = [...this, data];
      return;
    }
    const filtered = this.data.filter(item => 
      Object.values(item).some(val => 
        String(val).toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
    this.filteredData = filtered;
  }

  sortData(column: string): void {
    this.filteredData.sort((a, b) => {
      const valueA = a[column];
      const valueB = b[column];
      if (valueA < valueB) return -1;
      if (valueA > valueB) return 1;
      return 0;
    });
  }
}

// table.component.html
<table>
  <thead>
    <tr>
      <th *ngFor="let column of columns">{{ column }}</th>
      <th>검색</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngIf="loading">
      <td colspan="{{ columns.length + 1 }}" style="text-align:center;">로딩 중...</td>
    </tr>
    <tr *ngFor="let item of filteredData">
      <td *ngFor="let column of columns">{{ item[column] }}</td>
    </tr>
    <tr *ngIf="!loading && !error && filteredData.length === 0">
      <td colspan="{{ columns.length + 1 }}" style="text-align:center;">데이터가 없습니다.</td>
    </tr>
  </tbody>
</table>
<input type="text" (input)="filterData($event.target.value)">