React data grid 使用

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

大部分的功能会集成在插件中，例如富表格编辑、右键菜单、拖拽功能、行分组管理等。未来这部分功能将分成多个包以供不同客户使用。