React table Pagination(adding Page Size)

 

import React, { useState, useEffect } from 'react';

import { useMemo } from 'react'

import axios from 'axios';

import style from './style/table.css';

//step 1:--

import { useTable, usePagination } from 'react-table';

import { COLUMNS } from './Columns1';

export default function Paginate() {

const [data1, setData1] = useState([]);

const getEmployee = async () => {

const user = await axios.get('https://jsonplaceholder.typicode.com/posts');

console.log(user.data);

setData1(user.data);

const data1 = user.data;

};

useEffect(() => { getEmployee(); }, []);

const columns = useMemo(() => COLUMNS, [])

const Tabledata = useMemo(() => [...data1], [data1]);

//console.log(data);

const tableInstance = useTable({ columns: columns, data: Tabledata }, usePagination);

const {

getTableProps,

// table props from react-table

getTableBodyProps,

// table body props from react-table

headerGroups,

// headerGroups, if your table has groupings

page, //

prepareRow, // Prepare the row (this function needs to be called for each row before getting the row props)}=tableInstance;

//navigator function that pagination gives

//to navigate into the pages

nextPage,

previousPage,

//boolean properties whether

//u can go next or previous

canNextPage,

canPreviousPage,

//how many pages in total

//what page they are viewing

pageOptions,

state,

//go to page

gotoPage,

pageCount,

//page size

setPageSize

} = tableInstance;

const { pageIndex,pageSize } = state

return (

<div>

 

{/* here i will create table...

<img src="https://hub.dummyapis.com/Image?text=BR&height=120&width=120"

alt="new" /> */}

<table {...getTableProps()}>

<thead>

{headerGroups.map(headerGroup => (

<tr {...headerGroup.getHeaderGroupProps()}>

{headerGroup.headers.map(column => (

<th {...column.getHeaderProps()}>{column.render("Header")}</th>

))}

</tr>

))}

</thead>

<tbody {...getTableBodyProps()}>

{page.map((row, i) => {

prepareRow(row);

return (

<tr {...row.getRowProps()}>

{row.cells.map(cell => {

return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;

})}

</tr>

);

})}

</tbody>

</table>

<div id='footer'>

<span>

Page {' '}

<strong>{pageIndex + 1} of {pageOptions.length}</strong>{' '}

</span>

{/* page no which u want to go */}

<span>

|GO to Page:{''}

<input type="number" defaultValue={pageIndex+1} onChange={e=>{

const PageNumber=e.target.value?Number(e.target.value)-1:0

gotoPage(PageNumber)

}}style={{width:'50px'}} />

</span>

<select value={pageSize}

onChange={e=>setPageSize(Number(e.target.value))} >

{

[10,15,30].map(pageSize=>(

<option  key={pageSize}

value={pageSize}>

Show{pageSize}

</option>

))

}

</select>

<button onClick={() => gotoPage(0)}

disabled ={!canPreviousPage}>{'<<'}</button>

<button onClick={() => previousPage()}

disabled={!canPreviousPage}

>Previous</button>

<button onClick={() => nextPage()}

disabled={!canNextPage}

>next</button>

<button onClick={() => gotoPage(pageCount-1)}

disabled ={!canNextPage}>{'>>'}</button>

</div>

 

</div>

)

}