webdevpuneet.com

Related Snippets

85 in Tables category
1–6 of 60

SortableJS Sortable Table Rows with Live Ranking and Undo

Accessible Tree Table with Expandable Nested Rows

Virtualized 100,000-Row Table in Vanilla JavaScript

Grid.js Lightweight Searchable Table with Row Details

Tabulator Grouped Rows with Aggregates

Tabulator Editable Cells with Validation and Undo

Expandable Table — Free HTML CSS JS Snippet

Expandable Rows Table · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsData Tables

Copy & paste

Source Code

<div class="wrap">
  <div class="table-head-row">
    <h2 class="table-title">Orders</h2>
    <span class="sub-label">Click any row to expand line items</span>
  </div>
  <div class="table-scroll">
    <table class="table" id="orders-table">
      <thead>
        <tr>
          <th class="exp-col"></th>
          <th>Order ID</th>
          <th>Customer</th>
          <th>Date</th>
          <th>Items</th>
          <th>Total</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <!-- Row 1 -->
        <tr class="main-row" onclick="toggle(this)" data-id="1">
          <td class="exp-col"><span class="chevron">›</span></td>
          <td class="order-id">#10041</td>
          <td><div class="customer"><div class="cav" style="background:linear-gradient(135deg,#6366f1,#a78bfa)">AJ</div>Alex Johnson</div></td>
          <td>May 28, 2026</td>
          <td>3 items</td>
          <td class="amount">$184.50</td>
          <td><span class="badge green">Shipped</span></td>
        </tr>
        <tr class="detail-row" id="detail-1">
          <td colspan="7">
            <div class="detail-wrap">
              <table class="inner-table">
                <thead><tr><th>Product</th><th>SKU</th><th>Qty</th><th>Price</th><th>Subtotal</th></tr></thead>
                <tbody>
                  <tr><td>Wireless Headphones</td><td>SKU-WH-001</td><td>1</td><td>$89.00</td><td>$89.00</td></tr>
                  <tr><td>USB-C Cable 2m</td><td>SKU-CB-002</td><td>2</td><td>$12.00</td><td>$24.00</td></tr>
                  <tr><td>Phone Stand</td><td>SKU-PS-003</td><td>1</td><td>$71.50</td><td>$71.50</td></tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>

        <!-- Row 2 -->
        <tr class="main-row" onclick="toggle(this)" data-id="2">
          <td class="exp-col"><span class="chevron">›</span></td>
          <td class="order-id">#10042</td>
          <td><div class="customer"><div class="cav" style="background:linear-gradient(135deg,#ec4899,#f97316)">SM</div>Sara Miller</div></td>
          <td>May 27, 2026</td>
          <td>1 item</td>
          <td class="amount">$49.99</td>
          <td><span class="badge yellow">Processing</span></td>
        </tr>
        <tr class="detail-row" id="detail-2">
          <td colspan="7">
            <div class="detail-wrap">
              <table class="inner-table">
                <thead><tr><th>Product</th><th>SKU</th><th>Qty</th><th>Price</th><th>Subtotal</th></tr></thead>
                <tbody>
                  <tr><td>Mechanical Keyboard</td><td>SKU-KB-007</td><td>1</td><td>$49.99</td><td>$49.99</td></tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>

        <!-- Row 3 -->
        <tr class="main-row" onclick="toggle(this)" data-id="3">
          <td class="exp-col"><span class="chevron">›</span></td>
          <td class="order-id">#10043</td>
          <td><div class="customer"><div class="cav" style="background:linear-gradient(135deg,#10b981,#0ea5e9)">RP</div>Raj Patel</div></td>
          <td>May 26, 2026</td>
          <td>4 items</td>
          <td class="amount">$312.00</td>
          <td><span class="badge blue">Delivered</span></td>
        </tr>
        <tr class="detail-row" id="detail-3">
          <td colspan="7">
            <div class="detail-wrap">
              <table class="inner-table">
                <thead><tr><th>Product</th><th>SKU</th><th>Qty</th><th>Price</th><th>Subtotal</th></tr></thead>
                <tbody>
                  <tr><td>Monitor 27"</td><td>SKU-MN-010</td><td>1</td><td>$220.00</td><td>$220.00</td></tr>
                  <tr><td>HDMI Cable</td><td>SKU-HD-011</td><td>2</td><td>$14.00</td><td>$28.00</td></tr>
                  <tr><td>Desk Lamp</td><td>SKU-DL-012</td><td>2</td><td>$32.00</td><td>$64.00</td></tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Expandable rows: display:none→table-row toggle via .open class on detail tr
Accordion: closes all open rows before opening new one (single-open mode)
Chevron rotation: transform:rotate(90deg) with 0.2s transition on .open
Inner detail table: colspan spans all columns, left border accent, indented
Status badges: .badge.green/.yellow/.blue/.red with rgba tinted backgrounds
Customer column: gradient avatar initials + name in flex row
Order ID: monospace font + indigo colour for visual scan differentiation
Nested data hierarchy: parent summary row + child line-item detail table

About this UI Snippet

Expandable Rows Table — Parent Rows with Nested Detail Tables, Chevron Toggle & Accordion Behaviour

Screenshot of the Expandable Rows Table snippet rendered live

An expandable rows table shows summary data in each row and reveals detailed sub-data when the row is clicked — without navigating to a new page. This pattern is used in order management tables (click an order to see line items), expense reports (click a category to see individual transactions), file managers (click a folder to see files), and any data set with a parent-child hierarchy. This snippet provides a complete implementation with chevron rotation, accordion single-open behaviour, an inner detail table, status badges, and customer avatar initials.

How the expand/collapse works

Each main row has a data-id attribute. The detail row below it has id="detail-N" matching the data-id. When a row is clicked, toggle(row) reads the data-id, finds the detail row, and adds/removes the .open class on both. The detail row defaults to display: none via CSS and switches to display: table-row when .open is applied.

Accordion behaviour

Before opening a new row, toggle() closes all currently open rows: document.querySelectorAll(".main-row.open").forEach(r => { r.classList.remove("open"); detail.classList.remove("open"); }). This ensures only one row is expanded at a time — the accordion pattern — which keeps the table scannable. Remove the "close all others" block to allow multiple rows to be open simultaneously.

The chevron indicator

A › character in the first column rotates 90 degrees via transform: rotate(90deg) when .open is applied to the parent row. The CSS transition: transform 0.2s animates the rotation smoothly. The colour changes from grey to indigo to signal the active state.

The inner detail table

The detail row contains a full colspan="7" cell (spanning all columns). Inside it, a .detail-wrap div with a left border accent (border-left: 3px solid #6366f1) and indentation creates visual hierarchy. Inside .detail-wrap, a nested .inner-table shows line-item data (product name, SKU, quantity, price, subtotal). The inner table uses the same border-collapse collapse style as the outer table for visual consistency.

Customising the table

Update the outer table columns (Order ID, Customer, Date, Items, Total, Status) to match your data model. Change the inner table columns to match your detail data. Update the colspan value on the detail td to match your column count. Add or remove badge colour classes as needed. For a flat list instead, use the Data Table snippet; for true hierarchical nesting, see the tree table.

Step by step

How to Use

  1. 1
    Click any row to expand its detailClicking a row reveals the nested detail table with line items. The chevron rotates 90 degrees and the row gets a background tint. Clicking another row closes the open one (accordion behaviour).
  2. 2
    Update the outer table dataIn the HTML, edit each main-row tr: change order ID, customer initials and gradient, date, item count, total amount, and badge class/text. Update the data-id attribute and matching detail row id accordingly.
  3. 3
    Update the inner detail tableInside each detail-row, edit the inner-table tbody rows with your actual line-item data. Adjust the number of columns in the inner thead and tbody to match your data structure.
  4. 4
    Allow multiple rows open simultaneouslyRemove the "Close all others" block in the toggle() function: delete the document.querySelectorAll(".main-row.open").forEach(...) lines. The function will then only toggle the clicked row without affecting others.
  5. 5
    Add more columns or rowsAdd th headers to the outer table thead and matching td cells to each main-row tr. Update the colspan="7" on each detail-row td to match the new total column count. Duplicate the main-row + detail-row pair for each new data record.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component managing open state in useState, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Order management tables with line-item detail
The classic use case — an order list where each row expands to show the individual products, SKUs, quantities, and prices. Trigger a detail fetch on first expand to avoid loading all line items upfront: fetch("/api/orders/"+id+"/items") on first open, then cache the result.
Expense reports and financial transaction tables
Expense category rows (Travel, Software, Marketing) expand to show individual transactions within each category. The accordion behaviour keeps the totals row visible while reviewing line items, making it easy to compare categories.
File manager and directory tree tables
Folder rows expand to show file rows. The chevron pattern is identical to a file system tree navigator. Nest further by making inner rows also expandable — set up recursive expand logic with depth-based indentation on the detail wrapper.
Project and milestone tracking tables
Project rows expand to show task lists. Each task can show assignee, due date, status, and time logged. The left border accent on the detail panel creates visual grouping — use different border colours per project status.
Study the master-detail table pattern and colspan technique
The expandable row technique — a summary tr followed by a detail tr in the same tbody — is a pure HTML table pattern that requires no overlay, no drawer, and no separate panel. It shares the single-open accordion logic of the accordion FAQ. The colspan="N" cell spanning all columns inside the detail row is the key technique that makes the inner content span the full table width.
Employee hierarchy and department tables
Department rows (Engineering, Design, Marketing) expand to show individual employee rows with role, salary band, and start date. The accordion single-open behaviour is especially useful for HR tables where only one department needs to be visible at a time.
Related: Responsive Table to Cards
See the Responsive Table to Cards for a related tables pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The detail row has a single td element with colspan="7" — or whatever number matches the total column count in the outer table. This single cell spans the full row width. Inside it, a div with padding and a left border creates the indented detail panel. The inner-table inside this div is a completely separate table, not constrained by the outer column widths, so it can have different columns and widths.

Track which rows have been loaded: const loaded = new Set(). In toggle(), before opening a new row, check if loaded.has(id). If not: show a loading spinner in the detail row, fetch("/api/orders/"+id+"/items").then(data => { renderDetail(id, data); loaded.add(id); row.classList.add("open"); detail.classList.add("open"); }). The detail row content is rendered from the API response on first expand and cached for subsequent expands.

CSS cannot animate from height: 0 to height: auto directly. Instead: set the detail row to display: table-row always (remove display:none), and use max-height animation: max-height: 0; overflow: hidden on the detail div, transitioning to max-height: 500px on .open. Or use the Web Animations API: detail.animate([{height: "0"},{height: detail.scrollHeight+"px"}], {duration: 250, easing: "ease"}).

Click "JSX" to download. Manage open row state with useState<string|null>(null) for accordion mode (one open at a time) or useState<Set<string>>(new Set()) for multi-open mode. Render the detail tr conditionally: {openId === row.id && <tr><td colSpan={7}><DetailContent data={row.items} /></td></tr>}. For lazy data loading, use useState to track per-row data and fetch on first expand inside a click handler.