import React, {useMemo} from 'react'; import {useTable, useSortBy, useGlobalFilter} from 'react-table'; import {COLUMNS} from './columns'; import MOCK_DATA from './MOCK_DATA.json'; import {GlobalFilter} from './GlobalFilter'; const BasicTable = () => { const columns = React.useMemo(() => COLUMNS, []) const data = useMemo(() => MOCK_DATA,[]) const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, prepareRow, state, setGlobalFilter, } = useTable({ columns, data, }, useGlobalFilter, useSortBy, ) const { globalFilter } = state return ( <> {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( ))} ))} {rows.map((row) => { prepareRow(row) return( {row.cells.map((cell) => { return })} ) })} { footerGroups.map(footerGroup => ( { footerGroup.headers.map(column => ( )) } )) }
{column.render('Header')} {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
{cell.render('Cell')}
{ column.render('Footer') }
) }; export default BasicTable;