简介
Griddle 是一个React 表格组建，它提供了可以快速构建网格的方法。 Griddle-overhaul-subgrid-plugin 是一款可扩展的子网格插件，为 Griddle 提供了一个可以更好地组织和显示数据的方法。这个插件使用起来非常简单，只需通过 npm 安装即可开始使用。
安装
可以通过 npm 安装 griddle-overhaul-subgrid-plugin, 在项目的根目录下打开终端并输入以下命令：
npm install griddle-overhaul-subgrid-plugin
引用
在需要使用的 React 组件中引入 Griddle 和子网格插件：
import Griddle from 'griddle-react';
import { GriddleSubgridPlugin } from 'griddle-overhaul-subgrid-plugin';子网格配置
要使用 Griddle-overhaul-subgrid-plugin，需要将其作为 Griddle 组件的插件引入并定义子网格配置的方法。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- ----------------
------ - -------------------- - ---- ----------------------------------
------ ------- ----- ----------- ------- --------- -
-------- -
----- ------- - ------- -- -
----- - ------- - - ------
------ -
--------
----------------------
--------------------------------
-
-- ----
----------
--
--
----- ---------------------- - -
-
----------- -------------
------------ ---- ---- -----
--
-
----------- -------------
------------ ---- ---- -----
--
--
----- ------------------- - -
-
----------- -----
------------ -----
--
-
----------- -------
------------ -------
--
--
-- ----------
----- -------------------- - -
--------------- ------- -- --
-------- -----------------------
-------- ----------------
---
----------- -
---- -
----------- -
--------
--
--
--
--
------ -
--------
-------- --- -- ----- ------ -------- -- ----------- ------- ----------- ------ -- ---
------------------------------------------------------
-
----------------------
---------------------------------
--
----------
--
-
-说明
Griddle-overhaul-subgrid-plugin 通过 getRowMetadata 方法提供子网格的配置信息，以及渲染 Griddle 表格的组件。 在上面的示例中，getRowMetadata返回了一个包含子网格数据的 rowData，以及元数据列信息的 columns。 components 对象定义用于渲染包含子网格的行的组件，Subgrid 组件渲染子网格表格。
在引入 Griddle-overhaul-subgrid-plugin 时，将子网格配置作为参数传递给它，Griddle 会使用该配置来呈现子网格行。
总结
使用 Griddle-overhaul-subgrid-plugin 扩展 Griddle 提供了一种优雅的方法来组织和查看数据集。插件的 API 简单，易于实现，可以很容易地与自己的 React 组件集成。 本文介绍了如何在 Griddle 中使用 Griddle-overhaul-subgrid-plugin 插件，并提供了简单的示例代码。 现在，你可以尝试在你的项目中使用 Griddle-overhaul-subgrid-plugin 来查看自己的子网格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69446