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