React data grid

React data grid

主要功能:界面显示 Excel 预览,可以将一个对象或者 json 格式化成为界面。

安装
npm install react-data-grid --save
基本使用
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

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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41697143/article/details/89556630