0

一直在寻找如何使用 react-data-table-component 制作类似 excel 的过滤器，并发现了一些有趣的东西，例如使用 react-data-table-component 进行数据表过滤。

不幸的是，该FilterComponent组件似乎已被弃用，因为除了断开的链接之外我找不到任何关于它的东西，这对于这样一个有趣的功能来说很奇怪。

我的代码如下：

const columns = Properties.columns;
const getSubHeaderComponent = () => {
    return (
        <FilterComponent
            onFilter={(e) => {
                let newFilterText = e.target.value;
                filteredItems = statements.filter(
                    (item) =>
                    item.name &&
                    item.name.toLowerCase().includes(newFilterText.toLowerCase())
                );
                this.setState({ filterText: newFilterText });
            }}
            onClear={handleClear}
            filterText={filterText}
        />
    );
};

return (

    <div>
        <div className="row justify-content-md-center statements-table">
            <div className="col-md-10">
                <DataTable
                    columns={columns}
                    data={statements}
                    customStyles={Properties.customStyles}
                    fixedHeader
                    fixedHeaderScrollHeight="47em"
                    pagination
                    subheader
                    subHeaderComponent={getSubHeaderComponent()}
                    paginationPerPage={100}
                    paginationRowsPerPageOptions={[100, 500, 1000]}
                    subHeader
                    noHeader
                />

            </div>
        </div>

有什么建议么？

4

0 回答 0