问题描述
我正在为我的项目创建一个网格,我需要在其中实施列过滤。我已经完成了大部分工作,但面临一个问题,即每当我单击 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
,因为我想在服务器端处理它们,但是手动排序和手动过滤器似乎不能一起工作,请参阅 { {1}} 第 37-39 行。
解决方法
我更改了代码
<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 Banerjee 解决方案开始,在同一列上进行过滤和排序工作,但意识到我仍然需要一些列属性保留在行标记上,而不是在 div 上。这对我有用(使用 Material 示例):
<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>