CODEWITHSUNDEEP
javascripthtmlangular6
Tech_Sharma
Tech_Sharma

Reputation: 131

what is the best approach to make a dynamic and configurable table in angular 6?

Can anyone suggest the best approach to make a dynamic table on a website? I want the table to be configurable.

Upvotes: 4

Views: 1231

Answers (2)

Adrian Brand
Adrian Brand

Reputation: 21638

Here is a table component I wrote

https://stackblitz.com/edit/angular-xdn6nq

To use it you give it an array for the data and a TableConfig object.

<app-table [data]="data" [config]="tableConfig"></app-table>

A table config object has the interface

interface TableConfig {
  columns: ColumnConfig<any>[];
  columnGroups?: ColumnGroup[];
  filters?: ((item: any) => boolean)[];
  groupBy?: GroupBy;
  update?: Subject<boolean>;
}

Columns is the main property you will set, it is an array of ColumnConfig which has the interface

interface ColumnConfig<T> {
  property: string;
  type?: ColumnType;
  heading?: string;
  sortable?: boolean;
  direction?: ColumnSortDirection;
  compare?: (a: T, b: T) => number; // Return -1 if a is less than b by some ordering criterion, 0 if equal, 1 a is greater than b by the ordering criterion
  display?: (item: T) => string;
  route?: (item: T) => string;
  href?: (item: T) => string;
}

Upvotes: 2

TheParam
TheParam

Reputation: 10541

I would suggest using the primeNG library. The table is a lightning-fast performance and an excellent level of control over the presentation

This library has well documented and community support on StackOverflow.

Here is a link of official documentation.

Upvotes: 1

Related Questions