随着 Web 应用程序的复杂性和交互性的不断提高，数据表格作为一个非常重要的组件在前端开发中得到越来越广泛的应用。数据表格有时候需要具备排序、过滤等功能，而这些功能在大多数情况下都需要我们在前端代码中手动实现。幸运的是，有不少优秀的 npm 包可以轻松帮助我们实现这些功能，其中一个就是 ngx-table-sortable。
ngx-table-sortable 简介
ngx-table-sortable 是一个支持 Angular 框架的数据表格排序插件，它可以让我们在少数代码的基础上，为数据表格添加排序功能。ngx-table-sortable 最早由 Mike Coyle 开发，截至目前已有多人维护并更新。ngx-table-sortable 的 GitHub 仓库地址为 https://github.com/saibbyweb/ngx-table-sortable。
安装
从 ngx-table-sortable 的 GitHub 仓库获取最新代码并使用 npm 安装最新版，或直接运行以下命令：
npm install ngx-table-sortable
如何使用 ngx-table-sortable
使用 ngx-table-sortable 非常简单，这里我将通过一个简单的示例代码展示如何使用它。
首先，我们需要在 app.module.ts 中导入 ngx-table-sortable：
import { NgxTableSortableModule } from 'ngx-table-sortable';然后，在 @NgModule 中将它作为一个 imports：
-- -------------------- ---- -------
-----------
------------- ------
-------- -
-----------------------
---
--
---
--
------ ----- --------- - -接下来，在我们的组件中，我们首先需要定义表头的字段并将它们存储在数组中。这里我将展示一个非常简单的例子，只包含两个字段 name 和 age：
columns = [
{name: 'name', sortable: true},
{name: 'age', sortable: true},
];然后，在我们的 HTML 模板中，我们需要使用 ngx-table-sortable 来渲染我们的表格和表头：
-- -------------------- ---- -------
------ ------------------ -------- ------------------- --------------
-------
----
--- ----------- ------ -- -------- ------------------------- ----------------- --------------------
-- ----------- --
-----
-----
--------
-------
--- ----------- --- -- ---------------------
--- ----------- ------ -- ----------- ---------------- -------
-----
--------
--------注意到这里我们为表头的每一列都添加了一个 ngx-table-sortable-header 指令，并且为表格加入了一个 ngx-table-sortable 指令。ngx-table-sortable-header 指令支持单击排序，并且可以根据当前排序状态自动更新对应的图标。
最后，我们在我们的组件中定义表格数据并将它们绑定到 data 变量上：
data = [
{name: 'John', age: 21},
{name: 'Bob', age: 20},
{name: 'Alice', age: 22},
];当我们运行这个示例时，将会得到一个带有排序功能的表格。
ngx-table-sortable 的优点
轻松地使表格拥有排序功能。使用 ngx-table-sortable，我们只需要添加几行代码即可为表格添加排序功能，极大地提高了开发效率。
定制性强。通过配置 columns 数组，我们可以为每一列指定是否允许排序，及其它各种定制需求。
具备 TypeScript 支持。ngx-table-sortable 内部使用 TypeScript，可以为我们提供良好的类型提示和安全保障。
结语
通过本文，我们学习了如何使用 ngx-table-sortable 为数据表格添加排序功能。ngx-table-sortable 是一个非常优秀的 npm 包，它可以极大地提高我们的开发效率，减少我们的代码复杂度。同时它也提供了极高的定制性，使我们可以根据实际需求来配置表格。如果你在开发 Web 应用程序时需要使用到数据表格排序功能，它值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e081e8991b448d7630