Interest table

The interest table component is a table with different sections and has a filter. It displays different interests over different years.

Default

Perioden

dit is een tooltip met extra info, deze verschijnt enkel on hover & click

1 jaar
2 jaar
3 jaar
4 jaar
5 jaar
6 jaar
7 jaar
8 jaar
9 jaar
10 jaar
12 jaar
15 jaar
20 jaar
25 jaar
30 jaar
NHG t/m 65% t/m 80% t/m 95% t/m 106% t/m 115%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
Perioden

dit is een tooltip met extra info, deze verschijnt enkel on hover & click

1 jaar
2 jaar
3 jaar
4 jaar
5 jaar
6 jaar
7 jaar
8 jaar
9 jaar
10 jaar
12 jaar
15 jaar
20 jaar
25 jaar
30 jaar
NHG t/m 65% t/m 80% t/m 95% t/m 106% t/m 115%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
Perioden

dit is een tooltip met extra info, deze verschijnt enkel on hover & click

1 jaar
2 jaar
3 jaar
4 jaar
5 jaar
6 jaar
7 jaar
8 jaar
9 jaar
10 jaar
12 jaar
15 jaar
20 jaar
25 jaar
30 jaar
NHG t/m 65% t/m 80% t/m 95% t/m 106% t/m 115%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%
1.54% 1.4% 1.5% 1.6% 1.8% 2.2%

			
				<div class="c-interest-table l-section js-interest-table ">
	<div class="c-interest-table__container l-container">
		<div class="c-interest-table__header">
			<ul class="c-interest-table__list">
				<li class="c-interest-table__list-item">
					<button class="c-interest-table__button" data-table-id="0">
						<span class="c-interest-table__list-item-title">Annuïtair</span>
						<div class="c-interest-table__flyout u-show@tablet">
							<div class="c-flyout js-flyout ">
								<div class="c-flyout__trigger ">
									<span class='fas fa-info-circle c-interest-table__icon'></span>
								</div>
								<div class="c-flyout__content">
									<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
										& click</p>
								</div>
							</div>
						</div>
					</button>
				</li>
				<li class="c-interest-table__list-item">
					<button class="c-interest-table__button" data-table-id="1">
						<span class="c-interest-table__list-item-title">Lineair</span>
						<div class="c-interest-table__flyout u-show@tablet">
							<div class="c-flyout js-flyout ">
								<div class="c-flyout__trigger ">
									<span class='fas fa-info-circle c-interest-table__icon'></span>
								</div>
								<div class="c-flyout__content">
									<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
										& click</p>
								</div>
							</div>
						</div>
					</button>
				</li>
				<li class="c-interest-table__list-item">
					<button class="c-interest-table__button" data-table-id="2">
						<span class="c-interest-table__list-item-title">Aflosvrij</span>
						<div class="c-interest-table__flyout u-show@tablet">
							<div class="c-flyout js-flyout ">
								<div class="c-flyout__trigger ">
									<span class='fas fa-info-circle c-interest-table__icon'></span>
								</div>
								<div class="c-flyout__content">
									<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
										& click</p>
								</div>
							</div>
						</div>
					</button>
				</li>
			</ul>
			<div class="c-input  c-input--select c-interest-table__collapse">
				<label class="c-input__label " for="input-select-1">Rentehistoriek:</label>
				<div class="c-input__wrapper
			c-input__wrapper--with-icon
			">
					<select class="c-input__select" id="input-select-1" name="input-select-1">
						<option value="">Juli 2019</option>
						<option value="">Augustus 2019</option>
						<option value="">September 2019</option>
					</select>
					<span class="c-input__icon fas fa-sort-down"></span>
				</div>
			</div>
		</div>
		<div class="c-interest-table__content-container l-indent-right">
			<div class="c-interest-table__content" data-table-id="0">
				<table class="c-interest-table__item" cellspacing="0">
					<tbody class="c-interest-table__body c-interest-table__body--bg-gray">
						<tr class="c-interest-table__row-header">
							<th class="c-interest-table__head c-interest-table__head--with-icon c-interest-table__head--sticky">
								<span>Perioden</span>
								<div class="c-interest-table__flyout c-interest-table__flyout--small u-show@tablet">
									<div class="c-flyout js-flyout ">
										<div class="c-flyout__trigger ">
											<span class='fas fa-info-circle c-interest-table__icon'></span>
										</div>
										<div class="c-flyout__content">
											<p>dit is een tooltip met extra info, deze verschijnt enkel on hover & click</p>
										</div>
									</div>
								</div>
							</th>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">1 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">2 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">3 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">4 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">5 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">6 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">7 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">8 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">9 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">10 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">12 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">15 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">20 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">25 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">30 jaar</td>
						</tr>
					</tbody>
				</table>
				<div class="c-interest-table__item c-interest-table__item--toggle">
					<table class="c-interest-table__item-content" cellspacing="0">
						<tbody class="c-interest-table__body">
							<tr class="c-interest-table__row-header">
								<th class="c-interest-table__head">NHG</th>
								<th class="c-interest-table__head">t/m 65%</th>
								<th class="c-interest-table__head">t/m 80%</th>
								<th class="c-interest-table__head">t/m 95%</th>
								<th class="c-interest-table__head">t/m 106%</th>
								<th class="c-interest-table__head c-interest-table__head--last">t/m 115%</th>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="c-interest-table__content" data-table-id="1">
				<table class="c-interest-table__item" cellspacing="0">
					<tbody class="c-interest-table__body c-interest-table__body--bg-gray">
						<tr class="c-interest-table__row-header">
							<th class="c-interest-table__head c-interest-table__head--with-icon c-interest-table__head--sticky">
								<span>Perioden</span>
								<div class="c-interest-table__flyout c-interest-table__flyout--small u-show@tablet">
									<div class="c-flyout js-flyout ">
										<div class="c-flyout__trigger ">
											<span class='fas fa-info-circle c-interest-table__icon'></span>
										</div>
										<div class="c-flyout__content">
											<p>dit is een tooltip met extra info, deze verschijnt enkel on hover & click</p>
										</div>
									</div>
								</div>
							</th>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">1 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">2 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">3 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">4 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">5 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">6 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">7 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">8 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">9 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">10 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">12 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">15 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">20 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">25 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">30 jaar</td>
						</tr>
					</tbody>
				</table>
				<div class="c-interest-table__item c-interest-table__item--toggle">
					<table class="c-interest-table__item-content" cellspacing="0">
						<tbody class="c-interest-table__body">
							<tr class="c-interest-table__row-header">
								<th class="c-interest-table__head">NHG</th>
								<th class="c-interest-table__head">t/m 65%</th>
								<th class="c-interest-table__head">t/m 80%</th>
								<th class="c-interest-table__head">t/m 95%</th>
								<th class="c-interest-table__head">t/m 106%</th>
								<th class="c-interest-table__head c-interest-table__head--last">t/m 115%</th>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="c-interest-table__content" data-table-id="2">
				<table class="c-interest-table__item" cellspacing="0">
					<tbody class="c-interest-table__body c-interest-table__body--bg-gray">
						<tr class="c-interest-table__row-header">
							<th class="c-interest-table__head c-interest-table__head--with-icon c-interest-table__head--sticky">
								<span>Perioden</span>
								<div class="c-interest-table__flyout c-interest-table__flyout--small u-show@tablet">
									<div class="c-flyout js-flyout ">
										<div class="c-flyout__trigger ">
											<span class='fas fa-info-circle c-interest-table__icon'></span>
										</div>
										<div class="c-flyout__content">
											<p>dit is een tooltip met extra info, deze verschijnt enkel on hover & click</p>
										</div>
									</div>
								</div>
							</th>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">1 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">2 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">3 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">4 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">5 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">6 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">7 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">8 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">9 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">10 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">12 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">15 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">20 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">25 jaar</td>
						</tr>
						<tr class="c-interest-table__static">
							<td class="c-interest-table__data">30 jaar</td>
						</tr>
					</tbody>
				</table>
				<div class="c-interest-table__item c-interest-table__item--toggle">
					<table class="c-interest-table__item-content" cellspacing="0">
						<tbody class="c-interest-table__body">
							<tr class="c-interest-table__row-header">
								<th class="c-interest-table__head">NHG</th>
								<th class="c-interest-table__head">t/m 65%</th>
								<th class="c-interest-table__head">t/m 80%</th>
								<th class="c-interest-table__head">t/m 95%</th>
								<th class="c-interest-table__head">t/m 106%</th>
								<th class="c-interest-table__head c-interest-table__head--last">t/m 115%</th>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
							<tr class="c-interest-table__row  c-interest-table__row--expandable ">
								<td class="c-interest-table__data">1.54%</td>
								<td class="c-interest-table__data">1.4%</td>
								<td class="c-interest-table__data">1.5%</td>
								<td class="c-interest-table__data">1.6%</td>
								<td class="c-interest-table__data">1.8%</td>
								<td class="c-interest-table__data">2.2%</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<button class="c-interest-table__expand">
			<span class="c-interest-table__expand-text">meer rentes</span>
			<span class="fas fa-sort-down c-interest-table__expand-icon"></span>
		</button>
	</div>
</div>
			

		

Documentation

Modifiers

  • c-interest-table__head--last

    Selects the last item of the table header and adds a border radius to the upper right corner.

  • c-interest-table__head--with-icon

    Selects the item of the table header which contains an information icon and sets the position to relative to show the icon on desktop screens and bigger.

  • c-interest-table__row--expandable

    Selects the rows of the table that can be hidden or visible on mobile and tablet.

  • c-interest-table__item--toggle

    Selects a part of the table that can be horizontally scrollable on tablet and mobile.

  • c-interest-table__body--bg-gray

    Makes the background of the first column of the table gray on mobile and tablet.