1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos treeinteractivedata

Expandable Row

Elemento de árbol interactivo con soporte para selecciones y ramas anidadas.

▶ Users Database

Columns: id, name, email, avatar, status

Rows: 1,402 entries

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { ExpandableRow } from 'astro-component-kit';
---

<TreeItemInteractive>Content</TreeItemInteractive>
--- import { ExpandableRow } from 'astro-component-kit'; --- <TreeItemInteractive>Content</TreeItemInteractive>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/ExpandableRow.astro:

astro 
---
---
<div class="exp-row">
  <div class="main"><span>▶</span> Users Database</div>
  <div class="child">
    <p>Columns: id, name, email, avatar, status</p>
    <p>Rows: 1,402 entries</p>
  </div>
</div>
<style>
  .exp-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 12px; }
  .main { color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
  .main span { font-size: 0.6rem; color: #64748b; transition: 0.3s; }
  .child { margin-top: 12px; padding-left: 24px; color: #64748b; font-size: 0.8rem; display: none; line-height: 1.5; }
  .exp-row:hover .main { color: #818cf8; }
  .exp-row:hover .main span { transform: rotate(90deg); color: #818cf8; }
  .exp-row:hover .child { display: block; }
</style>
--- --- <div class="exp-row"> <div class="main"><span>▶</span> Users Database</div> <div class="child"> <p>Columns: id, name, email, avatar, status</p> <p>Rows: 1,402 entries</p> </div> </div> <style> .exp-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 12px; } .main { color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; } .main span { font-size: 0.6rem; color: #64748b; transition: 0.3s; } .child { margin-top: 12px; padding-left: 24px; color: #64748b; font-size: 0.8rem; display: none; line-height: 1.5; } .exp-row:hover .main { color: #818cf8; } .exp-row:hover .main span { transform: rotate(90deg); color: #818cf8; } .exp-row:hover .child { display: block; } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
ExpandableRow.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
treeinteractivedata