npm包wh-react-table使用教程

在前端开发过程中，我们不可避免地要处理数据，并将其呈现给用户。表格展示是最常用的一种方式，而wh-react-table这款npm包就提供了一套简洁易用的表格组件，可以帮助我们更快速地开发优秀的数据展示页面。

安装与引用

安装：

npm install --save wh-react-table

引用：

import { Table, Column } from 'wh-react-table';

基本用法

wh-react-table提供了两个组件，分别为Table和Column。其中Table很容易理解，它是整个表格的容器。而Column则代表每一列。

首先我们需要为Table组件传入数据和列数据，示例代码如下：

-- -------------------- ---- -------
----- ------- - -
  - ------ ----- ---- ---- --
  - ------ ----- ---- ------ --
  - ------ ----- ---- ----- --
  - ------ ----- ---- --------- --
--

----- ---- - -
  - --- -- ----- ----- ---- --- -------- ----- --
  - --- -- ----- ----- ---- --- -------- ----- --
  - --- -- ----- ----- ---- --- -------- ----- --
  - --- -- ----- ----- ---- --- -------- ----- --
--

------ ------------
  --------------------- -- -
    ------- ---------------- -------------------- -------------------- --
  ---
--------

以上代码就可以渲染出一个简单的表格。

自定义渲染

wh-react-table还支持自定义表格单元格的渲染方式，例如我们可以在表格中展示图片或链接等其他类型的数据。使用方式如下所示：

-- -------------------- ---- -------
------ ------------
  ------- ---------- ------------ --
  -------
    ----------
    --------------
    --------------- -- -
      -- -------------------------------------------
        -------
      ----
    --
  --
  ------- ---------- ------------- --
  -------
    ----------
    -----------------
    --------------- -- -
      ---- -------------------------------------------- ----------- --
    --
  --
--------

上述示例代码，我们通过在Column属性中添加render方法，来实现不同类型的数据渲染。

更多用法

组件属性

• data 表格数据，必须是一个数组类型
• className 自定义表格样式类
• headerClassName 自定义表格头部样式类
• rowClassName 自定义表格行样式类
• striped 是否启用隔行变色
• vertical 是否启用纵向滚动条

Column属性

• label 列标题，可以是一个React元素类型
• dataKey 列数据键名
• align 列的文字排版方式，取值包括left、center、right
• sortFn 自定义排序函数
• width 列宽度

结语

以上就是使用wh-react-table这款npm包的基本教程。此外，该组件还提供了丰富的自定义能力，基本能够满足日常用法。如果需要更多深入拓展，可以通过阅读官方API文档来了解更多操作方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffdfc4