react-data-grid 是一个基于 React 的强大、灵活的数据表格组件，可以轻松地实现诸如排序、筛选、分页等常见的数据表格功能。
安装
在使用 react-data-grid 之前，请确保已经安装了 React 和 React-DOM。
你可以通过以下命令使用 npm 安装 react-data-grid：
npm install react-data-grid --save
基本用法
在使用 react-data-grid 时，首先需要引入相关的组件：
import React from 'react';
import ReactDOM from 'react-dom';
import { DataGrid } from 'react-data-grid';然后，你可以通过以下方式构建一个简单的数据表格：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ----- --- -------- -- --
-
------------------- -
-- ------- -----
-
-------- -
------ -
---------
----------------------------
----------------------
--
--
-
-
----------------------- --- ---------------------------------其中，columns 表示数据表格的列信息，rows 表示数据表格的行信息。
列定义
在 react-data-grid 中，每一列都需要定义一个对应的 Column 组件。Column 组件可以包含以下属性：
key：列的唯一标识。name：列的显示名称。width：列的宽度。sortable：是否可排序。filterable：是否可筛选。
例如，以下是一个包含两个列的数据表格：
const columns = [
{ key: 'id', name: 'ID', width: 100, sortable: true, filterable: true },
{ key: 'name', name: 'Name', width: 200, sortable: true, filterable: true },
];行定义
在 react-data-grid 中，每一行都需要定义一个对应的 JavaScript 对象。该对象的属性名应与列定义中的 key 属性值相同。例如，以下是一个包含两行数据的数据表格：
const rows = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
];排序
通过设置列定义中的 sortable 属性为 true，可以启用对该列的排序功能。
例如，以下是一个包含可排序列的数据表格：
-- -------------------- ---- -------
----- ------- - -
- ---- ----- ----- ----- ------ ---- --------- ----- ----------- ---- --
- ---- ------- ----- ------- ------ ---- --------- ----- ----------- ---- --
--
----- ---- - -
- --- -- ----- ------- --
- --- -- ----- --------- --
- --- -- ----- ----- --
--
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ----- --- -------- -- --
------------------- - -------------------------------
-
------------------- -
-- ------- -----
-
-------------------------- -------------- -
-- ----------- -----
-
-------- -
------ -
---------
----------------------------
----------------------
--------------------------------
--
--
-
-筛选
通过设置列定义中的 filterable 属性为 true，可以启用对该列的筛选功能。
例如，以下是一个包含可筛选列的数据表格：
-- -------------------- ---- ------- ----- ------- - - - ---- ----- ----- ----- ------ ---- --------- ----- ----------- ---- -- - ---- ------- ----- ------- ------ ---- --------- ----- ----------- ---- -- -- ----- ---- - - - --- -- ----- ------- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------