Table
v0.0.0
Default #
This is a default table
| carry | loko | cleanse |
|---|---|---|
| flexitarian | hashtag | PBR&B |
| mumblecore | farm-to-table | slow-carb |
| tousled | squid | slow-carb |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
carry
</th>
<th scope="col">
loko
</th>
<th scope="col">
cleanse
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
flexitarian
</td>
<td>
hashtag
</td>
<td>
PBR&B
</td>
</tr>
<tr>
<td>
mumblecore
</td>
<td>
farm-to-table
</td>
<td>
slow-carb
</td>
</tr>
<tr>
<td>
tousled
</td>
<td>
squid
</td>
<td>
slow-carb
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Columns (cells) can be left or right aligned. By using the .text-right utility class from Bootstrap.
| intelligentsia | vegan | wolf |
|---|---|---|
| try-hard | yr | vegan |
| paleo | skateboard | actually |
| gastropub | keytar | dreamcatcher |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
intelligentsia
</th>
<th class="text-right" scope="col">
vegan
</th>
<th class="text-right" scope="col">
wolf
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
try-hard
</td>
<td class="text-right">
yr
</td>
<td class="text-right">
vegan
</td>
</tr>
<tr>
<td>
paleo
</td>
<td class="text-right">
skateboard
</td>
<td class="text-right">
actually
</td>
</tr>
<tr>
<td>
gastropub
</td>
<td class="text-right">
keytar
</td>
<td class="text-right">
dreamcatcher
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Text in the table header is aligned to the bottom.
Text in the other table cells is aligned to the top.
| sriracha lomo flannel | hoodie | mustache |
|---|---|---|
| viral franzen sartorial | wayfarers | readymade |
| helvetica neutra pinterest | blog | loko |
| whatever sustainable tofu | disrupt | actually |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
<span style="max-width: 120px; display: inline-block;">sriracha lomo flannel</span>
</th>
<th scope="col">
hoodie
</th>
<th scope="col">
mustache
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">viral franzen sartorial</span>
</td>
<td>
wayfarers
</td>
<td>
readymade
</td>
</tr>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">helvetica neutra pinterest</span>
</td>
<td>
blog
</td>
<td>
loko
</td>
</tr>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">whatever sustainable tofu</span>
</td>
<td>
disrupt
</td>
<td>
actually
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>When the table is too wide for its container, the table can scroll, and navigation buttons appear.
| wayfarers | austin | slow-carb | sriracha | actually | lo-fi | blog | sustainable | listicle | YOLO |
|---|---|---|---|---|---|---|---|---|---|
| semiotics | loko | truffaut | bushwick | fingerstache | whatever | plaid | kinfolk | carry | meditation |
| selvage | sartorial | asymmetrical | pickled | freegan | salvia | viral | plaid | forage | health |
| tacos | pickled | paleo | meditation | ethical | tacos | mlkshk | pitchfork | drinking | hashtag |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
wayfarers
</th>
<th scope="col">
austin
</th>
<th scope="col">
slow-carb
</th>
<th scope="col">
sriracha
</th>
<th scope="col">
actually
</th>
<th scope="col">
lo-fi
</th>
<th scope="col">
blog
</th>
<th scope="col">
sustainable
</th>
<th scope="col">
listicle
</th>
<th scope="col">
YOLO
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
semiotics
</td>
<td>
loko
</td>
<td>
truffaut
</td>
<td>
bushwick
</td>
<td>
fingerstache
</td>
<td>
whatever
</td>
<td>
plaid
</td>
<td>
kinfolk
</td>
<td>
carry
</td>
<td>
meditation
</td>
</tr>
<tr>
<td>
selvage
</td>
<td>
sartorial
</td>
<td>
asymmetrical
</td>
<td>
pickled
</td>
<td>
freegan
</td>
<td>
salvia
</td>
<td>
viral
</td>
<td>
plaid
</td>
<td>
forage
</td>
<td>
health
</td>
</tr>
<tr>
<td>
tacos
</td>
<td>
pickled
</td>
<td>
paleo
</td>
<td>
meditation
</td>
<td>
ethical
</td>
<td>
tacos
</td>
<td>
mlkshk
</td>
<td>
pitchfork
</td>
<td>
drinking
</td>
<td>
hashtag
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>When the first column contains table header information for the rest of the row it can be made
'sticky' by using the data attribute data-table-row-header="true".
The 'sticky' left column can be minimised with a toggle button.
| hammock | waistcoat | health | irony | mlkshk | neutra | PBR&B | gentrify | tousled | mlkshk |
|---|---|---|---|---|---|---|---|---|---|
| marfa | selfies | biodiesel | church-key | slow-carb | fixie | drinking | 8-bit | celiac | church-key |
| distillery | iPhone | kinfolk | tousled | chia | 8-bit | cronut | tousled | schlitz | kickstarter |
| blog | kinfolk | cornhole | narwhal | humblebrag | sustainable | kitsch | mumblecore | skateboard | meditation |
<div class="vi-table vi-table-default" data-table-row-header="true">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
hammock
</th>
<th scope="col">
waistcoat
</th>
<th scope="col">
health
</th>
<th scope="col">
irony
</th>
<th scope="col">
mlkshk
</th>
<th scope="col">
neutra
</th>
<th scope="col">
PBR&B
</th>
<th scope="col">
gentrify
</th>
<th scope="col">
tousled
</th>
<th scope="col">
mlkshk
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
marfa
</th>
<td>
selfies
</td>
<td>
biodiesel
</td>
<td>
church-key
</td>
<td>
slow-carb
</td>
<td>
fixie
</td>
<td>
drinking
</td>
<td>
8-bit
</td>
<td>
celiac
</td>
<td>
church-key
</td>
</tr>
<tr>
<th scope="row">
distillery
</th>
<td>
iPhone
</td>
<td>
kinfolk
</td>
<td>
tousled
</td>
<td>
chia
</td>
<td>
8-bit
</td>
<td>
cronut
</td>
<td>
tousled
</td>
<td>
schlitz
</td>
<td>
kickstarter
</td>
</tr>
<tr>
<th scope="row">
blog
</th>
<td>
kinfolk
</td>
<td>
cornhole
</td>
<td>
narwhal
</td>
<td>
humblebrag
</td>
<td>
sustainable
</td>
<td>
kitsch
</td>
<td>
mumblecore
</td>
<td>
skateboard
</td>
<td>
meditation
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Full width #
| letterpress | street | ennui | scenester | squid | gastropub | sriracha | disrupt | meggings | mixtape | kombucha | kogi | kitsch |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| hashtag | intelligentsia | distillery | organic | kitsch | pop-up | taxidermy | paleo | truffaut | organic | gluten-free | wayfarers | everyday |
| crucifix | loko | tofu | tattooed | kitsch | ethical | williamsburg | echo | kickstarter | cleanse | kickstarter | gastropub | gastropub |
| cliche | etsy | literally | literally | semiotics | plaid | forage | VHS | biodiesel | +1 | bitters | flannel | tousled |
<!-- Container -->
<div class="vi-container">
<div class="vi-table vi-table-default" data-table-row-header="true">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
letterpress
</th>
<th scope="col">
street
</th>
<th scope="col">
ennui
</th>
<th scope="col">
scenester
</th>
<th scope="col">
squid
</th>
<th scope="col">
gastropub
</th>
<th scope="col">
sriracha
</th>
<th scope="col">
disrupt
</th>
<th scope="col">
meggings
</th>
<th scope="col">
mixtape
</th>
<th scope="col">
kombucha
</th>
<th scope="col">
kogi
</th>
<th scope="col">
kitsch
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
hashtag
</th>
<td>
intelligentsia
</td>
<td>
distillery
</td>
<td>
organic
</td>
<td>
kitsch
</td>
<td>
pop-up
</td>
<td>
taxidermy
</td>
<td>
paleo
</td>
<td>
truffaut
</td>
<td>
organic
</td>
<td>
gluten-free
</td>
<td>
wayfarers
</td>
<td>
everyday
</td>
</tr>
<tr>
<th scope="row">
crucifix
</th>
<td>
loko
</td>
<td>
tofu
</td>
<td>
tattooed
</td>
<td>
kitsch
</td>
<td>
ethical
</td>
<td>
williamsburg
</td>
<td>
echo
</td>
<td>
kickstarter
</td>
<td>
cleanse
</td>
<td>
kickstarter
</td>
<td>
gastropub
</td>
<td>
gastropub
</td>
</tr>
<tr>
<th scope="row">
cliche
</th>
<td>
etsy
</td>
<td>
literally
</td>
<td>
literally
</td>
<td>
semiotics
</td>
<td>
plaid
</td>
<td>
forage
</td>
<td>
VHS
</td>
<td>
biodiesel
</td>
<td>
+1
</td>
<td>
bitters
</td>
<td>
flannel
</td>
<td>
tousled
</td>
</tr>
</tbody>
</table>
</div>
<!-- Container (mods: --column, --) -->
<div class="vi-container vi-container--column vi-container--">
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>
</div>
</div>Aligned #
The full width table can be aligned to the left/right.
To align a table:
- add modifier
.vi-table--align-{direction}and.vi-container--table-align-{direction}. - add modifier
--align-{direction}to element with class.vi-table. - add modifier
--table-align-{direction}to the Container wrapping the footer.
Where {direction} can be start or end.
| poutine | wayfarers | etsy | pickled | cliche | sartorial | irony | vegan | slow-carb | austin | literally | squid | YOLO |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| kickstarter ethical microdosing occupy typewriter | biodiesel 8-bit gentrify park truffaut brooklyn | authentic | chartreuse | mixtape | squid | letterpress | cliche | Thundercats | whatever | actually | cornhole | pop-up |
| intelligentsia leggings biodiesel skateboard helvetica | hashtag portland pug tacos Thundercats Godard | sustainable | pour-over | hella | YOLO | flannel | chartreuse | letterpress | swag | pitchfork | chicharrones | hashtag |
| ramps sartorial humblebrag brooklyn flannel | everyday squid knausgaard kickstarter kombucha hashtag | ennui | lomo | bushwick | sriracha | distillery | readymade | organic | freegan | sustainable | tousled | cronut |
[visual alignment test]
| asymmetrical | locavore | beard | neutra | celiac | echo | knausgaard | umami | stumptown | pug | synth | brunch | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| kitsch | freegan cliche bushwick truffaut lumbersexual letterpress | ugh | meditation | letterpress | salvia | shoreditch | migas | yr | synth | umami | viral | yr |
| Thundercats | slow-carb tousled polaroid pitchfork chambray carry | gastropub | post-ironic | flexitarian | chartreuse | bespoke | cliche | sartorial | hammock | post-ironic | actually | |
| roof | meggings cornhole microdosing iPhone pop-up slow-carb | kombucha | church-key | franzen | seitan | banjo | hoodie | kitsch | butcher | pickled | dreamcatcher | tumblr |
<!-- Container -->
<div class="vi-container">
<div class="vi-table vi-table-default vi-table--align-start" data-table-row-header="true">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
poutine
</th>
<th scope="col">
wayfarers
</th>
<th scope="col">
etsy
</th>
<th scope="col">
pickled
</th>
<th scope="col">
cliche
</th>
<th scope="col">
sartorial
</th>
<th scope="col">
irony
</th>
<th scope="col">
vegan
</th>
<th scope="col">
slow-carb
</th>
<th scope="col">
austin
</th>
<th scope="col">
literally
</th>
<th scope="col">
squid
</th>
<th scope="col">
YOLO
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
kickstarter ethical microdosing occupy typewriter
</th>
<td>
biodiesel 8-bit gentrify park truffaut brooklyn
</td>
<td>
authentic
</td>
<td>
chartreuse
</td>
<td>
mixtape
</td>
<td>
squid
</td>
<td>
letterpress
</td>
<td>
cliche
</td>
<td>
Thundercats
</td>
<td>
whatever
</td>
<td>
actually
</td>
<td>
cornhole
</td>
<td>
pop-up
</td>
</tr>
<tr>
<th scope="row">
intelligentsia leggings biodiesel skateboard helvetica
</th>
<td>
hashtag portland pug tacos Thundercats Godard
</td>
<td>
sustainable
</td>
<td>
pour-over
</td>
<td>
hella
</td>
<td>
YOLO
</td>
<td>
flannel
</td>
<td>
chartreuse
</td>
<td>
letterpress
</td>
<td>
swag
</td>
<td>
pitchfork
</td>
<td>
chicharrones
</td>
<td>
hashtag
</td>
</tr>
<tr>
<th scope="row">
ramps sartorial humblebrag brooklyn flannel
</th>
<td>
everyday squid knausgaard kickstarter kombucha hashtag
</td>
<td>
ennui
</td>
<td>
lomo
</td>
<td>
bushwick
</td>
<td>
sriracha
</td>
<td>
distillery
</td>
<td>
readymade
</td>
<td>
organic
</td>
<td>
freegan
</td>
<td>
sustainable
</td>
<td>
tousled
</td>
<td>
cronut
</td>
</tr>
</tbody>
</table>
</div>
<!-- Container (mods: --column, --table-align-start) -->
<div class="vi-container vi-container--column vi-container--table-align-start">
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Container -->
<div class="vi-container">
<div class="vi-table vi-table-default vi-table--align-end" data-table-row-header="true">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
asymmetrical
</th>
<th scope="col">
locavore
</th>
<th scope="col">
beard
</th>
<th scope="col">
neutra
</th>
<th scope="col">
celiac
</th>
<th scope="col">
echo
</th>
<th scope="col">
knausgaard
</th>
<th scope="col">
umami
</th>
<th scope="col">
stumptown
</th>
<th scope="col">
pinterest
</th>
<th scope="col">
pug
</th>
<th scope="col">
synth
</th>
<th scope="col">
brunch
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
kitsch
</th>
<td>
freegan cliche bushwick truffaut lumbersexual letterpress
</td>
<td>
ugh
</td>
<td>
meditation
</td>
<td>
letterpress
</td>
<td>
salvia
</td>
<td>
shoreditch
</td>
<td>
migas
</td>
<td>
yr
</td>
<td>
synth
</td>
<td>
umami
</td>
<td>
viral
</td>
<td>
yr
</td>
</tr>
<tr>
<th scope="row">
Thundercats
</th>
<td>
slow-carb tousled polaroid pitchfork chambray carry
</td>
<td>
gastropub
</td>
<td>
post-ironic
</td>
<td>
flexitarian
</td>
<td>
chartreuse
</td>
<td>
bespoke
</td>
<td>
cliche
</td>
<td>
sartorial
</td>
<td>
hammock
</td>
<td>
post-ironic
</td>
<td>
actually
</td>
<td>
pinterest
</td>
</tr>
<tr>
<th scope="row">
roof
</th>
<td>
meggings cornhole microdosing iPhone pop-up slow-carb
</td>
<td>
kombucha
</td>
<td>
church-key
</td>
<td>
franzen
</td>
<td>
seitan
</td>
<td>
banjo
</td>
<td>
hoodie
</td>
<td>
kitsch
</td>
<td>
butcher
</td>
<td>
pickled
</td>
<td>
dreamcatcher
</td>
<td>
tumblr
</td>
</tr>
</tbody>
</table>
</div>
<!-- Container (mods: --column, --table-align-end) -->
<div class="vi-container vi-container--column vi-container--table-align-end">
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>
</div>
</div>Color variants #
Following color variants are available:
--accent-1--accent-2
--accent-1
| schlitz | helvetica | chia |
|---|---|---|
| post-ironic | authentic | migas |
| park | migas | shoreditch |
| leggings | tacos |
--accent-2
| blog | lo-fi | normcore |
|---|---|---|
| bespoke | street | DIY |
| normcore | tilde | meditation |
| cronut | typewriter | locavore |
<div class="vi-table vi-table-default vi-table-default--accent-1">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
schlitz
</th>
<th scope="col">
helvetica
</th>
<th scope="col">
chia
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
post-ironic
</td>
<td>
authentic
</td>
<td>
migas
</td>
</tr>
<tr>
<td>
park
</td>
<td>
migas
</td>
<td>
shoreditch
</td>
</tr>
<tr>
<td>
leggings
</td>
<td>
pinterest
</td>
<td>
tacos
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>
<div class="vi-table vi-table-default vi-table-default--accent-2">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
blog
</th>
<th scope="col">
lo-fi
</th>
<th scope="col">
normcore
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
bespoke
</td>
<td>
street
</td>
<td>
DIY
</td>
</tr>
<tr>
<td>
normcore
</td>
<td>
tilde
</td>
<td>
meditation
</td>
</tr>
<tr>
<td>
cronut
</td>
<td>
typewriter
</td>
<td>
locavore
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Small #
This is a table type "small".
| mixtape | brooklyn | chicharrones | butcher | tousled | 8-bit |
|---|---|---|---|---|---|
| kickstarter | vinyl | post-ironic | selvage | flannel | seitan |
| listicle | flannel | letterpress | ennui | intelligentsia | offal |
| gluten-free | carry | keffiyeh | banjo | gastropub | williamsburg |
| whatever | kickstarter | drinking | narwhal | iPhone | pickled |
| fixie | cliche | Godard | umami | Thundercats | listicle |
| forage | wolf | pickled | hoodie | yr | selvage |
<div class="vi-table vi-table-small" data-table-row-header="true">
<div class="vi-table__inner vi-table-small__inner">
<table>
<thead>
<tr>
<th>
mixtape
</th>
<th>
brooklyn
</th>
<th>
chicharrones
</th>
<th>
butcher
</th>
<th>
tousled
</th>
<th>
8-bit
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
kickstarter
</td>
<td>
vinyl
</td>
<td>
post-ironic
</td>
<td>
selvage
</td>
<td>
flannel
</td>
<td>
seitan
</td>
</tr>
<tr>
<td>
listicle
</td>
<td>
flannel
</td>
<td>
letterpress
</td>
<td>
ennui
</td>
<td>
intelligentsia
</td>
<td>
offal
</td>
</tr>
<tr>
<td>
gluten-free
</td>
<td>
carry
</td>
<td>
keffiyeh
</td>
<td>
banjo
</td>
<td>
gastropub
</td>
<td>
williamsburg
</td>
</tr>
<tr>
<td>
whatever
</td>
<td>
kickstarter
</td>
<td>
drinking
</td>
<td>
narwhal
</td>
<td>
iPhone
</td>
<td>
pickled
</td>
</tr>
<tr>
<td>
fixie
</td>
<td>
cliche
</td>
<td>
Godard
</td>
<td>
umami
</td>
<td>
Thundercats
</td>
<td>
listicle
</td>
</tr>
<tr>
<td>
forage
</td>
<td>
wolf
</td>
<td>
pickled
</td>
<td>
hoodie
</td>
<td>
yr
</td>
<td>
selvage
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Mini #
This is a table type "Mini".
| franzen | flexitarian | distillery |
|---|---|---|
| biodiesel | poutine | tofu |
| Thundercats | mustache | artisan |
| semiotics | asymmetrical |
<div class="vi-table vi-table-mini">
<div class="vi-table__inner vi-table-mini__inner">
<div class="vi-table__cutter vi-table-mini__cutter">
<table>
<thead>
<tr>
<th scope="col">
franzen
</th>
<th scope="col">
flexitarian
</th>
<th scope="col">
distillery
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-weight-bold">
biodiesel
</td>
<td>
poutine
</td>
<td>
tofu
</td>
</tr>
<tr>
<td class="font-weight-bold">
Thundercats
</td>
<td>
mustache
</td>
<td>
artisan
</td>
</tr>
<tr>
<td class="font-weight-bold">
semiotics
</td>
<td>
asymmetrical
</td>
<td>
pinterest
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button class="vi-btn-slider vi-btn-slider--collapse vi-btn" type="button">
<span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span>
</button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button class="vi-btn-slider vi-btn-slider--expand vi-btn" type="button">
<span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span>
</button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn" disabled type="button">
<span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span>
</button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn" disabled type="button">
<span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>Add class .accent-1 to change the color of the table.
| franzen | flexitarian | distillery |
|---|---|---|
| biodiesel | poutine | tofu |
| Thundercats | mustache | artisan |
| semiotics | asymmetrical |
<div class="vi-table vi-table-mini accent-1">
<div class="vi-table__inner vi-table-mini__inner">
<div class="vi-table__cutter vi-table-mini__cutter">
<table>
<thead>
<tr>
<th scope="col">
franzen
</th>
<th scope="col">
flexitarian
</th>
<th scope="col">
distillery
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-weight-bold">
biodiesel
</td>
<td>
poutine
</td>
<td>
tofu
</td>
</tr>
<tr>
<td class="font-weight-bold">
Thundercats
</td>
<td>
mustache
</td>
<td>
artisan
</td>
</tr>
<tr>
<td class="font-weight-bold">
semiotics
</td>
<td>
asymmetrical
</td>
<td>
pinterest
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button class="vi-btn-slider vi-btn-slider--collapse vi-btn" type="button">
<span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span>
</button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button class="vi-btn-slider vi-btn-slider--expand vi-btn" type="button">
<span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span>
</button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn" disabled type="button">
<span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span>
</button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn" disabled type="button">
<span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>Collapse #
Use generic modifier .vi-table--collapse to collapse the minimal column width.
--collapse
| beard | microdosing | forage | meggings | fixie | flexitarian | ethical |
|---|---|---|---|---|---|---|
| yr | keffiyeh | organic | venmo | actually | roof | XOXO |
| artisan | polaroid | master | offal | whatever | farm-to-table | synth |
| cornhole | mlkshk | gentrify | retro | williamsburg | farm-to-table | park |
<div class="vi-table vi-table-default vi-table--collapse">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
beard
</th>
<th scope="col">
microdosing
</th>
<th scope="col">
forage
</th>
<th scope="col">
meggings
</th>
<th scope="col">
fixie
</th>
<th scope="col">
flexitarian
</th>
<th scope="col">
ethical
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
yr
</td>
<td>
keffiyeh
</td>
<td>
organic
</td>
<td>
venmo
</td>
<td>
actually
</td>
<td>
roof
</td>
<td>
XOXO
</td>
</tr>
<tr>
<td>
artisan
</td>
<td>
polaroid
</td>
<td>
master
</td>
<td>
offal
</td>
<td>
whatever
</td>
<td>
farm-to-table
</td>
<td>
synth
</td>
</tr>
<tr>
<td>
cornhole
</td>
<td>
mlkshk
</td>
<td>
gentrify
</td>
<td>
retro
</td>
<td>
williamsburg
</td>
<td>
farm-to-table
</td>
<td>
park
</td>
</tr>
</tbody>
</table>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Ingetration #
This is integration, but show must go on for now, until it breaks.
without placeholder
| Table row for visual purposes | |||||||||||||||||||||||||||||||||||||||||
| Discounted total price: | € 14,10 | ||||||||||||||||||||||||||||||||||||||||
with placeholder
| Table row for visual purposes | |||||||||||||||||||||||||||||||||||||||||
| Discounted total price: | € 14,10 | ||||||||||||||||||||||||||||||||||||||||
<p class="mb-0 mt-10 sg-hidden text-muted small">without placeholder</p>
<div class="vi-table vi-table-mini vi-table--collapse">
<div class="vi-table__inner vi-table-mini__inner">
<div class="vi-table-mini__cutter">
<table style="width: 100%">
<tbody>
<tr>
<td class="text-neutral-70" colspan="42">
Table row for visual purposes
</td>
</tr>
<tr class="vi-impersonating-discount-bar">
<td class="vi-impersonating-discount-bar__select-cell" colspan="2">
<form action="#form-499414" autocomplete="off" class="vi-form vi-form--outline" data-validate="false" novalidate="">
<div class="form-group">
<label for="control-302452">Additional discount</label>
<select aria-required="true" class="custom-select custom-select-sm" id="control-302452" name="name-ae15ab" required="">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
</select>
</div>
</form>
</td>
<td colspan="3"></td>
<td class="vi-impersonating-discount-bar__total-label-cell" colspan="2">
Discounted total price:
</td>
<td class="vi-impersonating-discount-bar__total-price-cell" colspan="1">
€ 14,10
</td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>
<p class="mb-0 mt-10 sg-hidden text-muted small">with placeholder</p>
<div class="vi-table vi-table-mini vi-table--collapse">
<div class="vi-table__inner vi-table-mini__inner">
<div class="vi-table-mini__cutter">
<table style="width: 100%">
<tbody>
<tr>
<td class="text-neutral-70" colspan="42">
Table row for visual purposes
</td>
</tr>
<tr class="vi-impersonating-discount-bar">
<td class="vi-impersonating-discount-bar__select-cell" colspan="2">
<form action="#form-499414" autocomplete="off" class="vi-form vi-form--outline" data-validate="false" novalidate="">
<div class="form-group">
<label for="control-302452">Additional discount</label>
<select aria-required="true" class="custom-select custom-select-sm" id="control-302452" name="name-ae15ab" required="">
<option disabled hidden="hidden" selected value="">Pick</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
</select>
</div>
</form>
</td>
<td colspan="3"></td>
<td class="vi-impersonating-discount-bar__total-label-cell" colspan="2">
Discounted total price:
</td>
<td class="vi-impersonating-discount-bar__total-price-cell" colspan="1">
€ 14,10
</td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="vi-table__footer">
<div class="vi-table__toggler">
<div class="vi-table__toggle vi-table__toggle--collapse">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></button>
</div>
<div class="vi-table__toggle vi-table__toggle--expand">
<!-- Button type: slider -->
<button type="button" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></button>
</div>
</div>
<div class="vi-table__controls">
<div class="vi-table__navigation vi-table__navigation--prev">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
</div>
<div class="vi-table__navigation vi-table__navigation--next">
<!-- Button type: pagination -->
<button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 29 Sep 2025 - fix(table): fix issue when table has margins set.
- 12 Aug 2025 - fix(table): fix table in accordion issue.
- 19 Sep 2023 - Arrows fix on android devices and when ‘toggle sticky column’ button is clicked.
- 16 Aug 2023 - Increased css selector specifity in order for the ‘–collapse’ modifier to work as expected.
- 11 Aug 2023 - Fix on safari for discount not applying absolute positioning of the row.
- 21 Jul 2023 - Fix datepicker in table mixing up styles.
- 23 Jun 2023 - Arrow buttons behaviour acts on scroll.
- 23 Jun 2023 - Arrow buttons behaviour now works even with (externally set) margin
- 23 Jun 2023 - Fix outlines on arrow buttons table mini
- 02 Jun 2023 - Scrollbar peeking through on table Mini.
- 22 May 2023 - Fix table Mini not collapsing.
- 22 May 2023 - Fix padding table ‘almost unstyled’.
- Fix (iOS) Safari unable to stick.
- Fix fixate first column height when collapsed.
- Fix overlapping text on table type small when first column is collapsed.
Changed
- Fixate first column height when collapsed.
- If sticky, always show collapse button.
Added
- 17 May 2023 - Refactored table type mini and add modifier
--grayed-out
- 12 May 2023 - Add integration of
.vi-impersonating-discount-bar to table
- 10 Jan 2023 - Generic modifier
.vi-table--collapse for collapsing columns.
- 25 Nov 2022 - Table ‘mini’
- PBS support
- Two color variants to default table
--accent-1, --accent-2
- Initial draft