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

Question

Been searching on how to make a excel like filter using react-data-table-component, and found something interesting, like Data Table filtering using react-data-table-component.

Unfortunately, the FilterComponent Component seems to be deprecated, since I can't find anything regarding it but broken links, which is weird for such a interesting feature.

My code is the following:

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>

Any suggestions?

Avinash Thakur · Accepted Answer · 2022-03-08 19:51:48Z

0

+50

FilterComponent could be something as simple as

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

However, I found following official implementation of FilterComponent on Examples/Filtering | React Data Table Components (also referred Button.js) if you need it like that.

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>
    </>
);

answered Mar 8, 2022 at 19:51

Avinash Thakur

2,1991 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Artur Peniche Over a year ago

hi! Thanks for the answer! I was hoping to add the filter option to each column, and not a general one (like excel). Guess that isn't possible with DataTable?

Avinash Thakur Over a year ago

That should also be possible. Btw, DataTable only allows you to visualise content. Any kind of filtering is done outside the DataTable.

Artur Peniche Over a year ago

that's a shame, guess I will need to work on another component. Thanks for helping

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related