Data Table Component

@Component({
  template: `
    <angular2-smart-table
      [settings]="settings"
      [source]="source"
      (edit)="onEditRow($event)"
      (delete)="onDeleteRow($event)"
    >
    </angular2-smart-table>
  `,
})
export class MyListComponent {
  settings = {
    actions: {
      add: false,
      edit: { editButtonContent: '<i class="nb-edit"></i>' },
      delete: { deleteButtonContent: '<i class="nb-trash"></i>' },
    },
    columns: {
      name: { title: "Name", type: "string" },
      email: { title: "Email", type: "string" },
      status: {
        title: "Status",
        type: "custom",
        renderComponent: StatusBadgeComponent,
      },
      createdAt: {
        title: "Created",
        type: "custom",
        renderComponent: DateViewComponent,
      },
    },
  };
}

import { ServerDataSource } from "angular2-smart-table";

export class MyListComponent {
  source: ServerDataSource;

  constructor(private http: HttpClient) {
    this.source = new ServerDataSource(http, {
      endPoint: "/api/my-entity",
      dataKey: "items",
      totalKey: "total",
      pagerPageKey: "page",
      pagerLimitKey: "limit",
      sortFieldKey: "orderBy",
      sortDirKey: "order",
    });
  }
}