react-data-pager

Installation

npm install --save react-data-pager

This library using react hooks. Note that to enable Hooks, all React packages need to be 16.8.0 or higher.

Prop Types

Prop	Type	Description
data	array	all the data you want
dataEachPage	arrayOf(number)	count of data you want to show in each page, you can set [10, 20, 30] and the client select how much data he want to see in each page
onChange	func	event that return the filtered data for the selected page
style	oneOfType(object, array)	set different style to container
selectedPageColor	string	set different color for the selected page
stylePager	oneOfType(object, array)	set different style to pager
styleNextPrevButton	oneOfType(object, array)	set different style to next and prev button like color and more, the buttons are svg
styleDataEachPage	oneOfType(object, array)	set different style to data each page

Example Code

demo

import React, { useState, useEffect } from 'react';
import DataPager from 'react-data-pager';

const App = () => {
  const [data, setData] = useState();
  const [showData, setShowData] = useState();

  const [dataPager_1, setDataPager_1] = useState();
  const [dataPager_2, setDataPager_2] = useState();
  const [dataPager_3, setDataPager_3] = useState();

  useEffect(() => {
    fetch('http://api.tvmaze.com/shows', {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    })
      .then(res => res.json())
      .then(res => {
        const show_100 = res.length > 100 ? res.slice(0, 100) : res;
        setShowData(show_100);
        const showName = show_100.map(show => show.name);
        setData(showName);
      })
      .catch(err => console.error(err));
  }, [])

  const ShowTable = ({ dataTable }) => {
    return (
      <table border={1} style={{ width: '100%' }}>
        <thead>
          <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Language</th>
            <th>Genres</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          {dataTable && dataTable.map((show, index) => <tr key={index} >
            <td><img style={{ height: '100px' }} src={show.image.medium} /></td>
            <td>{show.name}</td>
            <td>{show.language}</td>
            <td><ul> {show.genres.map(item => <li key={item}>{item}</li>)}</ul></td>
            <td>{show.rating.average}</td>
          </tr>)}
        </tbody>
      </table>
    );
  }

  return (
    <div>
      <div style={{ textAlign: 'center' }}>
        {dataPager_1 && dataPager_1.map((showName, index) => dataPager_1.length - 1 === index ? showName : `${showName}, `)}
      </div>

      <DataPager
        data={data}
        onChange={e => setDataPager_1(e)}
        style={{ marginTop: '5px' }}
      />

      <div style={{ textAlign: 'center', marginTop: '15px' }}>
        <ShowTable dataTable={dataPager_2} />
      </div>

      <DataPager
        data={showData}
        dataEachPage={[5]}
        onChange={e => setDataPager_2(e)}
        selectedPageColor='#00ff00'
        style={{ width: '30%', margin: 'auto', marginTop: '5px' }}
        stylePager={{ width: '100%' }}
      />

      <div style={{ textAlign: 'center', marginTop: '15px' }}>
        <ShowTable dataTable={dataPager_3} />
      </div>

      <DataPager
        data={showData}
        dataEachPage={[5, 10, 15]}
        onChange={e => setDataPager_3(e)}
        selectedPageColor='#dd0d00'
        style={{ width: '50%', margin: 'auto', marginTop: '5px' }}
        stylePager={{ width: '50%', borderRadius: '0', backgroundColor: '#d8d8d8' }}
        styleNextPrevButton={{ color: '#02ddd2' }}
        styleDataEachPage={{ borderRadius: '0', backgroundColor: '#d8d8d8' }}
      />
    </div>
  );
}


export default App;