| 31 | }, |
| 32 | ] |
| 33 | function Table({ columns, data }) { |
| 34 | const defaultColumn = React.useMemo( |
| 35 | () => ({ |
| 36 | minWidth: 30, |
| 37 | width: 150, |
| 38 | maxWidth: 400, |
| 39 | }), |
| 40 | [] |
| 41 | ) |
| 42 | |
| 43 | const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = |
| 44 | useTable( |
| 45 | { |
| 46 | columns, |
| 47 | data, |
| 48 | defaultColumn, |
| 49 | }, |
| 50 | useBlockLayout, |
| 51 | useResizeColumns |
| 52 | ) |
| 53 | |
| 54 | return ( |
| 55 | <div {...getTableProps()} className="table"> |
| 56 | <div> |
| 57 | {headerGroups.map(headerGroup => ( |
| 58 | <div {...headerGroup.getHeaderGroupProps()} className="tr"> |
| 59 | {headerGroup.headers.map(column => ( |
| 60 | <div {...column.getHeaderProps()} className="th"> |
| 61 | {column.render('Header')} |
| 62 | {/* Use column.getResizerProps to hook up the events correctly */} |
| 63 | <div |
| 64 | {...column.getResizerProps()} |
| 65 | className={`resizer${column.isResizing ? ' isResizing' : ''}`} |
| 66 | /> |
| 67 | </div> |
| 68 | ))} |
| 69 | </div> |
| 70 | ))} |
| 71 | </div> |
| 72 | |
| 73 | <div {...getTableBodyProps()}> |
| 74 | {rows.map((row, i) => { |
| 75 | prepareRow(row) |
| 76 | return ( |
| 77 | <div {...row.getRowProps()} className="tr"> |
| 78 | {row.cells.map(cell => { |
| 79 | return ( |
| 80 | <div {...cell.getCellProps()} className="td"> |
| 81 | {cell.render('Cell')} |
| 82 | </div> |
| 83 | ) |
| 84 | })} |
| 85 | </div> |
| 86 | ) |
| 87 | })} |
| 88 | </div> |
| 89 | </div> |
| 90 | ) |