完整的Angular数据表组件– Ag-Table

完整的Angular数据表组件– Ag-Table
插件名称 Ag-Table
发布时间 2020年4月21日
插件作者 ericferreira1992

描述:

用于Angular 8+框架的简单,干净,轻巧的DataTable组件。

对于在编码时需要敏捷性和效率的开发人员,AgTable是一种替代方案。使用AgTable,可以以最小的努力创建功能齐全的数据表。通过精心设计的结构,无需像其他数据表组件所需要的那样为列或单元格创建组件。

特征:

  • 虚拟滚动(高度不是线)
  • 通过显示数千条记录来提高性能
  • 客户端上的筛选,排序和分页
  • 允许您查看服务器获取的数据(使用可选的无限滚动)
  • 服务器端过滤,排序和分页支持
  • 不会强迫您创建组件以自定义列和单元格
  • 列度量可定制
  • 以及更多;

安装

npm install ag-table

1.导入模块

import { AgTableModule } from 'ag-table';

@NgModule({
    declarations: [...],
    imports: [
    	...,
    	AgTableModule
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

2.设定语言(可选)

import { AgTableModule, AgTableCustomSettings } from 'ag-table';

@NgModule({
    declarations: [...],
    imports: [...],
    providers: [
        {
            provide: AgTableCustomSettings,
            useValue: { lang: 'pt-BR' } // Default is 'en-US'
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3.导入style.scss
简单导入:

@import '~ag-table/scss/style.scss';
@include ag-table-core();

自定义导入(带有主题颜色):

@import '~ag-table/scss/style.scss';
@include ag-table-core($yourColor);