React 表过滤和响应式

Question

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

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

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

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

• React Griddle (https://github.com/griddlegriddle/griddle)
• React 数据网格 (https://github.com/adazzle/react-data-grid)

在 github 上查看星星时，似乎 react griddle 更好，但 实现目标的最佳插件是什么？

Answer 1

我花了一天时间阅读所有可用的插件，这些插件有超过 100 颗星或分叉。过去几个月我一直在使用react-table，但它已经有几个月没有更新了，他的创建者在一个问题中写道，他计划在 6 个月内发布升级（对我们中的一些人来说太晚了）。

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

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

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

TL:DR; 对于高级前端开发人员，我会推荐 tabulator，对于初级开发人员，我会推荐 react-data-grid，因为不要费力地创建表格

Answer 2

您是否尝试过研究 ReactTable？

ReactTable 表格具有内置功能，可在单击列标题时进行升序/降序排序。

就创建搜索过滤器而言，它也具有该功能。

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

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

我希望这会有所帮助！

Answer 3

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

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

Answer 4

我尝试了很多解决方案，但是，我最简单的一个是 react-table。

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

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>
                }