IxDF Design System

“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

Description Amount Date issued Date paid
Professional Membership 1 Year 98 EUR Jan 27, 2018 an 27, 2018 View Invoice
Professional Membership 1 Year 98 EUR Jan 27, 2018 an 27, 2018 View Invoice
Professional Membership 1 Year 98 EUR Jan 27, 2018 an 27, 2018 View Invoice

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

Subject

Good luck!

Date
Dec 26, 2017, 22:09 (UTC)
Email ID
112293
Non-member email
mads@example.com
Chain #
1
Plaintext content
View
Notification class
Course\Enrollment\MemberEnrolledInACourse
Subject

Good luck!

Date
Dec 26, 2017, 22:09 (UTC)
Email ID
112293
Non-member email
mads@example.com
Chain #
1
Plaintext content
View
Notification class
Course\Enrollment\MemberEnrolledInACourse

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>