简介
ng2-table-custom 是一个 Angular 2 及以上版本的表格组件。其支持自定义表头、排序、搜索等功能，且能够为您的 Web 应用提供更好的表格展示效果。
安装
使用 npm 安装：
npm install ng2-table-custom --save
使用
在代码中引入 ng2-table-custom：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- -------------------
-----------
-------- --------------- ----------------------
------------- ---------------
---------- --------------
--
------ ----- --------- - -在 HTML 文件中调用组件，并设置数据、表头等参数：
<ng2-table-custom [data]="data" [columns]="columns" [pagination]="true"> </ng2-table-custom>
其中，data 参数为表格数据，columns 参数为表头信息，pagination 参数表示是否启用分页。
自定义表头
您可以设置更加自定义的表头信息，如下所示：
columns = [
{ title: 'ID', name: 'id' },
{ title: '姓名', name: 'name' },
{ title: '邮箱', name: 'email' },
{ title: '创建时间', name: 'created_at' }
];在设置表头信息时，您可以设置表头的标题、字段名称以及样式等信息。
排序
您可以为表格实现按照某些字段排序的功能，如下所示：
<ng2-table-custom [data]="data" [columns]="columns" [sorting]="true"> </ng2-table-custom>
启用排序后，您可以设置默认排序字段、排序方式等信息。
搜索
您可以为表格实现按照某些字段搜索的功能，如下所示：
<ng2-table-custom [data]="data" [columns]="columns" [searching]="true"> </ng2-table-custom>
启用搜索后，您可以设置搜索框的位置、提示信息、搜索字段等信息。
其他
ng2-table-custom 还支持更多功能，如导出表格数据、禁用某些字段等，具体请参考官方文档。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ------------------ ------------- ------------------- ---------------- ----------------------------------------
--
------ ----- ------------ -
---- - -
- --- -- ----- ----- ------ --------------------- ----------- ------------ --
- --- -- ----- ----- ------ ----------------- ----------- ------------ --
- --- -- ----- ----- ------ ------------------- ----------- ------------ -
--
------- - -
- ------ ----- ----- ---- --
- ------ ----- ----- ------ --
- ------ ----- ----- ------- --
- ------ ------- ----- ------------ -
--
-结语
ng2-table-custom 是一个十分方便的表格组件，能够为您的 Web 应用提供更好的表格展示效果。希望本文能够帮助您更好地使用 ng2-table-custom。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe881e8991b448dd8da