概述
在前端开发中，数据表格是一个常见的组件，React Data Grid 是一个基于 React 的数据表格组件库，提供多种可定制的功能，比如排序、过滤、分页等。其中 @react-data-grid/core 是其中的核心组件，提供了数据表格基础功能和 API。本文将介绍如何使用 npm 包 @react-data-grid/core 实现一个基本的数据表格。
安装与引入
在使用 @react-data-grid/core 之前，需要先安装它。可以使用 npm 或 yarn 安装，下面以 npm 为例：
npm install @react-data-grid/core
安装完成后，我们需要引入它：
import { DataGrid } from '@react-data-grid/core';使用
@react-data-grid/core 提供了 DataGrid 组件，我们可以通过定义其属性来配置数据表格。下面是一个基本的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------------
------ -------------------------------------------------
----- ------- - -
- ---- ----- ----- ---- --
- ---- -------- ----- ------- --
- ---- ----------- ----- ---------- --
--
----- ---- - -
- --- -- ------ ----- --- --------- ----- --
- --- -- ------ ----- --- --------- ----- --
- --- -- ------ ----- --- --------- ---- --
- --- -- ------ ----- --- --------- ----- --
--
-------- ----- -
------ -
---- -------- ------- --- ---
--------- ----------------- ----------- --
------
--
-
------ ------- ----在这个例子中，我们先定义了表格的列和行数据，然后使用 DataGrid 组件渲染表格。其中，columns 是一个数组，每个元素表示一列，包含 key 和 name 两个属性，分别表示数据字段和列名。rows 是一个数组，每个元素表示一行，包含与 columns 中对应的属性值。
渲染结果如下图所示：
不难看出，这个表格已经具备了基本的功能，比如行选择、列排序等。
定制
虽然 @react-data-grid/core 的功能已经足够强大，但我们仍然可以通过定制来满足更复杂的需求。下面是一些常见的定制操作。
自定义单元格
我们可以通过 column 节点的 formatter 属性来定义单元格的渲染方式。例如，在上面的例子中，我们可以将 complete 列渲染成 checkbox 的形式：
-- -------------------- ---- -------
----- ------- - -
- ---- ----- ----- ---- --
- ---- -------- ----- ------- --
-
---- -----------
----- -----------
---------- -- ----- -- -- -
------ --------------- --------------- -------- --
--
--
--渲染结果如下图所示：
自定义样式
我们可以通过 style 节点的属性来定义表格的样式。例如，我们想将表格的背景色改为灰色：
<DataGrid columns={columns} rows={rows} style={{ backgroundColor: 'gray' }} />自定义事件
我们可以通过 onXXX 属性来定义事件回调函数，例如：
<DataGrid
columns={columns}
rows={rows}
onSelectedRowsChange={({ selectedRows }) => console.log(selectedRows)}
/>这里定义了 onSelectedRowsChange 事件回调函数，当选中行改变时，会触发这个函数。
总结
@react-data-grid/core 是一个功能强大、易于使用的数据表格组件库。本文介绍了它的基本使用方法和常见的定制操作。希望能对广大前端开发者有所帮助。完整示例代码如下：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c0181e8991b448e5b34