| 1 | import TableRow from './TableRow'; |
| 2 | import TableHeader from './TableHeader'; |
| 3 | import Badge from './Badge'; |
| 4 | import Pagination from './Pagination'; |
| 5 | |
| 6 | const columns = [ |
| 7 | {key: 'name', label: 'Product'}, |
| 8 | {key: 'sku', label: 'SKU'}, |
| 9 | {key: 'category', label: 'Category'}, |
| 10 | {key: 'price', label: 'Price'}, |
| 11 | {key: 'stock', label: 'Stock'}, |
| 12 | {key: 'status', label: 'Status'}, |
| 13 | {key: 'rating', label: 'Rating'}, |
| 14 | ]; |
| 15 | |
| 16 | export default function ProductTable({products}) { |
| 17 | return ( |
| 18 | <div className="product-table-container"> |
| 19 | <div className="table-toolbar"> |
| 20 | <h2>Products</h2> |
| 21 | <span className="table-count">{products.length} items</span> |
| 22 | </div> |
| 23 | <table className="product-table"> |
| 24 | <thead> |
| 25 | <tr> |
| 26 | {columns.map(col => ( |
| 27 | <TableHeader key={col.key} column={col} /> |
| 28 | ))} |
| 29 | </tr> |
| 30 | </thead> |
| 31 | <tbody> |
| 32 | {products.map(product => ( |
| 33 | <TableRow key={product.id} product={product} columns={columns} /> |
| 34 | ))} |
| 35 | </tbody> |
| 36 | </table> |
| 37 | <Pagination total={products.length} pageSize={20} /> |
| 38 | </div> |
| 39 | ); |
| 40 | } |