用角度6制作动态可配置表的最佳方法是什么?

时间:2019-02-07 04:06:33

标签: javascript html angular6

有人可以建议在网站上制作动态表格的最佳方法吗?我希望该表是可配置的。

2 个答案:

答案 0 :(得分:2)

我建议使用primeNG库。该表具有闪电般的性能,并且可以很好地控制演示文稿

该库在StackOverflow上有充分的文档记录和社区支持。

Here is a link of official documentation.

答案 1 :(得分:2)

这是我写的一个表格组件

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

要使用它,请为它提供一个数据数组和一个TableConfig对象。

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

表配置对象具有接口

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

Columns是您要设置的主要属性,它是具有接口的ColumnConfig数组

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;
}