Odyssey styleguide

Table Multi-line Data

Toggle example guides Toggle HTML markup

Add the odyssey_table--56px modifier to the odyssey_table element to be able to use multi-line data rows

<insert-markup>components.table.multiline-</insert-markup>
Partner Tracking Contract Date Joined Comission Earned Actions
Adidas

Coupon 0% Commission

Online sale 2%

Loyalty IO 2% Commission

Online sale 2%

 10 Mar, 2021 $6657
a
Decathlon

Coupon 2% Commission

Online sale 5%

Loyalty IO 5% Commission

Online sale 5%

 10 Mar, 2021 $5662
a
Gamestop

Coupon 5% Commission

Online sale 6%

Loyalty IO 15% Commission

Online sale 10%

 10 Mar, 2021 $910703
a
Markup 
<div class="odyssey-table__wrapper-outer">
	<div class="odyssey-table__wrapper">
		<table class="odyssey_table odyssey_table--56px">
			<thead class="odyssey_table__headers">
				<tr>
					<th class="odyssey-table__row-selector">
						<input type="checkbox" id="row0"/>
						<label class="odyssey-check__label" for="row0"></label>
					</th>
					<th class="odyssey-table--columns-left-align">
						<a class="odyssey_table__header-link--sortable">Partner</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-left-align">
						Tracking
					</th>
					<th class="odyssey-table--columns-left-align">
						Contract
					</th>
					<th class="odyssey-table--columns-right-align">
						<a class="odyssey_table__header-link--sortable">Date Joined</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-right-align">
						<a class="odyssey_table__header-link--sortable">Comission Earned</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-right-align">Actions</th>
				</tr>
			</thead>
			<tbody class="odyssey_table__rows">
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row1"/>
						<label class="odyssey-check__label" for="row1"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Adidas</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 0% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 2%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 2% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 2%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$6657</td>
					<td class="odyssey-table--columns-right-align  odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row2"/>
						<label class="odyssey-check__label" for="row2"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Decathlon</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 2% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 5%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 5% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 5%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$5662</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row3"/>
						<label class="odyssey-check__label" for="row3"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Gamestop</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 5% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 6%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 15% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 10%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$910703</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
Source: src/components/table.less, line 514