反应表过滤和响应

shu*_* AK 9 javascript reactjs

我想使用具有以下功能的react创建表

  • 使用名称过滤器搜索过滤器
  • 下拉过滤器使用状态
  • 单击列标题时的升序和降序排序.
  • 使表响应

您可以假设以下数据 - var data = [{name:'zz',state:'ua'},{name:'hhj',state:'op'}]

我搜索以下反应插件的表功能 -

在github上看星星时,似乎反应扒炉更好但是实现目标的最佳插件什么

Die*_*tiz 8

我花了一整天的时间阅读所有可用的超过100个星星或叉子的插件。我一直在使用react-table过去的几个月,但几个月以来都没有更新,他的创建者在一个问题中写道,他计划在6个月内发布升级(对我们中有些人来说太晚了)。

较难找到的要求是“使表响应”。然后,只有两个满足此要求:react-data-gridtabulator。这两个存储库都是在2年前创建的,具有1000多次提交,并在上周进行了更新。

react-data-grid:它没有完全响应,但至少保持第一列固定,它具有专门为React编写的非常好的演示和文档

tabulator:它具有完全响应功能,并带有一个名为“ 响应式布局折叠列表”的选项,但其文档不是专门为React编写的,因为它也可以与Vue和Angular一起使用。

TL:DR; 对于高级前端tabulator开发人员,我建议,对于初级开发人员,建议react-data-grid不要为创建表而费劲

  • 现在有一个Tabulator的React包装器,看看https://github.com/ngduc/react-tabulator#readme (2认同)

ris*_*rri 5

你试过查看 ReactTable 吗?

当单击列标题时,ReactTable 表具有用于升序/降序排序的内置功能。

在创建搜索过滤器方面,它也具有该功能。

您可能必须自己构建下拉过滤器,但我相信 ReactTable 应该为您提供一个基础来完成您想要做的大部分事情。

不过,React-table 不提供响应宽度。

我希望这有帮助!