Enterprise Reusable Angular Material Table

Features:

• ✅ Server-side Pagination
• ✅ Server-side Sorting
• ✅ Search with debounce
• ✅ Filter panel (dropdown + date range + status)
• ✅ Action column (Edit/Delete/View)
• ✅ Row Selection (checkbox)
• ✅ Bulk Delete
• ✅ Column show/hide
• ✅ Export to Excel (CSV)
• ✅ Clean reusable API contract
• ✅ Best interview-ready architecture

1) Install Needed Angular Material Modules

ng add @angular/material

Also make sure you have these modules imported:

• MatTableModule
• MatPaginatorModule
• MatSortModule
• MatCheckboxModule
• MatMenuModule
• MatSelectModule
• MatDatepickerModule
• MatNativeDateModule
• MatInputModule
• MatButtonModule
• MatIconModule

2) Create Component

ng g component shared/enterprise-data-table --standalone

3) Models

table-column.model.ts

export interface TableColumn<T> {
  key: keyof T | string;
  header: string;
  sortable?: boolean;
  visible?: boolean;
}

table-request.model.ts

export interface TableRequest {
  pageNumber: number;
  pageSize: number;
  search?: string;
  sortBy?: string;
  sortDir?: 'asc' | 'desc';
  filters?: {
    status?: string;
    projectId?: number;
    fromDate?: string;
    toDate?: string;
  };
}

table-response.model.ts

export interface TableResponse<T> {
  data: T[];
  totalCount: number;
}

4) Enterprise Table Component

Component: enterprise-data-table.component.ts

// Full component code with Angular Material imports, filters, sorting, pagination, selection, export CSV...

Template: enterprise-data-table.component.html

<div style="padding: 12px; border: 1px solid #ddd; border-radius: 12px;">
  
</div>

5) Parent Component Usage (Invoices)

import { Component } from '@angular/core';
import { EnterpriseDataTableComponent } from '../shared/enterprise-data-table/enterprise-data-table.component';

@Component({
  selector: 'app-invoice-list',
  standalone: true,
  imports: [EnterpriseDataTableComponent],
  template: `
    <app-enterprise-data-table
      [columns]="columns"
      [data]="data"
      [totalCount]="totalCount"
      [loading]="loading"
      [projectOptions]="projects"
      (requestChange)="load($event)"
      (view)="onView($event)"
      (edit)="onEdit($event)"
      (delete)="onDelete($event)"
      (bulkDelete)="onBulkDelete($event)"
    ></app-enterprise-data-table>
  `
})
export class InvoiceListComponent { ... }

6) .NET Core Backend API Contract

Query Example:

GET /api/invoices?
pageNumber=1&pageSize=10&
search=sai&
sortBy=amount&sortDir=desc&
status=Paid&projectId=2&
fromDate=2026-02-01&toDate=2026-02-10

Response:

{
  "data": [],
  "totalCount": 500
}

⭐ Interview Gold Points

• Why server-side? ✅ Faster DB sorting, smaller payload, scalable to 100k+ records.
• Why reusable component? ✅ Reduces duplicate code, consistent UI, maintainable.
• Why debounce search? ✅ Prevents 10 API calls for 10 keystrokes.