Question

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

使用名称过滤器搜索过滤器
使用州的下拉过滤器
单击列标题时的升序和降序排序。
使表格响应

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

我在下面的反应插件中搜索表格功能 -

React Griddle（https://github.com/griddlegriddle/griddle）
反应数据网格（https://github.com/adazzle/react-data-grid）

在github上看星星时，似乎反击扒炉更好但实现目标的最佳插件？

Answer 1

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

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

react-table：它没有完全响应，但至少保持第一列固定，它有一个很好的演示和专门为React编写的文档

react-data-grid：它具有名为 Responsive Layout Collapsed List 的选项，可以完全响应，但它的文档不是专门为React编写的，因为它也可以与Vue和Angular一起使用。

>

TL：DR; 对于高级前端开发人员，我建议tabulator，对于初级开发人员，我建议tabulator尽量不要创建表 >

Answer 2

您是否尝试过研究ReactTable？

https://react-table.js.org/#/story/readme

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

在创建搜索过滤器方面，它也具有该功能：https://react-table.js.org/#/story/custom-filtering

您可能必须自己构建下拉过滤器，但我相信ReactTable应该为您提供完成您要做的大部分工作的基础。

我希望这有帮助！

Answer 3

您可以检查我基于material-ui库构建的表实现。

https://github.com/mbrn/material-table

Answer 4

我尝试了许多解决方案，但是，最简单的方法是反应表。

使用npm-npm i react-table安装React-table。参考：https://www.npmjs.com/package/react-table。

反应表自定义过滤解决方案-这就是我对react-table进行自定义过滤的方式。。

<ReactTable
          data={data}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName",
                  filterMethod: (filter, row) =>
                    row[filter.id].startsWith(filter.value) &&
                    row[filter.id].endsWith(filter.value)
                },

{
                  Header: "Over 21",
                  accessor: "age",
                  id: "over",
                  Cell: ({ value }) => (value >= 21 ? "Yes" : "No"),
                  filterMethod: (filter, row) => {
                    if (filter.value === "all") {
                      return true;
                    }
                    if (filter.value === "true") {
                      return row[filter.id] >= 21;
                    }
                    return row[filter.id] < 21;
                  },
                  Filter: ({ filter, onChange }) =>
                    <select
                      onChange={event => onChange(event.target.value)}
                      style={{ width: "100%" }}
                      value={filter ? filter.value : "all"}
                    >
                      <option value="all">Show All</option>
                      <option value="true">Can Drink</option>
                      <option value="false">Can't Drink</option>
                    </select>
                }

React table filtering＆amp;响应

4 个答案: