“Table” Component

Design: zeplin.

Tables group related content, such as a table of invoices in the billing page. They are tedious to use on small viewports and thus should be kept as simple as possible on member-facing pages.

There are 2 types of tables in Hydrogen:

• Basic table, which displays rows of data with a common row of heading
• Table record, which is only used for admin pages and displays complex lists of data

Basic Table

Usage

<div class="tableContainer">
     <table class="baseTable">
         <thead>
             <tr class="baseTable__headingRow">
                 <th class="baseTable__headingColumn" style="width: 350px">Description </th>
                 <th class="baseTable__headingColumn">Amount </th>
             </tr>
         </thead>
         <tbody>
            <tr class="baseTable__row">
                <td class="baseTable__column">
                    Professional Membership 1 Year
                </td>
                <td class="baseTable__column">
                    98 EUR
                </td>
            </tr>
         </tbody>
     </table>
 </div>

Table Record

Usage

<div class="tableRecord__row">
    <div><strong>Subject</strong></div>
    <p>Good luck!</p>
    <div class="flex mb-large">
        <div class="mr-large">
            <div><strong>Date</strong></div>
            <span>Dec 26, 2017, 22:09 (UTC)</span>
        </div>
        <div class="mr-large">
            <div><strong>Email ID</strong></div>
            <span>112293</span>
        </div>
        <div class="mr-large">
            <div><strong>Non-member email</strong></div>
            <span>mads@example.com</span>
        </div>
    </div>
    <div class="flex">
        <div class="mr-large">
            <div><strong>Chain #</strong></div>
            <span>1</span>
        </div>
        <div class="mr-large">
            <div><strong>Plaintext content</strong></div>
            <span>View</span>
        </div>
        <div class="mr-large">
            <div><strong>Notification class</strong></div>
            <span>\Course\Enrollment\MemberEnrolledInACourse</span>
        </div>
    </div>
</div>