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

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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值