从搜索按钮在 react-data-table-component 中搜索数据？

Question

我想创建一个搜索按钮来使用 get rest api 在 react-data-table-component 中搜索数据。到目前为止，当用户在它搜索并获取所有数据的页面上单击 user_tab 时，我做了什么。

Answer 1

对于搜索，您需要将数组对象传递给按条件过滤的 table。有两种方式：

一个是您获取所有记录，然后在您当地的州应用条件并根据搜索进行过滤。您将向您的 table 传递一个过滤后的数组，表示一个 newArray 或 newObject。
第二种也是推荐的搜索方式是，您在服务器端创建一个端点并发送对特定数据的请求。

Answer 2

我知道这是不久前发布的，但您可以使用 React Data Table 组件扩展，它将过滤整个 table 的所有数据，无论您是否正在使用来自 API 或模拟数据的数据。你可以阅读它 here 基本上，在你安装库之后你会运行

$ npm install react-data-table-component-extensions

语法大致如下：Codepen

import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";

import { columns, data } from "./data";

import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <div className="main">
        <DataTableExtensions
          columns={columns}
          data={data}
          print={false}
          export={false}
        >
          <DataTable
            // columns={columns}
            // data={data}
            noHeader
            // defaultSortField="id"
            // defaultSortAsc={false}
            pagination
            highlightOnHover
          />
        </DataTableExtensions>
      </div>
    );
  }
}

还有 BOOM，你有一个与你的数据完美配合的过滤器Table

从搜索按钮在 react-data-table-component 中搜索数据？

Searching data in react-data-table-component from search button?

sharepoint

reactjs