CODEWITHSUNDEEP
react-native
Rob
Rob

Reputation: 159

How can i paginate table

I have the following code to display data from json file, i have more that 500 records i want to display 10 records per page. Here is my project in [code pen][1] . I tried react-pagination library but that doesn't work. what is the best way to do this? Open to use any library recommended -- i tried almost all of them.

here is how my code looks like

Upvotes: 0

Views: 226

Answers (3)

SiddAjmera
SiddAjmera

Reputation: 39432

You could have something along the lines of an index and offset and then create chunks of your array.

Give this a try:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import cardData from "./response.json";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    const offset = 5;
    console.log(cardData);
    this.state = {
      name: "React",
      index: 0,
      offset,
      chunks: this.chunkArray(cardData.data.Table, offset)
    };
  }

  chunkArray(inputArray, chunkSize){
    console.log("inputArray:: ", inputArray);
    const results = [];  
    while (inputArray.length) {
      results.push(inputArray.splice(0, chunkSize));
    }
    console.log("results:: ", results);
    return results;
  }

  handleClick(index) {
    this.setState({
      index
    })
  }

  render() {
    console.log(this.state.chunks);
    return (
      <div>
        {this.state.chunks && this.state.chunks[this.state.index].map(results => (
          <div className="col-sm-3">
            <h3>
              {results.first_name} {results.last_name}
            </h3>
            <h3>{results.manager}</h3>
            <div className="row">
              <div className="col-md-3 col-sm-6"> {results.Department}</div>
            </div>

            <a
              to={{ pathname: `/cards/${results.id}`, state: results }}
              className={`card-wrapper restore-${results.id}`}
              href={`/cards/${results.id}`}
            >
              View Detail
            </a>
          </div>
        ))}
        <br />
        { this.state.chunks && this.state.chunks.map((item, index) => <button onClick={()  => this.handleClick(index)}>{index + 1}</button>) }
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Here's a Working Code Sample Demo for your ref.

Upvotes: 1

Jonathan Rys
Jonathan Rys

Reputation: 1886

If you're using hooks, this will work otherwise it can be easily adapted. Basically, just store the index of where you are and then get the data you need based on that index:

const [index, setIndex] = React.useState(0);
const PAGE_SIZE = 10;
const tableData = cardData.data.Table.slice(index, index + PAGE_SIZE);

const table = {tableData.map(results => (
          <div className="col-sm-3">
                <h3>
                  {results.first_name} {results.last_name}
                </h3>
                <h3 >{results.manager}</h3>
                <div className="row">
                  <div className="col-md-3 col-sm-6"> {results.Department}</div>
                </div>

                <Link
                  to={{ pathname: `/cards/${results.id}`, state: results }}
                  className={`card-wrapper restore-${results.id}`}
                >
                  View Detail
                </Link>
            </div>
        ))}

const navigation = (
    <div>
        <div disabled={index <= 0 ? true : false} onClick={() => setIndex(index - PAGE_SIZE)}>Prev</div>
        <div disabled={index <= cardData.data.Table.length ? true : false} onClick={() => setIndex(index + PAGE_SIZE)}>Next</div>
    </div>
);

Upvotes: 0

Christian Fritz
Christian Fritz

Reputation: 21364

I'm sure there are a hundred different ways of doing it, but just to teach the idea of the mechanics, here is a very manual version:

  {this.state.filteredData
    .slice(this.state.activePage * 10, (this.state.activePage + 1) * 10)
    .map(results => ( ...
  ))}

.....

  {/*Pagination goes here */}

  <button onClick={() => {this.setState({activePage: this.state.activePage - 1})}} >
    prev</button>
  <button onClick={() => {this.setState({activePage: this.state.activePage + 1})}} >
    next</button>

That is, you take only a slice of the data before mapping it into DOM elements, and the buttons for advancing or going back just select the slice by setting the activePage state variable you already had.

Upvotes: 1

Related Questions