Data Display treeinteractivedata

Expandable Row

List item that toggles visible child data on click.

▶ Users Database

Columns: id, name, email, avatar, status

Rows: 1,402 entries

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ExpandableRow.astro and paste the following code:

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>

Quick Info

Category
Data Display
Filename
ExpandableRow.astro
Dependencies
None — pure Astro + CSS
Tags
treeinteractivedata