57 lines
1.7 KiB
57 lines
1.7 KiB
3 years ago
|
import React, {useMemo} from 'react';
|
||
|
import {useTable} from 'react-table';
|
||
|
import {COLUMNS} from './columns';
|
||
|
import MOCK_DATA from './MOCK_DATA.json';
|
||
|
|
||
|
|
||
|
const BasicTable = () => {
|
||
|
|
||
|
|
||
|
const columns = React.useMemo(() => COLUMNS, [])
|
||
|
const data = useMemo(() => MOCK_DATA,[])
|
||
|
|
||
|
const tableInstance = useTable({
|
||
|
columns,
|
||
|
data,
|
||
|
})
|
||
|
|
||
|
const { getTableProps, getTableBodyProps,headerGroups,rows,prepareRow, } = tableInstance
|
||
|
|
||
|
return (
|
||
|
|
||
|
<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) => (
|
||
|
<th {...column.getHeaderProps()} scope="col" className="px-6 py-3 text-right text-xs" style={{color: '#3287B9'}}>
|
||
|
{column.render('Header')}
|
||
|
</th>
|
||
|
))}
|
||
|
</tr>
|
||
|
))}
|
||
|
</thead>
|
||
|
|
||
|
<tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
|
||
|
{rows.map((row) => {
|
||
|
prepareRow(row)
|
||
|
return(
|
||
|
<tr {...row.getRowProps()}>
|
||
|
{row.cells.map((cell) => {
|
||
|
return <td {...cell.getCellProps()} className="px-6 py-4 whitespace-nowrap" role="cell">
|
||
|
{cell.render('Cell')}
|
||
|
</td>
|
||
|
})}
|
||
|
</tr>
|
||
|
)
|
||
|
})}
|
||
|
</tbody>
|
||
|
|
||
|
</table>
|
||
|
)
|
||
|
|
||
|
};
|
||
|
|
||
|
export default BasicTable;
|