Table example.component.ts

@Component({
  selector: 'app-table-example',
  templateUrl: './table-example.component.html',
  styleUrls: ['./table-example.component.css'],
  standalone: true,
  imports: [
    MatTableModule,
    FormsModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    NgIf,
  ],
})
export class TableExampleComponent implements OnInit {
  query: string = '';
  loading: boolean = false;
  searchResult: GitHubSearchResult = {
    items: [],
  };

  columns = [
    {
      columnDef: 'full_name',
      header: 'Name',
      cell: (element: GitHub) => `${element.full_name}`,
    },
    {
      columnDef: 'html_url',
      header: 'URL',
      cell: (element: GitHub) => `${element.html_url}`,
    },
    {
      columnDef: 'license.name',
      header: 'License',
      cell: (element: GitHub) => `${element.license?.name}`,
    },
    {
      columnDef: 'watchers_count',
      header: 'Watchers',
      cell: (element: GitHub) => `${element.watchers_count}`,
    },
  ];
  displayedColumns = this.columns.map((c) => c.columnDef);

  constructor(private gitHubApiService: GitHubApiService) {}

  ngOnInit() {}

  search(): void {
    this.loading = true;
    this.gitHubApiService
      .get(this.query, 0, 10)
      .pipe(take(1))
      .subscribe({
        next: (data) => {
          this.searchResult = data;
        },
        complete: () => {
          this.loading = false;
        },
      });
  }
}