时间戳

首页 > 解决方案 > React 表正在按过滤器排序

reactjs - React 表正在按过滤器排序

问题描述

我正在为我的项目创建一个网格，我需要在其中实现列过滤。我已经完成了大部分工作，但面临一个问题，即每当我单击 ID 列的过滤器输入框时，该列都会被排序。我尝试过使用e.stopPropagation()，但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到，代码在https://codesandbox.io/s/data-table-forked-4hz20

列过滤器.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

另外我正在使用manualFilters: true，manualSortBy: true并且manualPagination: true因为我想在服务器端处理它们，但是手动排序和手动过滤器似乎不能一起工作，请参阅DataGrid.js第 37-39 行。

标签： reactjsdatagridreact-tablereact-table-v7

解决方案

我将代码从

<th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>
    {column.render("Header")}
    <span>
        {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " " : "  " : " ⇵&quot;}
    </span>
    <div>
        {column.canFilter ? column.render("Filter") : null}
    </div>
</th>

至

<th scope="col">
    <div {...column.getHeaderProps(column.getSortByToggleProps())}>
        {column.render("Header")}
        <span>
            {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " " : "  " : " ⇵&quot;}
        </span>
    </div>
    <div>
        {column.canFilter ? column.render("Filter") : null}
    </div>
</th>

将所需元素包装在 div 中并传递{...column.getHeaderProps(column.getSortByToggleProps())}给它。

推荐阅读