javascript 反应表过滤和响应

React table filtering & responsive

提问by shubham AK

I want to create table using reactthat should have following functionality

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

• search filter using name filter
• dropdown filter using states
• ascending and descending order sorting when clicking on the column header.
• Make table responsive

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

You can assume following data - var data = [{name: 'zz',state: 'ua'},{name: 'hhj',state: 'op'}]

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

I've search following react plugins for table functionality -

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

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

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

While looking into stars at the github, It seems react griddleis better but What would be best plugin to achieve the goal?

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

回答by Diego Ortiz

I spent the day reading about all the plugins available with more than 100 stars or forks. I've been using react-tablethe last months but it hasn't been updated in months, his creator wrote in an issue that he's planning to release the upgrade in 6 months (too late for some of us).

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

The requirement more difficult to find is "make table responsive". Only two of then fulfilled this requirement: react-data-gridand tabulator. Both repositories were created more than 2 years ago, have more than 1000 commits and have been updated during the last week.

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

react-data-grid: Its not fully responsive but at least it keep the first column fixed, it has a very good demo and documentation written specifically for React

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

tabulator: Its full responsive with an option called Responsive Layout Collapsed Listbut its documentation is not written specifically for React, since it can be used with Vue and Angular too.

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

TL:DR;For an advanced front-end dev I would recommend tabulator, for a junior developer I would recommend react-data-gridto not struggle creating your tables

TL：博士；对于高级前端tabulator开发人员，我会推荐，对于初级开发人员，我会建议react-data-grid不要为创建表格而烦恼

回答by rishikarri

Have you tried looking into ReactTable?

你试过查看 ReactTable 吗？

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

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

ReactTable tables have built-in functionality for ascending / descending order-sorting when clicking on the column header.

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

In terms of creating a search filter, it has that functionality as well: https://react-table.js.org/#/story/custom-filtering

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

You may have to build the dropdown filter yourself but I believe ReactTable should provide you with a base to complete most of what you are looking to do.

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

React-table doesn't offer responsive width, though.

但是，React-table 不提供响应宽度。

I hope this helps!

我希望这有帮助！

回答by mehmet baran

You can check my table implementation that build on material-ui library.

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

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

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

回答by Magnus Melwin

I have tried many solutions, however, the easiest one I had got working, was react-table.

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

Install React-table using npm - npm i react-table. Ref: https://www.npmjs.com/package/react-table.

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

React table Custom filtering solution - This is how I did a custom filter with 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>
                }