简介
@atlaskit/table-tree 是一款针对 React 应用开发的表格树组件，可以方便地用于在界面中展示包含层级关系的表格数据，支持数据的自定义与动态渲染，以及各种交互事件的监听。
在本篇文章中，我们将详细介绍如何使用 @atlaskit/table-tree 这个 npm 包。
安装
使用 @atlaskit/table-tree 之前，首先需要在自己的项目中安装该 npm 包。
可以通过 npm 命令行工具在项目根目录下进行安装：
npm install @atlaskit/table-tree
使用
下面是一个基本的 @atlaskit/table-tree 使用示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- - -------- ------- ----- ---- ---- - ---- -----------------------
----- --- ------- --------- -
----- - -
------ -
-
--- --------
----- - ------ ----- -- --
--------- -
-
--- ----------
----- - ------ ----- ---- -
--
-
--- ----------
----- - ------ ----- ---- -
-
-
--
-
--- --------
----- - ------ ----- -- --
--------- -
-
--- ----------
----- - ------ ----- ---- --
--------- -
-
--- ------------
----- - ------ ----- ------ -
-
-
-
-
-
-
--
-------- -
------ -
-----------
---------
------- --------------------------
----------
----- ------------------------ ---------- ---- -- -- -
---- -----------------
------------------------------
------
----
------------
--
-
-
------ ------- ----运行该代码后，会在页面上呈现一个简单的表格树结构。
API
@atlaskit/table-tree 提供了以下主要的 API 接口：
TableTree
<TableTree>
{/* headers */}
{/* rows */}
</TableTree>TableTree 是整个表格树的容器，可以设置一些共用的属性。
属性
isFixedSize：是否固定表格宽度。width：表格宽度。height：表格高度。isLoading：是否显示加载中状态。onExpand：展开一个 item 时的回调函数。onCollapse：收起一个 item 时的回调函数。onSelect：选中一个 item 时的回调函数。onDeselect：取消选中一个 item 时的回调函数。onLoadMore：加载更多数据时的回调函数。onLoadFailed：数据加载失败时的回调函数。onReorderRows：重新排序 rows 时的回调函数。ref：获取组件实例的 ref 函数。
Headers
<Headers>
{/* headers */}
</Headers>Headers 定义表格头部信息。
属性
sticky：是否让表格头部停留在顶部。
Header
<Header width={100}>
{/* text */}
</Header>Header 定义表格列的标题。
属性
width：列宽。hidden：是否隐藏该列。
Rows
<Rows items={data} render={({ item }) => (
{/* rows */}
)}/>Rows 定义表格中的数据行。
属性
items：数据源，即要展示的数据列表。render：自定义渲染行的内容。
Row
<Row itemId={item.id}>
{/* cells */}
</Row>Row 定义表格的一行数据。
属性
itemId：行数据的唯一标识 ID。depth：行在表格树中的深度。
Cell
<Cell>
{/* text */}
</Cell>Cell 定义表格中的数据单元格。
属性
key：单元格的键值。truncate：是否对单元格内容进行截断。collapsible：是否对单元格内容进行折叠。hasOnClick：是否有鼠标点击事件。
指导意义
@atlaskit/table-tree 是 React 前端开发中很实用的一款表格树组件，可以方便地处理包含关系的表格数据。通过本篇文章的介绍与示例，相信读者已经掌握了该 npm 包的基本使用方法与 API，可以在实际开发中应用该组件提高工作效率。
总之，前端工程师在日常开发中要善于搜索各种优秀的 npm 包及其使用方法，拓宽自己的技术视野并不断提高自己的开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f732679a9b7065299ccbc0d