sm-tablefilter/src/Tablefilter.jsx

This is the package for table with filter option.

import React, { useState, useEffect } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import WOW from "wowjs";
import "wowjs/css/libs/animate.css";

const TableFilter = ({ jsondata }) => {
    const { id, tableData, wow_animation, wow_duration, wow_delay } = jsondata;

    const [filteredData, setFilteredData] = useState(tableData);
    const [categoryFilter, setCategoryFilter] = useState("");
    const [yearFilter, setYearFilter] = useState(0);
    const [currentPage, setCurrentPage] = useState(1);

    const itemsPerPage = 10;
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);

    useEffect(() => {
        const wow = new WOW.WOW({ live: false });
        wow.init();
        let updatedData = tableData;
        if (categoryFilter !== "") {
            updatedData = updatedData.filter(item => item.category === categoryFilter);
        }
        if (yearFilter !== 0) {
            updatedData = updatedData.filter(item => item.year === parseInt(yearFilter));
        }
        setFilteredData(updatedData);
    }, [categoryFilter, yearFilter, tableData]);

    const handleCategoryChange = e => {
        setCategoryFilter(e.target.value);
        setCurrentPage(1);
    };

    const handleYearChange = e => {
        setYearFilter(parseInt(e.target.value));
        setCurrentPage(1);
    };

    const handlePrevPage = () => {
        setCurrentPage(prevPage => prevPage - 1);
    };

    const handleNextPage = () => {
        setCurrentPage(prevPage => prevPage + 1);
    };

    const renderTableData = () => {
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        return filteredData.slice(startIndex, endIndex).map((item, index) => (
            <tr key={index}>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>{item.description}</td>
                <td><a className="text-decoration-none text-reset" href={item.url} target="_blank" rel="noreferrer">{item.url}</a></td>
                <td>{item.category}</td>
                <td>{item.year}</td>
            </tr>
        ));
    };

    const sortedYears = Array.from(new Set(tableData.map(item => item.year))).sort((a, b) => a - b);

    return (
        <section id={id} className="test-tablefilter wow">
            <div className="container-fluid">
                <div className="row">
                    <div className="col-12">
                        <div className="py-2">
                            <label className="my-1">
                                Category :
                                <select className="mx-2 my-1 form-select-sm" aria-label="Default select example" value={categoryFilter} onChange={handleCategoryChange}>
                                    <option value="">All</option>
                                    {Array.from(new Set(tableData.map(item => item.category))).map(category => (
                                        <option key={category} value={category}>
                                            {category}
                                        </option>
                                    ))}
                                </select>
                            </label>
                            <label className="my-1">
                                Year :
                                <select className="mx-2 my-1 form-select-sm" aria-label="Default select example" value={yearFilter} onChange={handleYearChange}>
                                    <option value={0}>All</option>
                                    {sortedYears.map(year => (
                                        <option key={year} value={year}>
                                            {year}
                                        </option>
                                    ))}
                                </select>
                            </label>
                        </div>
                        <div className={`table-responsive wow ${wow_animation}`} data-wow-duration={wow_duration} data-wow-delay={wow_delay}>
                            <table className="table table-bordered table-striped table-hover" >
                                <thead className="table-dark">
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>URL</th>
                                        <th>Category</th>
                                        <th>Year</th>
                                    </tr>
                                </thead>
                                <tbody>{renderTableData()}</tbody>
                            </table>
                        </div>
                        <div className="py-1">
                            <button className="my-1 btn btn-dark" onClick={handlePrevPage} disabled={currentPage === 1}>
                                Previous
                            </button>
                            <span className="mx-2 my-1">{`Page ${currentPage} of ${totalPages}`}</span>
                            <button className="my-1 btn btn-dark" onClick={handleNextPage} disabled={currentPage === totalPages}>
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

TableFilter.defaultProps = {
    jsondata: {
        tableData: [
            {
                id: 1,
                title: "Default_Title_1",
                description: "Default_Description_1",
                url: "https://example.com/1",
                category: "Education",
                year: 2004
            },
            {
                id: 2,
                title: "Default_Title_2",
                description: "Default_Description_2",
                url: "https://example.com/2",
                category: "Sports",
                year: 2003
            },
            {
                id: 3,
                title: "Default_Title_3",
                description: "Default_Description_3",
                url: "https://example.com/3",
                category: "Innovation",
                year: 2001
            },
            {
                id: 4,
                title: "Default_Title_4",
                description: "Default_Description_4",
                url: "https://example.com/4",
                category: "Entrepreneurship",
                year: 2005
            },
            {
                id: 5,
                title: "Default_Title_5",
                description: "Default_Description_5",
                url: "https://example.com/5",
                category: "Cultural",
                year: 2002
            }
        ]
    }
}

export default TableFilter;