🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Collapsible Table

View in Pattern Lab

HTML Markup

<table class="hoo-table is-collapsible">
    <thead>
        <tr class="collapsible" data-sectionHeader="all" aria-expanded="false">
            <th class="hoo-table-iconcell" scope="col">
                <button class="hoo-buttonicon" 
                    aria-label="Toggle section visibility"
                    role="button"
                    ><span class="hoo-icon">
                    <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
                        <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
                        </use>
                    </svg></span>
            </button>
        </th>
        <th scope="col">Hello</th>
        <th scope="col">World</th>
        <th scope="col">How</th>
        <th scope="col">Goes</th>
    </tr>
</thead>
<tbody>
    <tr class="collapsible" data-sectionHeader="section1" aria-expanded="false">
        <th class="hoo-table-iconcell">
            <button class="hoo-buttonicon" 
                    aria-label="Toggle section visibility"
                    role="button"
                    ><span class="hoo-icon">
                <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
                    <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
                    </use>
                </svg></span>
        </button>
    </th>
    <th colspan="4">
        <div class="hoo-table-subheader"><span>Lorem, ipsum
                        dolor.</span>
    </div>
</th>
</tr>
<tr data-section="section1" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section1" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section1" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section1" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr class="collapsible" data-sectionHeader="section2" aria-expanded="false">
    <th class="hoo-table-iconcell">
        <button class="hoo-buttonicon" 
                    aria-label="Toggle section visibility"
                    role="button"
                    ><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
                <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
                </use>
            </svg></span>
    </button>
</th>
<th colspan="4">
    <div class="hoo-table-subheader"><span>Lorem, ipsum
                        dolor.</span>
</div>
</th>
</tr>
<tr data-section="section2" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section2" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section2" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
<tr data-section="section2" class="is-hidden" aria-hidden="true">
    <td>
    </td>
    <td>Lorem, ipsum.</td>
    <td>Deserunt, ipsa?</td>
    <td>Velit, blanditiis?</td>
    <td>Placeat, quidem.</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

Overview

The Collapsible Table variant provides an interactive table with expandable and collapsible sections, allowing users to show or hide groups of related rows. This is particularly useful for organizing complex datasets into logical sections.

Features

  • Interactive section headers that can be expanded and collapsed
  • Visual indicators showing the current state (expanded/collapsed)
  • Support for nested sections
  • Smooth icon rotation animations for state transitions
  • Compatible with both standard and compact table styles

Data Attributes

  • data-sectionHeader: Identifies a row as a section header (collapsible trigger)
  • data-section: Associates content rows with their section header

JavaScript Integration

The collapsible table functionality requires JavaScript for interactive behavior:

Required JavaScript

Key JavaScript Features

  • Section Collapse/Expand: Click handlers for section headers
  • ARIA State Management: Automatic aria-expanded and aria-hidden attributes
  • Nested Section Support: Handles multiple levels of collapsible sections
  • Keyboard Accessibility: Maintains focus management for keyboard users

Manual Initialization

Accessibility

The collapsible table implementation follows these accessibility guidelines:

  • Use aria-expanded attributes to indicate the current state
  • Ensure keyboard navigation works for expanding/collapsing sections
  • Provide clear visual indicators of expandable sections
  • Follow proper table structure with appropriate ARIA roles

Reference Documentation

SCSS Imports