React data grid
主要功能:界面显示 Excel 预览,可以将一个对象或者 json 格式化成为界面。
安装
npm install react-data-grid --save
说明:本博文最早写于 2019年,对应 react-data-grid 版本是 5.x.x 或 6.x.x
博客更新于 2024年,react-data-grid 已经是 7.x.x 大版本,可能配置项已经更新,建议参考官方文档进行调整,https://github.com/adazzle/react-data-grid
基本使用
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];
const rows = [
{id: 0, title: 'row1', count: 20},
{id: 1, title: 'row1', count: 40},
{id: 2, title: 'row1', count: 60}
];
// 实际的标题和列都是实时获取的
function HelloWorld() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150}
/>
);
}
插件安装
npm install react-data-grid-addons --save
大部分的功能会集成在插件中,例如富表格编辑、右键菜单、拖拽功能、行分组管理等。未来这部分功能将分成多个包以供不同客户使用。