You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
6.1 KiB

3 years ago
import React, {useMemo} from 'react';
3 years ago
import {useTable, useSortBy, useGlobalFilter, useFilters, usePagination} from 'react-table';
3 years ago
import {COLUMNS} from './columns';
3 years ago
import {GlobalFilter} from './GlobalFilter';
3 years ago
3 years ago
import MOCK_DATA from './MOCK_DATA.json';
3 years ago
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
3 years ago
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
3 years ago
setPageSize,
prepareRow,
state,
setGlobalFilter,
} = useTable({
3 years ago
columns,
data,
3 years ago
// initialState: { pageIndex: 2 }
},
3 years ago
useFilters,
useGlobalFilter,
useSortBy,
3 years ago
usePagination,
)
3 years ago
3 years ago
const { globalFilter, pageIndex, pageSize } = state
3 years ago
return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-300">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
3 years ago
<th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="cursor-pointer px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
3 years ago
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
3 years ago
{/* {rows.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
{cell.render('Cell')}
</td>
})}
</tr>
)
})} */}
{page.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
{cell.render('Cell')}
</td>
})}
</tr>
)
})}
</tbody>
3 years ago
<tfoot className={`bg-gray-300 ${rows.length > 10 ? 'w-full' : 'hidden'}`} >
{
footerGroups.map(footerGroup => (
<tr {...footerGroup.getFooterGroupProps()}>
{
footerGroup.headers.map(column => (
<td {...column.getFooterProps} className="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{
column.render('Footer')
}
</td>
))
}
</tr>
))
}
</tfoot>
</table>
3 years ago
<div>
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{''}
</span>
<span>
| Go to Page: {' '}
<input type='number'
defaultValue={ pageIndex + 1 }
onChange={ (e) => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
gotoPage(pageNumber)
} }
style={{ width: '50px' }}
/>
</span>
3 years ago
<select
value={pageSize}
onChange={ (e) => setPageSize(Number(e.target.value)) }
>
{
[7, 10, 25, 50].map(pageSize => (
<option key={ pageSize } value={ pageSize }>
Show { pageSize }
</option>
))
}
</select>
3 years ago
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> { '<<' } </button>
<button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => previousPage() } disabled={!canPreviousPage} >Previous</button>
<button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => nextPage() } disabled={!canNextPage}>Next</button>
<button onClick={() => gotoPage( pageCount - 1 )} disabled={!canNextPage}> { '>>' } </button>
</div>
</>
3 years ago
)
};
export default BasicTable;