Breaking News: Grepper is joining You.com. Read the official announcement!

React Custom Pagination Next Previous

Readul Ahmed answered on May 13, 2024 Popularity 1/10 Helpfulness 1/10

answer React Custom Pagination Next Previous

React Custom Pagination Next Previous

Comment

  const [PerPage, setPerPage] = useState(10);
  
  const [data, setData] = useState([]) // array of data

  const handleNext = () => {
    setClientCurrentPage(ClientcurrentPage + 1);
  };

  const handlePrev = () => {
    setClientCurrentPage(ClientcurrentPage - 1);
  };

  const indexOfLastData = ClientcurrentPage * PerPage;
  const indexOfFirstData = indexOfLastData - PerPage;
  const currentData = data?.slice(indexOfFirstData, indexOfLastData);
  
  
  return (
  	<>
    	<table>
        
        <tr>
        	<td>SL</td>
            <td>Name</td>
            <td>Email</td>
            <td>Phone</td>
            <td>Address</td>
        </tr>
        {currentData?.map((item, index) => (
          <tr key={`trader-wise-client-${index}`}>
          <td>{index + 1}</td>
          <td>{item?.name}</td>
          <td>{item?.email}</td>
          <td>{item?.phone}</td>
          <td>{item?.address}</td>
          </tr>
        ))}
        </table>
        
        <div className="flex gap-2 items-center">
          <button onClick={handlePrev} disabled={ClientcurrentPage === 1}>Previous</button>
          <button onClick={handleNext} disabled={ClientcurrentPage === Math.ceil(data?.length / PerPage)}>Next</button>
        </div>
    
    </>
  )

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript next pagination

Link to this answer
Share Copy Link

Contributed on May 13 2024

Readul Ahmed

0 Answers Avg Quality 2/10

React Custom Pagination Next Previous

Contents

More Related Answers

React Custom Pagination Next Previous

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.