介绍
React-data-grid 是一个基于 React 的表格库。它具有强大的功能，能够满足许多复杂的需求，但它并不包含所有我们想要的功能。这时候我们可以使用 react-data-grid-extensions 来扩展它的功能。
React-data-grid-extensions 是一个 React-data-grid 的扩展包，它包含了许多扩展功能，如复选框、单元格编辑、过滤、排序等。本文将详细介绍如何使用 react-data-grid-extensions。
安装
使用 npm 安装 react-data-grid-extensions：
npm install react-data-grid react-data-grid-extensions
使用
基本使用
使用 react-data-grid-extensions 前，需要先引入 react-data-grid：
import ReactDataGrid from 'react-data-grid';
然后，我们可以通过 requireEnhancements 方法扩展 ReactDataGrid 的功能。例如，我们想要将表格的每一行添加一个复选框：
-- -------------------- ---- -------
------ - ------------------- - ---- -----------------------------
----- -------------- - ---------------------------------------------
----- ------- - -
---------------
- ---- ------- ----- ------ --
- ---- ------ ----- ----- --
--
----- ---- - -
------ ------- ---- ----
------ ------- ---- ----
--
----- ------ - -----------------------------------
----- ------- - -- -- -
-------
-----------------
-----------
--
--如上代码所示，我们首先引入了 react-data-grid-extensions 中的 requireEnhancements 方法，并引入了一个 CheckboxColumn 的组件，它会为每一行添加一个复选框。接着定义了一个包含两个字段 name 和 age 的数据，然后通过 requireEnhancements 方法对 ReactDataGrid 进行扩展。最后传入 columns 和 rows，即可渲染出带有复选框的表格。
更多功能
除了添加复选框，react-data-grid-extensions 还支持很多其他的功能扩展，比如单元格编辑、排序、过滤等。我们可以通过在 columns 中设置相应的属性来启用这些功能。
单元格编辑
-- -------------------- ---- ------- ----- - ------- - - --------------------------- ----- - -------------- - - -------- ----- --------------- - -- --- ---- ------ ---------- -- - --- ---- ------ ------ -- - --- ---- ------ -------- -- - --- ---- ------ ----- --- ----- ------- - - - ---- ----- ----- ---- -- - ---- -------- ----- -------- --------- ---- -- - ---- ----------- ----- ----------- ------- --------------- ------------------------- --- --------- ---- -- - ---- ----------- ----- -- ---------- --------- ---- -- --
如上代码所示，我们先引入了 Editors 和 DropDownEditor 组件，然后定义了一个包含四个字段的 columns。我们设置了 title、priority 和 complete 三个字段可以编辑，其中 priority 通过 DropDownEditor 来进行编辑。最后我们传入这些 columns，即可渲染出一个支持单元格编辑的表格。
排序
-- -------------------- ---- -------
----- - --- - - ----------------------------------
----- -------------- - -----------------------------------------------------------------------------
----- ------- - -
- ---- ----- ----- ----- -------------------- ----- --------- ---- --
- ---- -------- ----- -------- --------- ---- --
- ---- ----------- ----- ----------- --------- ---- --
- ---- ----------- ----- -- ---------- --------- ---- --
--
----- ------ - ---------------------------------- - ----------- - ---------- - ----- -------------- - - ---
----- ------- - -- -- -
-------
-----------------
-----------
------------------------
-----------------------
---------------
--
--如上代码所示，我们引入了 Row 组件和 SortableHeader，然后定义了一个包含四个字段的 columns，启用了 sortable 来使这些字段可以排序。然后，我们使用 requireEnhancements 方法对 ReactDataGrid 进行了扩展，并覆盖了 headerRow 中的 cell，使其使用 SortableHeader。最后传入 columns、rows 和 rowGetter（用于获取表格行数据）即可渲染出支持排序的表格。
过滤
-- -------------------- ---- ------- ----- - ------- - - --------------------------- ----- - -------------- ------------------ - - -------- ----- -------------- - -- --- ----------- ------ ---------- -- - --- ------- ------ ------ -- - --- --------- ------ -------- -- - --- ------ ------ ----- --- ----- ------- - - - ---- ----- ----- ----- ----------- ----- --------- ---- -- - ---- -------- ----- -------- ----------- ----- --------- ---- -- - ---- ----------- ----- ----------- ----------- ----- --------- ----- --------------- -------------------- -------- -------------- -- -- - ---- ----------- ----- -- ---------- ----------- ----- --------- ----- --------------- ------------- -- --
如上代码所示，我们引入了 Filters 、NumericFilter 和 AutoCompleteFilter 组件，然后定义了一个包含四个字段的 columns，启用了 filterable 来使这些字段可以过滤。其中 priority 通过 AutoCompleteFilter 来进行过滤，complete 通过 NumericFilter 来进行过滤。最后传入 columns、rows 和 rowGetter 即可渲染出支持过滤的表格。
总结
本文介绍了如何使用 react-data-grid-extensions 来扩展 React-data-grid 的功能，包括增加复选框、单元格编辑、排序、过滤等功能。这些功能为我们开发复杂的表格应用提供了更多的支持。
完整示例代码请参见 GitHub。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e7a