首页 > 其他分享 >我作为 React 开发人员用来创建数据表的库

我作为 React 开发人员用来创建数据表的库

时间:2022-09-23 11:59:14浏览次数:92  
标签:开发人员 React 数据表 优点 文档 组件 数据

我作为 React 开发人员用来创建数据表的库

在本文中,我将讨论自 2018 年以来我用来在 React 应用程序中创建数据表的顶级 React 库。如今手动创建数据表并不是一种明智的方法,因为有许多完全准备好的库可用。我会尽我所能介绍他们每个人的优点和缺点。

钢筋混凝土表

Rc-Table 是一个有用的小型 React Table 库,它带有一组基本功能,可帮助您创建结构良好的 React 表。你可以很容易地给它你自己的样式。这个库的另一个好特性是它非常容易理解和启动。

优点

  • 非常轻巧;
  • 文档中有许多带有源代码的示例;
  • 快速跳转到实际开发;
  • 有限的社区

缺点

  • 文档不是很好。有些功能根本没有描述。

材料表

Material table 是最流行的 React 表库之一,它由 Material Design 和 Material-UI 组件组成。它非常易于安装,并且材料表具有丰富的文档,这将提高开发速度。

优点

  • 功能丰富;
  • 预构建导出为 CSV;
  • 强大的文档。

缺点

  • 组件覆盖;
  • 不是每个人都是 Material UI 的粉丝。

反应数据表

React-datasheet 类似于 react-data-grid。它有很多 GitHub 明星,维护良好,并且拥有一个非常高效的社区。通过阅读它的名字,你已经注意到这个库的主要目的是帮助你在 React 上制作类似 Google Sheet/Excel 的应用程序。它带有预建的样式和功能。尽管要记住的是,该库不适合功能有限的基本小型表。

优点

  • 有据可查;
  • 好看的用户界面;
  • 良好的定制;
  • 预建公式表。

缺点

  • 仅限于特定用例;
  • 不适合大型数据集。

Kendo React Grid 组件

对于 React 开发人员来说,Kendo React Grid 组件是最强大的数据网格组件之一。它具有相当复杂的特性,例如调整列的大小和重新排序、列和上下文菜单、显示分层数据。这个库最好的地方是符合许多开箱即用的安全性和可访问性标准。

优点

  • 零依赖;
  • 100+ 种功能可以有效地操纵比特量的数据;
  • 文档非常(!)结构良好且全面;
  • 您选择的3个主题;
  • 专门的支持团队选项。

缺点

  • 价格有点高;
  • 我们假设自定义样式的实现可能有点棘手。

反应数据网格

要创建类似于 google 电子表格和 MS excel 的应用程序,您可以使用 React Data Grid。它具有广泛的特性,如数据绑定、编辑、类 Excel 过滤、自定义排序、行聚合、Excel、CSV 和 PDF 格式收集,并支持

优点

  • 闪电般的渲染速度;
  • 丰富的编辑和格式化;
  • 可配置和可定制;
  • 包含 excel 功能,包括单元格复制和粘贴。

缺点

  • 复杂地启动表的开发;
  • 文件差;
  • 默认不支持分页;
  • 它不容易定制。

主要特征

  • 类似 Excel 的过滤和分组选项;
  • 任何格式的数据导出:PDF、CSV和Excel;
  • 列的内联编辑;
  • 支持无限长表格行的虚拟渲染;
  • 使用 Bootstrap 进行样式设置。

反应虚拟化

对于大型数据集,React-virtualized 可能是最好的 React 表库,并且针对性能进行了大量优化。如果我说这个库不完全是一个表格库,我可能没有错。基本上,它是用于高效渲染大型列表和表格数据的 React 组件。如果您想管理大量数据,请考虑使用此库。它有全面的文档。它在 Github 上拥有超过 18k 颗星。

Rsuite反应表

这是 React Table 的一个组件,它带有虚拟化、固定列和标题、树视图等等。这个库最好的地方是它带有很多关于每个特性的例子。

优点

  • 库提供排序、可扩展的子节点和 RTL;
  • 包含许多示例的详细文档;
  • 里面有很多预建的组件。

缺点

  • 自定义这个库可能有点挑战;
  • 没有大的社区和图书馆的积极发展。

DevExtreme React 数据网格

基本上 DevExtreme React Grid 也是一个组件,它的主要任务是显示来自本地或远程源的表数据。它具有分页、排序、过滤、分组和其他数据生成选项、行选择和数据编辑等功能。它还提供内置的 Bootstrap 和 Material-UI 渲染功能和主题创建。

优点

  • 纯反应;
  • 虚拟滚动;
  • 多列排序和分组;
  • 树视图模式
  • 自定义 UI 渲染。

布林顿网格

Bryntum Grid 是一个强大的高性能表格组件。最好的一点是它可以处理 100k+ 行数据而不会失去良好的用户体验。它是用 vanilla Javascript 开发的,所以它对框架持怀疑态度。但是,它带有 React 包装器,可以无缝集成到您的项目中。该表的主要缺点是它不是一个纯粹的反应应用程序,而且它是一个付费库。对于这笔钱,您需要纯反应表组件。

优点

  • 锁定/冻结列;
  • 单元格编辑;
  • 自定义单元格渲染;
  • 专门的支持;
  • 使用 SASS 轻松进行分页主题化。

反应表

React Table 是 React 中最著名的表库之一。在 GitHub 上有超过 15,000 颗星。它是一个非常轻量级的库,并提供了任何简单表所需的所有基本特征。它还支持 Hooks,在版本 7 之后。React-table 的另一个重要特征是插件生态系统:如果您想扩展网格的功能,只需添加必要的钩子即可。

优点

  • 易于定制;
  • 无头方法;
  • 支持透视和聚合;
  • 广泛的插件生态系统;
  • 轻量级(5kb — 14kb+,取决于使用的功能)。

缺点

  • 在某些情况下,文档是有限的;
  • 我们认为,此表不适合大型数据集。

买一杯咖啡给我

如果你喜欢我的文章。我会很感激喝杯咖啡来帮助我继续写作。

[

Imran Farooq 喜欢写 React js

嘿 如果您喜欢我在 medium.com/@imranfarooq0306 上的文章。我会很感激一杯咖啡来帮助我保持……

www.buymeacoffee.com

](https://www.buymeacoffee.com/imranfarooq0306)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/38854/43432311

标签:开发人员,React,数据表,优点,文档,组件,数据
From: https://www.cnblogs.com/amboke/p/16722203.html

相关文章

  • 将带有 ExpressJS 后端的 React 应用程序从 Heroku 迁移到 Netlify
    将带有ExpressJS后端的React应用程序从Heroku迁移到NetlifyPhotoby克里斯布里格斯on不飞溅Heroku将开始对HerokuDynos收费,这是运行节点服务器所需的资......
  • React 受控组件和非受控组件
    受控组件在HTML中,表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。而在React中,这些输入表单元素的值,应该保存在state中,并且只能由se......
  • react-native 实现环形(圆形)进度条
    废话不多说,直接上硬货:效果图   安装 react-native-anchor-point用于处理旋转中心点位置yarnaddreact-native-anchor-pointgithub仓库地址: https://github......
  • rxjs 在 react 下的应用
    设置一个subject,然后在组件内定义一个subscription想要发送事件就用subject.next订阅就赋值subject.asObservable().subscribe()直接看代码constsubject=ne......
  • 快速上手React编程 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1R4B-izNpESydo-yFNmU8xw点击这里获取提取码 ......
  • 教你如何实现react Scheduler(二)
    在上一篇文章中“反应调度程序(1)”中,我们使用MessageChannel来实现一个简单的任务调度功能。但是这个功能目前还是比较简单的,现在我们来改进一下,给任务增加优先级和过期......
  • 使用 PNPM 将 React App 中的磁盘空间减少 60%
    使用PNPM将ReactApp中的磁盘空间减少60%在React应用程序中使用PNPM减少磁盘空间的教程。Photoby诺德伍德主题on不飞溅您是否正在处理具有共同依赖项的......
  • 软件开发人员的 5 个次要/被动收入理念
    软件开发人员的5个次要/被动收入理念PhotobyPixabay这些天来,似乎每个人都在寻找赚更多钱的方法,自Covid来袭以来,被动收入和次要收入已成为热门话题。这对于寻找收......
  • React + Eartho 与 3 个简单的步骤集成
    React+Eartho与3个简单的步骤集成如果您已经关注并访问了您的第一个地球和React经验,那么我相信你会感觉很棒。它一次为开发人员提供了许多好处。如果你有地球......
  • React 组件和更好的方法
    React组件和更好的方法Credits-eduba.com想了解react.js如何帮助创建令人惊叹的用户界面?它是如何让我们如此轻松高效地执行多项任务的?在本文中,我将介绍其中一个Re......