在前端开发中，常常需要使用表格展示数据，但是常规的静态表格不够灵活，无法快速适应变化的数据。这时候就需要使用动态表格。npm 包 @atlaskit/dynamic-table 就是一款方便使用、强大的动态表格组件。
什么是 @atlaskit/dynamic-table？
@atlaskit/dynamic-table 是 Atlassian 出品的一款 React 动态表格组件，它有以下特性：
- 可变列数和行数：可以自由添加和删除行和列
- 排序和筛选：点击表头可以对数据进行排序，同时支持通过输入框筛选数据
- 可编辑内容：支持在表格中编辑数据
- 支持固定表头和列：解决长表格的可视性问题
安装
要使用 @atlaskit/dynamic-table，我们需要一些前置条件：
- Node.js 版本大于等于 10
- 安装了 React 和 ReactDOM
在项目的根目录执行以下命令：
npm install @atlaskit/dynamic-table
如何使用？
引入
首先在代码中引用 @atlaskit/dynamic-table 组件：
// 引用 dynamic-table import DynamicTable from '@atlaskit/dynamic-table'; // 引用 React 和 ReactDOM import React from 'react'; import ReactDOM from 'react-dom';
Table 数据
接下来，我们需要定义数据。表格数据我们定义在一个数组中，例如以下格式的数据：
-- -------------------- ---- -------
----- ---- - -
-
---- --------
------ -
- ---- --------- -------- ----- ------- -- -- ----- --
- ---- --------- -------- ----- ---- ---- -------- --
- ---- --------- -------- ---- - --- ---- ---- -- ----- --
--
--
-
---- --------
------ -
- ---- --------- -------- ---------- ----- --
- ---- --------- -------- --- --- --- ----- --
- ---- --------- -------- --- ---- ---- ----- --
--
--
--每个 row 代表一个表格行，而 cells 数组表示每一行中包含的表格单元格。
Table 列
我们还需要定义表格的每一列的数据。每一列包含以下信息：
- width: 列宽
- content: 列头内容
- dataKey: 列的数据 key，与 rows 中的 cells.key 对应
-- -------------------- ---- -------
----- ------- - -
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
--DynamicTable 组件
最后，我们将数据传递给 DynamicTable 组件，使用时只需传递两个必需的 props：rows 和 columns：
ReactDOM.render(
<DynamicTable
rows={rows}
columns={columns}
/>,
container,
);完整代码
-- -------------------- ---- -------
------ ------------ ---- --------------------------
------ ----- ---- --------
------ -------- ---- ------------
----- ---- - -
-
---- --------
------ -
- ---- --------- -------- ----- ------- -- -- ----- --
- ---- --------- -------- ----- ---- ---- -------- --
- ---- --------- -------- ---- - --- ---- ---- -- ----- --
--
--
-
---- --------
------ -
- ---- --------- -------- ---------- ----- --
- ---- --------- -------- --- --- --- ----- --
- ---- --------- -------- --- ---- ---- ----- --
--
--
--
----- ------- - -
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
--
----------------
-------------
-----------
-----------------
---
--------------------------------
--示例代码
以下是一个使用 @atlaskit/dynamic-table 组件的完整示例代码，你可以将其复制到自己的项目中进行测试。
-- -------------------- ---- -------
------ ------------ ---- --------------------------
------ ----- ---- --------
------ -------- ---- ------------
----- ---- - -
-
---- --------
------ -
- ---- --------- -------- ----- ------- -- -- ----- --
- ---- --------- -------- ----- ---- ---- -------- --
- ---- --------- -------- ---- - --- ---- ---- -- ----- --
--
--
-
---- --------
------ -
- ---- --------- -------- ---------- ----- --
- ---- --------- -------- --- --- --- ----- --
- ---- --------- -------- --- ---- ---- ----- --
--
--
--
----- ------- - -
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
-
------ ---
-------- ------- ---
-------- ---------
--
--
----------------
-------------
-----------
-----------------
---
--------------------------------
--总结
@atlaskit/dynamic-table 组件可以帮助我们快速构建动态表格，为我们的前端项目带来方便和效率。在使用之前，需要了解其基本信息，按照引入、Table 数据、Table 列、DynamicTable 组件的顺序进行使用。我们希望这篇文章能够帮助你更好地掌握 @atlaskit/dynamic-table 的使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab43b5cbfe1ea06106c7