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 (
<>
{column.render('Header')} {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} | ))}
---|
{cell.render('Cell')} | })}
{ column.render('Footer') } | )) }