| 38 | } |
| 39 | |
| 40 | function Table({ columns, data }) { |
| 41 | const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = |
| 42 | useTable( |
| 43 | { |
| 44 | columns, |
| 45 | data, |
| 46 | defaultColumn, |
| 47 | }, |
| 48 | useBlockLayout, |
| 49 | ) |
| 50 | |
| 51 | return ( |
| 52 | <div {...getTableProps()} className="table"> |
| 53 | <div> |
| 54 | {headerGroups.map((headerGroup) => ( |
| 55 | <div {...headerGroup.getHeaderGroupProps()} className="row"> |
| 56 | {headerGroup.headers.map((column) => ( |
| 57 | <div {...column.getHeaderProps()} className="cell header"> |
| 58 | {column.render('Header')} |
| 59 | </div> |
| 60 | ))} |
| 61 | </div> |
| 62 | ))} |
| 63 | </div> |
| 64 | |
| 65 | <div {...getTableBodyProps()}> |
| 66 | {rows.map( |
| 67 | (row, i) => |
| 68 | prepareRow(row) || ( |
| 69 | <div {...row.getRowProps()} className="row"> |
| 70 | {row.cells.map((cell) => { |
| 71 | return ( |
| 72 | <div {...cell.getCellProps()} className="cell"> |
| 73 | {cell.render('Cell')} |
| 74 | </div> |
| 75 | ) |
| 76 | })} |
| 77 | </div> |
| 78 | ), |
| 79 | )} |
| 80 | </div> |
| 81 | </div> |
| 82 | ) |
| 83 | } |
| 84 | |
| 85 | function App() { |
| 86 | const columns = React.useMemo( |