import React, {useMemo} from 'react'; import {useTable, useSortBy, useGlobalFilter, useFilters, usePagination} from 'react-table'; import {COLUMNS} from './columns'; import {GlobalFilter} from './GlobalFilter'; import MOCK_DATA from './MOCK_DATA.json'; const BasicTable = () => { const columns = React.useMemo(() => COLUMNS, []) const data = useMemo(() => MOCK_DATA,[]) const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, page, nextPage, previousPage, canNextPage, canPreviousPage, pageOptions, gotoPage, pageCount, prepareRow, state, setGlobalFilter, } = useTable({ columns, data, // initialState: { pageIndex: 2 } }, useFilters, useGlobalFilter, useSortBy, usePagination, ) const { globalFilter, pageIndex } = state return ( <> {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( ))} ))} {/* {rows.map((row) => { prepareRow(row) return( {row.cells.map((cell) => { return })} ) })} */} {page.map((row) => { prepareRow(row) return( {row.cells.map((cell) => { return })} ) })} 10 ? 'w-full' : 'hidden'}`} > { footerGroups.map(footerGroup => ( { footerGroup.headers.map(column => ( )) } )) }
{column.render('Header')} {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} {/*
{column.canFilter ? column.render('Filter') : null }
*/}
{cell.render('Cell')}
{cell.render('Cell')}
{ column.render('Footer') }
Page{' '} {pageIndex + 1} of {pageOptions.length} {''} | Go to Page: {' '} { const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0 gotoPage(pageNumber) } } style={{ width: '50px' }} />
) }; export default BasicTable;