High-Speed Internet Plans
This project demonstrates how to dynamically generate a table in Astro using JavaScript objects. Instead of manually writing each table row, we define an array containing service plan details and use Astro’s mapping syntax to generate the rows dynamically.
Dynamic Table
| Service | Download Speed (Mbps) |
|---|---|
| Basic | 0 Mbps |
| Express | 100 Mbps |
| Extreme | 500 Mbps |
| Ultimate | 1 Gig |
How It Works
Instead of hardcoding table rows, this project takes advantage of an array of objects, where each object
represents a service plan. Astro’s {services.map()} function is then used to loop through this data and generate
table rows dynamically. This approach makes it easier to modify or expand the service offerings without
changing the table structure.
To see the source code: 
dynamic-table.astro
Key Concepts
- Data Management: The service plans are stored in an array of objects in Astro’s frontmatter.
- Dynamic Rendering: Astro’s
{services.map()}function loops through the array and generates the necessary `` and ` ` elements dynamically. - Efficiency: This method reduces repetitive code, making the table easier to maintain.
- Scalability: If new service plans need to be added, updating the array automatically reflects changes in the table.