在前端开发中，数据表格是一个常见的需求，它能够让我们以表格的形式展示数据，并且具备搜索、排序、分页等功能。而 ob-datatable-dev 就是一个强大的npm包，它提供了丰富的数据表格组件，可供我们快速实现数据表格的开发。
安装
使用 npm 命令行安装 ob-datatable-dev：
npm install ob-datatable-dev --save
基础使用
小编在这里提供一个基础的例子,让我们可以更好的了解 ob-datatable-dev 的基本用法:
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-----------------------------------
----- ---------------- -------------------------------------------------------------
-------
------
---- -------------------
------- --------------------------------------------------------------------
--------
--- ------ - -
--- -----------
----- --
--- --
----- ----------
---- ---
------- --------
-- -
--- --
----- -------
---- ---
------- ------
-- -
--- --
----- ------
---- ---
------- ------
-- -
--- --
----- -------
---- ---
------- --------
---
-------- --
------ -----
---- ----
-- -
------ -----
---- ------
-- -
------ -----
---- -----
-- -
------ -----
---- --------
--
-
--- ----- - --- ----------------------------
---------------
---------
-------
-------上述代码中，我们通过引入ob-datatable.css和ob-datatable.js，以及构造表格实例，配置表格基本属性（id、name、age、gender），并且在页面上呈现了表格。
配置项
ob-datatable-dev 提供了非常丰富的表格配置项，大大增加了表格的可定制性。在这里我们详细介绍几个常用的配置项:
el
类型：string
说明：表格渲染的 DOM 元素的 CSS 选择器。例如 #example。
data
类型：array
说明：表格显示的数据。
columns
类型：array
说明：定义表格显示的列信息。这个选项包含的是一个数组，数组中的元素就是一个配置信息对象。
sortParams
类型：array
说明：定义表格默认排序方式，为形如 ['key', 'asc'] 的数组，默认按第一列升序排列。
rowClassName
类型：function
说明：自定义表格行的 class 名称。注意：此函数应返回一个 string 类型的结果。
更多配置项请参考API文档。
事件
ob-datatable-dev 同时也提供了丰富的表格事件，方便我们对表格进行监听。在这里我们介绍几个常用的事件：
rowClick
说明：表格行点击事件。
示例代码：
var table = new window.OB.DataTable({
el: '#example',
data: responseData,
rowClick: function (rowData) {
// do something on row click
}
})columnClick
说明：定义表格列点击事件。
示例代码：
var table = new window.OB.DataTable({
el: '#example',
data: responseData,
columnClick: function (columnData) {
// do something on column click
}
})总结
ob-datatable-dev 作为一个成熟、稳定的 npm 包，其提供的功能强大且使用方便。我们可以根据自己的需求配置表格的各种属性，同时也能够监听表格的各种事件。通过本文的介绍，相信大家一定能够快速上手使用这个 npm 包，为前端开发提供更好的支持和便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53df0