npm 包 @atlaskit/dynamic-table 使用教程

在前端开发中，常常需要使用表格展示数据，但是常规的静态表格不够灵活，无法快速适应变化的数据。这时候就需要使用动态表格。npm 包 @atlaskit/dynamic-table 就是一款方便使用、强大的动态表格组件。

什么是 @atlaskit/dynamic-table？

@atlaskit/dynamic-table 是 Atlassian 出品的一款 React 动态表格组件，它有以下特性：

  • 可变列数和行数：可以自由添加和删除行和列
  • 排序和筛选：点击表头可以对数据进行排序，同时支持通过输入框筛选数据
  • 可编辑内容：支持在表格中编辑数据
  • 支持固定表头和列：解决长表格的可视性问题

安装

要使用 @atlaskit/dynamic-table，我们需要一些前置条件：

  • Node.js 版本大于等于 10
  • 安装了 React 和 ReactDOM

在项目的根目录执行以下命令：

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

如何使用？

引入

首先在代码中引用 @atlaskit/dynamic-table 组件：

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

Table 数据

接下来，我们需要定义数据。表格数据我们定义在一个数组中，例如以下格式的数据：

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

每个 row 代表一个表格行，而 cells 数组表示每一行中包含的表格单元格。

Table 列

我们还需要定义表格的每一列的数据。每一列包含以下信息：

  • width: 列宽
  • content: 列头内容
  • dataKey: 列的数据 key，与 rows 中的 cells.key 对应
----- ------- - -
  -
    ------ ---
    -------- ------- ---
    -------- ---------
  --
  -
    ------ ---
    -------- ------- ---
    -------- ---------
  --
  -
    ------ ---
    -------- ------- ---
    -------- ---------
  --
--

DynamicTable 组件

最后，我们将数据传递给 DynamicTable 组件，使用时只需传递两个必需的 props：rows 和 columns：

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

完整代码

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

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

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

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

示例代码

以下是一个使用 @atlaskit/dynamic-table 组件的完整示例代码，你可以将其复制到自己的项目中进行测试。

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

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

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

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

总结

@atlaskit/dynamic-table 组件可以帮助我们快速构建动态表格，为我们的前端项目带来方便和效率。在使用之前，需要了解其基本信息，按照引入、Table 数据、Table 列、DynamicTable 组件的顺序进行使用。我们希望这篇文章能够帮助你更好地掌握 @atlaskit/dynamic-table 的使用技巧。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedab43b5cbfe1ea06106c7

阅读全文

猜你喜欢

  • npm 包 calendar-base 使用教程

    前言 前端中经常需要使用到日期选择器，calendar-base 是一个方便易用的 npm 包，能够帮助我们快速实现一些常见的日期处理功能，如日期比较、日期加减、星期计算等。

    4 年前
  • npm 包 @atlaskit/calendar 使用教程

    随着前端技术的日益发展，现在有很多便捷的工具可以帮助我们更高效地开发网页应用。其中一个优秀的工具就是 npm 包 @atlaskit/calendar。这个包可以提供一个功能强大的日历组件，下面我们来...

    4 年前
  • npm 包 react-markings 使用教程

    React-markings 是一个基于 Markdown 语法的 React 组件，它能够帮助你将 Markdown 内容渲染成 React 组件，可以帮助你快速地搭建出一个漂亮的文档或博客站点。

    4 年前
  • npm 包 basic-assert 使用教程

    在前端开发中，我们经常需要对我们的代码进行单元测试以及断言的编写。这时候，我们可以选择使用一些开源的 npm 包来辅助我们进行单元测试。其中一个常用的 npm 包就是 basic-assert 。

    4 年前
  • npm 包 seedable-random 使用教程

    简介 seedable-random 是一个可在前端使用的 npm 包，用于生成由种子确定的随机数。在前端开发中，需要使用随机数来模拟数据、生成唯一值等场景，而 seedable-random 可以提...

    4 年前
  • npm 包 react-lorem-component 使用教程

    在前端界中，经常需要使用一些虚拟数据来进行开发和测试。而在 React 项目中，我们经常使用一个叫做 react-lorem-component 的 npm 包来生成一些模拟内容。

    4 年前
  • npm 包 project-bin-path 使用教程

    前言 在日常的前端开发中，我们常常需要使用到一些第三方的 npm 包来帮助我们完成一些复杂的任务。但是，在使用这些 npm 包的时候，我们有时会遇到一些问题，比如无法找到对应的可执行文件路径等。

    4 年前
  • `npm`包 `task-graph-runner`使用教程

    介绍 task-graph-runner是一个npm包，它能让程序员轻松地定义任务的顺序和依赖关系，并确保它们按正确的顺序运行。该包提供了一种使用有向无环图（DAG）来描述任务间依赖关系的方法。

    4 年前
  • npm 包 jest-expect-contain-deep 使用教程

    简介 在前端开发中，测试是不可或缺的部分。而 Jest 是一个非常流行的 JavaScript 测试框架。在 Jest 中，expect 是一种常用的断言语句，用于判断测试结果是否正确。

    4 年前
  • npm 包 mode-to-permissions 使用教程

    在前端开发中，权限控制是一个非常重要的问题。mode-to-permissions 是一个开源的 npm 包，它可以方便地把文件模式（如 755）转换为权限（如 rwxr-xr-x），具有很好的可读性...

    4 年前
  • npm 包 bolt 使用教程

    什么是 bolt？ Bolt 是一个加速多包依赖管理的工具，它能够同步运行多个项目，使用单个命令即可安装、更新以及管理本地包和全局包。与其他的包管理器相比，bolt 的性能更加出色，可以极大提高开发效...

    4 年前
  • npm 包 @atlaskit/locale 使用教程

    简介 @atlaskit/locale 是一个用于在 Atlassian 风格的应用程序中获取本地化文本的 npm 包。在开发多语言应用程序时，@atlaskit/locale 可以帮助我们自动获取用...

    4 年前
  • npm 包 @atlaskit/datetime-picker 使用教程

    @atlaskit/datetime-picker 是一个基于 React 的日期时间选择器组件。它提供了丰富的自定义选项，可以帮助前端开发者快速集成日期时间选择功能。

    4 年前
  • npm 包 bolt-query 使用教程

    前言 NPM(Node Package Manager)包是一种常用于前端开发的资源管理工具，允许开发者轻松地安装和管理依赖包。Bolt-Query是一个优秀的NPM包，它提供了解析和操作HTML文档...

    4 年前
  • npm 包 `@atlaskit/icon-file-type` 使用教程

    前言 在前端开发中，很多时候我们需要使用图标来丰富页面效果，为了方便使用和维护，我们通常会使用现有的图标库或者 npm 包来解决这个问题。本文将介绍如何使用 npm 包 @atlaskit/icon-...

    4 年前
  • npm 包 @atlaskit/field-radio-group 使用教程

    简介 在前端开发中，我们经常需要使用表单元素来收集用户的输入信息。表单的 radio 类型是最为常见的一种，它可以让用户从多个选项中选择一个。在使用这种类型的表单时，我们可以通过 @atlaskit/...

    4 年前
  • npm 包 @atlaskit/icon-object 使用教程

    #npm 包 @atlaskit/icon-object 使用教程 ##1.0 什么是 @atlaskit/icon-object @atlaskit/icon-object是一个可广泛应用于前端开发...

    4 年前
  • NPM 包 human-id 使用教程

    什么是 human-id ？ human-id 是一个能够生成随机的、易于记忆的 ID 的 npm 包。适用于那些需要创建会员代码、订单号等等的应用。 如何安装 你可以使用 npm 包管理器安装 hu...

    4 年前
  • npm 包 @atlaskit/tag 使用教程

    在前端开发中，标签组件是一个非常常用的 UI 组件。Atlassian 公司推出的 @atlaskit/tag 包提供了一个漂亮而强大的标签组件，可以帮助我们快速地实现标签或标记的功能。

    4 年前
  • npm 包 @atlaskit/tag-group 使用教程

    前言 在前端开发中，我们经常需要使用一些常用组件来实现页面的构建。其中，标签组件是一个常见的组件，可以帮助我们将数据以可视化的方式展示出来，改善用户体验。 在本文中，我们将介绍一个非常优秀的标签组件库...

    4 年前

相关推荐

    暂无文章