Tables

You can customize the tables as needed by adding columns and rows at your convenience.

To include it in your project, you can add it directly or inside a container. You’ll probably need to manually adjust the component’s width.

src/components/Statistics.astro

---
// Import
import Table from "../components/Table.astro";
---
(...)
<div class="You can use: flex justify-center items-center + Type your container dimensions here">
  <Table />
</div>
(...)

---

1. Simple Table

A simple table with clearly labeled column headers, designed to effectively display information in an organized and easy-to-read format.

Preview

ID	Name	Age	City
1	Alan Ramos	30	Ciudad de México
2	Laura Martínez	25	Guadalajara
3	Carlos Pérez	28	Monterrey

Code

src/components/Table.astro

   ---
   //2 Instruction in this component

   // Here you can edit and add the column titles ↓. ❶
   const labels = ["ID", "Name", "Age", "City"];

   // Here you can edit and add the rows ↓. ❷
   const rows = [
     { id: 1, name: "Alan Ramos", age: 30, city: "Ciudad de México" },
     { id: 2, name: "Laura Martínez", age: 25, city: "Guadalajara" },
     { id: 3, name: "Carlos Pérez", age: 28, city: "Monterrey" },
   ];
   ---

   <table class="table-auto w-full text-white overflow-x-scroll">

     <!-- Column titles -->
     <thead class="bg-gray-950">
       {
         labels.map((label) => (
           <th class="border-y border-white/20 px-6 py-4 md:px-12 md:py-6 font-light">
             {label}
           </th>
         ))
       }
     </thead>

     <!-- Rows content -->
     <tbody>
       {
         rows.map((row) => (
           <tr class="border-y border-white/20 hover:border-white/50 transition-colors duration-200">
             <td class="px-6 py-4 md:px-12 md:py-6 font-light">{row.id}</td>
             <td class="px-6 py-4 md:px-12 md:py-6 font-light">{row.name}</td>
             <td class="px-6 py-4 md:px-12 md:py-6 font-light">{row.age}</td>
             <td class="px-6 py-4 md:px-12 md:py-6 font-light">{row.city}</td>
           </tr>
         ))
       }
     </tbody>
   </table>

---