React 表正在按过滤器排序答案

【问题标题】：React table is getting sorted on filterReact 表正在按过滤器排序
【发布时间】：2021-05-02 08:32:17
【问题描述】：

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

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

ColumnFilter.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 行.

【问题讨论】：

标签： reactjs datagrid react-table react-table-v7

【解决方案1】：

我更改了代码

<th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>
    {column.render("Header")}
    <span>
        {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " ?" : "  " : " ⇵"}
    </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 ? " ?" : "  " : " ⇵"}
        </span>
    </div>
    <div>
        {column.canFilter ? column.render("Filter") : null}
    </div>
</th>

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

【讨论】：

嗨 Polly，我在 React 中遇到了一个与 React-Table 中的行排序有关的问题 - stackoverflow.com/q/68359658/1649217

【解决方案2】：

我从@Polly Banerjee 解决方案开始在同一列上进行过滤和排序工作，但我意识到我仍然需要一些列属性保留在行标记上，而不是保留在 div 上。这对我有用（使用材料示例）：

<TableRow {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => (
            <TableCell
            {...column.getHeaderProps([
              {
                className: column.className,
                style: column.style,
              },
              getColumnProps(column),
              getHeaderProps(column),
            ])}
            >
            <span {...column.getHeaderProps([
                column.getSortByToggleProps()
              ])}>
              {column.render('Header')}
              {column.id !== 'selection' ? (
                <TableSortLabel
                  active={column.isSorted}
                  // react-table has a unsorted state which is not treated here
                  direction={column.isSortedDesc ? 'desc' : 'asc'}
                />
              ) : null}
              </span>
              {/* Render the columns filter UI */}
              <div>{column.canFilter ? column.render('Filter') : null}</div>
            </TableCell>
          ))}
        </TableRow>

【讨论】：