|  |  | @ -28,6 +28,7 @@ const BasicTable = () => { | 
			
		
	
		
		
			
				
					
					|  |  |  |         pageOptions, |  |  |  |         pageOptions, | 
			
		
	
		
		
			
				
					
					|  |  |  |         gotoPage, |  |  |  |         gotoPage, | 
			
		
	
		
		
			
				
					
					|  |  |  |         pageCount, |  |  |  |         pageCount, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         setPageSize, | 
			
		
	
		
		
			
				
					
					|  |  |  |         prepareRow, |  |  |  |         prepareRow, | 
			
		
	
		
		
			
				
					
					|  |  |  |         state, |  |  |  |         state, | 
			
		
	
		
		
			
				
					
					|  |  |  |         setGlobalFilter, |  |  |  |         setGlobalFilter, | 
			
		
	
	
		
		
			
				
					|  |  | @ -43,7 +44,7 @@ const BasicTable = () => { | 
			
		
	
		
		
			
				
					
					|  |  |  |     ) |  |  |  |     ) | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |     const { globalFilter, pageIndex } = state |  |  |  |     const { globalFilter, pageIndex, pageSize } = state | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |     return ( |  |  |  |     return ( | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
	
		
		
			
				
					|  |  | @ -145,6 +146,23 @@ const BasicTable = () => { | 
			
		
	
		
		
			
				
					
					|  |  |  |                     
 |  |  |  |                     
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                 </span> |  |  |  |                 </span> | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 <select 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     value={pageSize} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     onChange={ (e) => setPageSize(Number(e.target.value)) }    
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 > | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     { | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         [7, 10, 25, 50].map(pageSize => ( | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             <option key={ pageSize } value={ pageSize }> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 Show { pageSize } | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             </option> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         )) | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     } | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 </select> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                 <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> { '<<' } </button> |  |  |  |                 <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> { '<<' } </button> | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                 <button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => previousPage() } disabled={!canPreviousPage} >Previous</button> |  |  |  |                 <button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => previousPage() } disabled={!canPreviousPage} >Previous</button> | 
			
		
	
	
		
		
			
				
					|  |  | 
 |