如何在 react-table 中为组件内容添加不区分大小写的过滤？

Question

我有一种情况，我想将 link 添加到 react-table 单元格并且仍然能够过滤它。这就是我现在拥有的：

const columns = [{
            Header: 'Header',
            accessor: 'data',
        }];

        const data = {
            data: <a href="#">Some text</a>,
        };

        return (
            <ReactTable
                columns={columns}
                data={data}
                filterable
            />
        );

Answer 1

好的，我通过使用 defaultFilterMethod:

让它工作了

filterCaseInsensitive = (filter, row) => {
    const id = filter.pivotId || filter.id;
    const content = row[id];
    if (typeof content !== 'undefined') {
        // filter by text in the table or if it's a object, filter by key
        if (typeof content === 'object' && content !== null && content.key) {
            return String(content.key).toLowerCase().includes(filter.value.toLowerCase());
        } else {
            return String(content).toLowerCase().includes(filter.value.toLowerCase());
        }
    }

    return true;
};
render() {
    const columns = [{
        Header: 'Header',
        accessor: 'data',
    }];

    const data = {
        data: <a href="#" key="Some text">Some text</a>,
    };

    return (
        <ReactTable
            columns={columns}
            data={data}
            filterable
            defaultFilterMethod={this.filterCaseInsensitive}
        />
    );
}

Answer 2

我使用了@Pablo 的答案，但由于它使用了 .includes()，我建议在搜索中添加一个长度边界。

我这样做是因为搜索包含单个字母的内容是一种不舒服的体验，这会 return 很多用户没有预料到的匹配项。

const fuzzy = (filter, row) => {
    const id = filter.pivotId || filter.id;
    const content = row[id];
    if (typeof content !== 'undefined') {

        if (filter.value.length < 3) {
            // filter by text in the table or if it's a object, filter by key
            if (typeof content === 'object' && content !== null && content.key) {
                return String(content.key).toLowerCase().startsWith(filter.value.toLowerCase());
            } else {
                return String(content).toLowerCase().startsWith(filter.value.toLowerCase());
            }
        } else {
            // filter by text in the table or if it's a object, filter by key
            if (typeof content === 'object' && content !== null && content.key) {
                return String(content.key).toLowerCase().includes(filter.value.toLowerCase());
            } else {
                return String(content).toLowerCase().includes(filter.value.toLowerCase());
            }
        }

    }

    return true;
};

如何在 react-table 中为组件内容添加不区分大小写的过滤？

How to add case insensitive filtering in react-table for components content?

components

filter

reactjs

react-table