npm 包 react-grid-blues 使用教程

简介

react-grid-blues 是一个轻量级的 React 表格组件，用于呈现数据、支持排序、筛选、分页和自定义样式。它基于 React Hooks 实现，易于拓展，并提供了丰富的 API 和事件回调。

安装

使用 npm 安装 react-grid-blues 最新版本：

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

或者使用 yarn：

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

使用

使用 react-grid-blues 需要先引入它：

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

然后配置数据和列的信息：

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

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

最后在组件中使用：

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

API

下面是 react-grid-blues 的主要 API：

Grid

Grid 组件，用于呈现表格。

Props

  • columns: 列信息，必需。
  • data: 数据，必需。
  • onSort: 排序事件回调。
  • onFilter: 筛选事件回调。
  • onPage: 分页事件回调。
  • pageSize: 分页大小。
  • pageIndex: 当前页索引。
  • total: 总数据量。
  • loading: 是否正在加载。
  • noDataLabel: 没有数据时的文本提示。
  • noResultsLabel: 没有结果时的文本提示。
  • className: 自定义样式类名。

Column

Column 组件，用于定义列。

Props

  • key: 列的唯一标识，必需。
  • title: 列的标题，必需。
  • width: 列的宽度。
  • sortable: 是否可排序。
  • filterable: 是否可筛选。
  • formatter: 格式化函数。
  • className: 自定义样式类名。

Event objects

下面是 react-grid-blues 支持的事件对象。

SortEvent

排序事件对象，记录排序相关的信息。

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

FilterEvent

筛选事件对象，记录筛选相关的信息。

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

PageEvent

分页事件对象，记录分页相关的信息。

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

Formatter functions

下面是 react-grid-blues 支持的格式化函数。

currency(value: number) -> string

将数字格式化为货币格式。

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

date(value: string | Date, format: string) -> string

将日期格式化为特定格式。

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

Filter operators

下面是 react-grid-blues 支持的筛选条件。

Equal

等于

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

NotEqual

不等于

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

GreaterThan

大于

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

GreaterThanOrEqual

大于等于

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

LessThan

小于

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

LessThanOrEqual

小于等于

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

Contains

包含

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

NotContains

不包含

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

StartsWith

以...开头

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

EndsWith

以...结尾

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

示例代码

下面是一个完整的示例，包含了外部 CSS 样式和事件回调函数：

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

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

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

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

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

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

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

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

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

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

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

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

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

参考资料：

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

阅读全文

猜你喜欢

  • npm 包 adsbexchange-js-utility 使用教程

    简介 npm 包 adsbexchange-js-utility 是一款基于 ADS-B 数据的 JavaScript 库，可以方便地获取航班信息。该库支持节点版本 8.x 及以上和浏览器环境。

    3 年前
  • npm 包 cms-editor 使用教程

    在前端开发领域，CMS (Content Management System) 是一个非常常见且重要的概念。它可以让开发者更高效地管理各种内容，如文章、图片、视频等等。

    3 年前
  • npm 包 hookis 使用教程

    在前端开发中，我们经常需要使用一些开源工具或者 npm 包来提高我们的开发效率。其中一个常用的 npm 包就是 hookis。 hookis 是一个轻量级的钩子库，适用于 JavaScript 和 ...

    3 年前
  • npm 包 repolar-parse 使用教程

    在前端开发中，我们经常需要处理和操作数据。其中，对于数学公式和数据可视化的处理，我们需要使用到 polar coordinate。repolar-parse 是一个 npm 包，它可以方便地将 pol...

    3 年前
  • NPM 包 Notistack2 的使用教程

    在前端开发中，我们经常需要使用到一些强大而方便的工具。其中，Notistack2 就是一个非常好用的通知栏库，可以让我们快速地添加、管理、展示消息通知。在本文中，我们将详细介绍如何使用 Notista...

    3 年前
  • npm 包 babel-plugin-decorators-inject 使用教程

    在 JavaScript 中，装饰器（decorators）是一个非常实用的特性。装饰器能够简洁地引入一些横切关注点（cross-cutting concerns），如日志记录、缓存、权限等等。

    3 年前
  • npm 包 react-data-grid-wow 使用教程

    在前端开发中，表格是一个经常需要使用的组件。但是如果每次都需要手写表格的样式和交互逻辑，会相当繁琐。这时，我们可以使用一些表格组件库来简化我们的开发流程。其中，react-data-grid-wow ...

    3 年前
  • npm 包 sequentialize 使用教程

    在前端开发过程中，我们经常需要处理多个异步函数的调用顺序问题。这时候，一个名为 Sequentialize 的 npm 包就可以派上用场了。Sequentialize 可以按照指定的顺序执行异步函数，...

    3 年前
  • npm 包 @hokid/generator-sazy 使用教程

    前端开发人员经常需要使用许多 npm 包来构建和管理项目。本文将介绍一个名为 @hokid/generator-sazy 的 npm 包，它可以帮助我们简化项目的构建和维护过程。

    3 年前
  • npm 包 @hokid/generator-vuetut 使用教程

    在前端开发中，Vue.js 已经成为了非常受欢迎的框架之一，它可以帮助我们快速构建用户界面。而在编写 Vue.js 应用程序时，我们经常需要编写大量的测试代码来确保应用程序的正确性和稳定性。

    3 年前
  • npm 包 @harrison-ifeanyichukwu/xml-serializer 使用教程

    介绍 在前端开发中，我们常常需要将数据以 XML 格式进行传输。但是，将数据转换为 XML 格式并非是一件容易的事情。由于 XML 的规范较为复杂，需要遵循一定的语法规则，因此我们需要借助一些工具来帮...

    3 年前
  • npm 包 @koehlerb/feathers-datastore 使用教程

    在前端开发中，我们经常需要对数据进行增删改查的操作，而 @koehlerb/feathers-datastore 正是一个帮助我们完成这些操作的 npm 包。本文将介绍该包的使用教程。

    3 年前
  • npm 包 @matthewp/display-drawer 使用教程

    在前端开发中，我们经常需要在页面中展示大量的数据，对于用户来说，看到一块巨大的数据很容易让其感到困惑和不知所措。为了解决这个问题，我们可以使用抽屉式展示组件，将数据分层次展示，以提高用户的可读性和可视...

    3 年前
  • npm 包 sectionize 使用教程

    在前端开发中，我们常常需要对文章或者页面进行分段展示和样式调整。而在这个过程中，我们会发现一个名叫 sectionize 的 npm 包，它可以帮助我们快速地将页面内容分段。

    3 年前
  • npm 包 @dilan2/ckeditor5-build-imageupload 使用教程

    前言 在前端开发中，富文本编辑器是一个常见的需求。其中，CKEditor 是一个流行的开源富文本编辑器。为了扩展 CKEditor 的功能，社区开发了许多插件，而这些插件通常以 npm 包的形式发布。

    3 年前
  • npm包gendiff-emk使用教程

    随着前端开发变得越来越复杂，代码的维护过程变得越来越困难。为了避免出现问题，我们需要对代码进行更加严格的测试和检查。 其中之一就是比较两个文件之间的差异，并且将其以一种易于阅读的方式展示出来。

    3 年前
  • npm 包 api-console-dev-preview 使用教程

    在前端开发中，调试 API 是非常常见的任务。一个好的 API 调试工具可以提高我们的开发效率。而 npm 包 api-console-dev-preview 就是一款非常好的 API 调试工具。

    3 年前
  • npm 包 images-drop-area-component 的使用教程

    前言 在前端开发过程中，图片上传是一个常见需求，在以往的实现方式中，最常用的是利用 input 标签进行文件选择，再通过 ajax 或 form 表单提交实现上传。

    3 年前
  • npm 包 node-red-contrib-gitlab 使用教程

    当今时代，GitLab 已成为一个非常流行的代码托管平台，而且在使用中发现，部署与配置都比较方便。为了方便开发人员更好的使用 GitLab，npm 上已有了一个名为 node-red-contrib-...

    3 年前
  • npm 包 react-native-scrollable-tab-view-cys 使用教程

    前言 在前端开发中，移动端开发的需求越来越普遍，同时也为我们带来了新的技术挑战。在移动端开发中，很多时候我们需要用到 tab 栏，为了方便我们的开发，这里介绍了一个 npm 包：react-nativ...

    3 年前

相关推荐

    暂无文章