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;