如何使用 react-data-table-component 设置类似 excel 的过滤器

Question

一直在搜索如何使用 react-data-table-component 制作类似 excel 的过滤器，并发现了一些有趣的东西，例如 .

不幸的是，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>

有什么建议吗？

Answer 1

FilterComponent 可以像

一样简单

const FilterComponent = ({ filterText, onFilter, onClear }) => (
    <div>
        <input
            type="text"
            value={filterText}
            onChange={onFilter}
        />
        <button type="button" onClick={onClear}>
            X
        </button>
    </div>
);

但是，如果您需要的话，我发现 FilterComponent 在 Examples/Filtering | React Data Table Components (also referred Button.js 上的官方实施。

const TextField = styled.input`
    height: 32px;
    width: 200px;
    border-radius: 3px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #e5e5e5;
    padding: 0 32px 0 16px;

    &:hover {
        cursor: pointer;
    }
`;

const ButtonStyle = styled.button`
    background-color: #2979ff;
    border: none;
    color: white;
    padding: 8px 32px 8px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 3px;
    &:hover {
        cursor: pointer;
    }
`;

const Button = ({ children, ...rest }) => <ButtonStyle {...rest}>{children}</ButtonStyle>;

const ClearButton = styled(Button)`
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 34px;
    width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
`;


const FilterComponent = ({ filterText, onFilter, onClear }) => (
    <>
        <TextField
            id="search"
            type="text"
            placeholder="Filter By Name"
            aria-label="Search Input"
            value={filterText}
            onChange={onFilter}
        />
        <ClearButton type="button" onClick={onClear}>
            X
        </ClearButton>
    </>
);

如何使用 react-data-table-component 设置类似 excel 的过滤器

How do I Setup a excel like filter using react-data-table-component

reactjs

react-data-table-component