NimaPrmi

Create a React Pagination

First of all Install Lodash

npm i lodash

Also Create This files

• Table.jsx
• TablePagination.jsx
• paginate.js
• data.js

Setup our Table.jsx

In our Table.jsx we will render our data from data.js and display it to client

const [allProjects, setAllProjects] = useState(projects);// Projects is a array that includes all projects from data.js
const [currentPage, setCurrentPage] = useState(1); // current page that we are viewing 
const [pageSize, setPageSize] = useState(3); // Items in our to render 

And also include:

const handlePageChange = (page) => {
    setCurrentPage(page); // Will set current viewing page based on pagination click
};

Ok here we render FILTERED Projects from paginate.js function (Don’t worry will explain it)

const paginatedProjects = paginate(allProjects, currentPage, pageSize);

Finally mapping our data

Here you can map the filtered data in your table or any other situation that you want:

{paginatedProjects.map((project, index) => {
    return (
        <tr key={index}>
            <td>Projects Is {project.id}</td>
            <td>{project.id}</td>
            <td>{project.name}</td>
            <td>{project.desc}</td>
        </tr>
    );
})}

After your table please call TablePagination.jsx like:

<TablePagination
    allProjects={allProjects}
    pageSize={pageSize}
    currentPage={currentPage}
    onPageChange={(e) => handlePageChange(e)}
/>

Setup our TablePagination.jsx

Here we will render our page numbers and get passed props that we send via Table.jsx

const { allProjects, pageSize, currentPage, onPageChange } = props; // Get props from table.jsx
const pagesCount = Math.ceil(allProjects.length / pageSize); // calculate pages count All Projects Length / pageSize 

const pages = _.range(1, pagesCount + 1); // create an array of numbers progressing from the given start value

Also we will render our pagination items like:

{pages.map((page, index) => {
    return (
        <li onClick={() => onPageChange(page)} key={index} active={page === currentPage}>
            {page}
        </li>
    );
})}

Create a React Category Sorting

First we create a component called ListGroup.jsx and in the component will render category list items

Also we send these props to this component and get them inside in the component

// Inside of the ListGroup.jsx
const { items, textProperty, valueProperty, onItemSelect, selectedItem } = props;

// Return of the ListGroup.jsx
{items.map((item, index) => {
    return (
        <li
            onClick={() => onItemSelect(item)}
            key={index}
            className={item === selectedItem ? "list-group-item active" : "list-group-item "}
        >
            // Note that we used bracket notation from props so it is more flexible
            {item[textProperty]}
        </li>
    );
})}

At the end of this component also we call the default props values so that we can reuse them in fututure in other projects as well 🙂

// Before the export default in ListGroup.jsx
ListGroup.defaultProps = {
    textProperty: "name",
    valueProperty: "_id",
};

Then we call the component inside the table (or where ever that we want to render categories) in our parent component.

// Inside of the Table.jsx

// this function will change the state based on the selected genre 
handleGenreSelect = (genre) => {
    this.setState({ selectedGenre: genre, currentPage: 1 });
};

// first we detect is there a category ? then if true then we get datas that match to the category (Simple as that)
const filtered =
            selectedGenre && selectedGenre._id ? allMovies.filter((m) => m.genre._id === selectedGenre._id) : allMovies;

// We can map the filtered variable or pass it to the (paginate) functions that we wrote to paginate it. 

// In Return of the table.jsx
<ListGroup
    items={this.state.genres}
    selectedItem={this.state.selectedGenre}
    onItemSelect={this.handleGenreSelect}
/>

And we are done here! You can use this diagram to understand concept of the pagination and this GitHub repo to use it in your projects also you can visit demo as well .