Table
Structured data display in rows and columns. Semantic HTML table with Cookest styling.
$cookest-ui add table
Recipe Library
Use Table to display a sortable recipe collection.
| Recipe | Cuisine | Cook Time | Servings | Rating |
|---|---|---|---|---|
| Pasta Carbonara | Italian | 25 min | 4 | ★ 4.9 |
| Risotto Milanese | Italian | 40 min | 2 | ★ 4.8 |
| Chicken Tikka Masala | Indian | 50 min | 6 | ★ 4.7 |
| Pad Thai | Thai | 30 min | 2 | ★ 4.6 |
| Beef Tacos | Mexican | 20 min | 8 | ★ 4.5 |
Ingredient Nutrition
Use Table with a footer for totals — great for nutritional breakdowns.
| Ingredient | Quantity | Calories | Protein |
|---|---|---|---|
| Guanciale | 200g | 700 kcal | 18g |
| Spaghetti | 400g | 1408 kcal | 50g |
| Egg Yolks | 4 | 220 kcal | 10g |
| Pecorino Romano | 80g | 310 kcal | 22g |
| Total (4 servings) | 2,638 kcal | 100g | |
| Prop | Type | Default | Description |
|---|---|---|---|
TableCaption | string | — | An accessible caption for the table (displayed below). |
TableHeader | ReactNode | — | The thead section containing TableHead cells. |
TableBody | ReactNode | — | The tbody section containing TableRow elements. |
TableFooter | ReactNode | — | Optional tfoot section, typically for totals. |
TableRow | ReactNode | — | A single row. Receives hover styling automatically. |
TableHead | ReactNode | — | A th cell with bold styling. |
TableCell | ReactNode | — | A td cell. |