Skip to content

JPrisk/react-laravel-paginex

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Laravel Pagination with ReactJS (customizable)

react-laravel-paginex will provide you ability to easily create pagination from Laravel Pagination object.

Installation

npm i react-laravel-paginex

or

yarn add react-laravel-paginex

Usage

First import the Pagination component inside your React component.

import { Pagination } from 'react-laravel-paginex'

Then you'll be able to use pagination component.

Example:

<Pagination changePage={this.getData} data={data} />

changePage prop will run the function ( in our case is getData()) when new page selected.

getData() function example with axios.
    getData = (data) => {
        axios.get('getDataEndpoint?page=' + data.page).then(response => {
            this.setState({data:data});
        });
    }

data object must be Laravel default or API Resource Pagination object.

Example:
{
    current_page: 1
    data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",},]
    first_page_url: "http://example.com/getDataEndpoint?page=1"
    from: 1
    last_page: 10
    last_page_url: "http://example.com/getDataEndpoint?page=10"
    next_page_url: "http://example.com/getDataEndpoint?page=2"
    path: "http://example.com/getDataEndpoint"
    per_page: 20
    prev_page_url: null
    to: 20
    total: 200
}

or

{
    data: [
        {
            id: 1,
            name: "Eladio Schroeder Sr.",
            email: "[email protected]",
        },
        {
            id: 2,
            name: "Liliana Mayert",
            email: "[email protected]",
        }
    ],
    links:{
        first: "http://example.com/pagination?page=1",
        last: "http://example.com/pagination?page=1",
        prev: null,
        next: null
    },
    meta:{
        current_page: 1,
        from: 1,
        last_page: 1,
        path: "http://example.com/pagination",
        per_page: 15,
        to: 10,
        total: 10
    }
}

Customizations

You can customize your pagination styles by overwriting default values.

Available props for component:

Prop Name Default Value
containerClass pagination
buttonIcons false
prevButtonClass page-item
prevButtonText Prev
prevButtonIcon fa fa-chevron-left
nextButtonClass page-item
nextButtonText Next
nextButtonIcon fa fa-chevron-right
numberButtonClass page-item
numberClass page-link
numbersCountForShow 2
activeClass active
Example:

<Pagination changePage={this.getData} data={data} containerClass={"pagination-container"} />

You can use options prop by passing options object into it.

Example:

You have to define here only props which you want to overwrite.

options:{
    containerClass: "pagination-container",
    prevButtonClass: "prev-button-class",
    nextButtonText: "Next Page"
    ...
}

<Pagination changePage={this.getData} data={data} options={options} />

Example:

You can set your own request params for request

params = () => {
    return {
       keyword:this.state.keyword
    }
}

<Pagination changePage={this.getData} data={data} options={options} requestParams={this.params()} />

Credits

About

Laravel Pagination with ReactJS (customizable)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%