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

Question

我遇到了一种情况，我想添加一个指向 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}
        />
    );
}