import { useTable , useSortBy , usePagination } from 'react-table' ; import { ChevronLeftIcon , ChevronRightIcon , ChevronDoubleRightIcon , ChevronDoubleLeftIcon } from "@heroicons/react/solid" ; import { Button , PageButton } from './Button' ; function Table ( { columns , data } ) { const { getTableProps , getTableBodyProps , headerGroups , prepareRow , page , canPreviousPage , canNextPage , pageOptions , pageCount , gotoPage , nextPage , previousPage , setPageSize , state , } = useTable ( { columns , data , } , useSortBy , usePagination ) ; return ( < > { } { } < div className = "mt-2 flex flex-col" > < div className = "-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8" > < div className = "py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8" > < div className = "shadow overflow-x-auto border-b border-gray-200 sm:rounded-lg" > < table { ... getTableProps ( ) } className = "table-auto border-collapse w-full" > < thead className = "bg-gray-50" > { headerGroups . map ( headerGroup => ( < tr { ... headerGroup . getHeaderGroupProps ( ) } > { headerGroup . headers . map ( column => ( < th scope = "col" className = "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" { ... column . getHeaderProps ( column . getSortByToggleProps ( ) ) } > { column . render ( 'Header' ) } < span > { column . isSorted ? column . isSortedDesc ? ' ▼' : ' ▲' : '' } < /span> < /th>))} < /tr>))} < /thead> < tbody { ... getTableBodyProps ( ) } className = "bg-white divide-y divide-gray-200" > { page . map ( ( row , i ) => { prepareRow ( row ) ; return ( < tr { ... row . getRowProps ( ) } > { row . cells . map ( cell => { return ( < td { ... cell . getCellProps ( ) } className = "px-6 py-4 whitespace-nowrap" > { cell . render ( 'Cell' ) } < /td>); } ) } < /tr>); } ) } < /tbody> < /table> < /div> < div className = "py-3 flex items-center justify-between" > < div className = "flex-1 flex justify-between sm:hidden" > < Button onClick = { ( ) => previousPage ( ) } disabled = { ! canPreviousPage } > Previous < /Button> < Button onClick = { ( ) => nextPage ( ) } disabled = { ! canNextPage } > Next < /Button> < /div> < div className = "hidden sm:flex-1 sm:flex sm:items-center sm:justify-between" > < div className = "flex gap-x-2" > < span className = "text-sm text-gray-700" > Page < span className = "font-medium" > { state . pageIndex + 1 } < /span> of <span className="font-medium">{pageOptions.length}</span > < /span> < select value = { state . pageSize } onChange = { e => { setPageSize ( Number ( e . target . value ) ) ; } } > { [ 5 , 10 , 20 ] . map ( pageSize => ( < option key = { pageSize } value = { pageSize } > Show { pageSize } < /option>))} < /select> < /div> < div > < nav className = "relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria - label = "Pagination" > < PageButton className = "rounded-l-md" onClick = { ( ) => gotoPage ( 0 ) } disabled = { ! canPreviousPage } > < span className = "sr-only" > First < /span> < ChevronDoubleLeftIcon className = "h-5 w-5" aria - hidden = "true" / > < /PageButton> < PageButton onClick = { ( ) => previousPage ( ) } disabled = { ! canPreviousPage } > < span className = "sr-only" > Previous < /span> < ChevronLeftIcon className = "h-5 w-5" aria - hidden = "true" / > < /PageButton> < PageButton onClick = { ( ) => nextPage ( ) } disabled = { ! canNextPage } > < span className = "sr-only" > Next < /span> < ChevronRightIcon className = "h-5 w-5" aria - hidden = "true" / > < /PageButton> < PageButton className = "rounded-r-md" onClick = { ( ) => gotoPage ( pageCount - 1 ) } disabled = { ! canNextPage } > < span className = "sr-only" > Last < /span> < ChevronDoubleRightIcon className = "h-5 w-5" aria - hidden = "true" / > < /PageButton> < /nav> < /div> < /div> < /div> < /div> < /div> < /div> { } < />); } export default Table ;