Table
v0.0.0
Default #
This is a default table
| franzen | flexitarian | distillery |
|---|---|---|
| biodiesel | poutine | tofu |
| Thundercats | mustache | artisan |
| semiotics | asymmetrical |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
franzen
</th>
<th scope="col">
flexitarian
</th>
<th scope="col">
distillery
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
biodiesel
</td>
<td>
poutine
</td>
<td>
tofu
</td>
</tr>
<tr>
<td>
Thundercats
</td>
<td>
mustache
</td>
<td>
artisan
</td>
</tr>
<tr>
<td>
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 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.
| viral | kombucha | bushwick |
|---|---|---|
| neutra | hammock | ugh |
| forage | swag | fingerstache |
| cred | tattooed | kinfolk |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
viral
</th>
<th class="text-right" scope="col">
kombucha
</th>
<th class="text-right" scope="col">
bushwick
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
neutra
</td>
<td class="text-right">
hammock
</td>
<td class="text-right">
ugh
</td>
</tr>
<tr>
<td>
forage
</td>
<td class="text-right">
swag
</td>
<td class="text-right">
fingerstache
</td>
</tr>
<tr>
<td>
cred
</td>
<td class="text-right">
tattooed
</td>
<td class="text-right">
kinfolk
</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.
| try-hard authentic vinyl | forage | distillery |
|---|---|---|
| yr blog cleanse | cardigan | vegan |
| farm-to-table crucifix tofu | Yuccie | gentrify |
| fingerstache whatever semiotics | cornhole | church-key |
<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;">try-hard authentic vinyl</span>
</th>
<th scope="col">
forage
</th>
<th scope="col">
distillery
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">yr blog cleanse</span>
</td>
<td>
cardigan
</td>
<td>
vegan
</td>
</tr>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">farm-to-table crucifix tofu</span>
</td>
<td>
Yuccie
</td>
<td>
gentrify
</td>
</tr>
<tr>
<td>
<span style="max-width: 120px; display: inline-block;">fingerstache whatever semiotics</span>
</td>
<td>
cornhole
</td>
<td>
church-key
</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.
| retro | chillwave | chillwave | kogi | keffiyeh | pop-up | tumblr | semiotics | disrupt | forage |
|---|---|---|---|---|---|---|---|---|---|
| DIY | cornhole | mixtape | truffaut | waistcoat | hashtag | mixtape | tousled | austin | sriracha |
| marfa | wolf | brooklyn | actually | cronut | wayfarers | synth | typewriter | poutine | chillwave |
| migas | gentrify | typewriter | franzen | kinfolk | artisan | intelligentsia | meggings | sustainable | vinegar |
<div class="vi-table vi-table-default">
<div class="vi-table__inner vi-table-default__inner">
<table>
<thead>
<tr>
<th scope="col">
retro
</th>
<th scope="col">
chillwave
</th>
<th scope="col">
chillwave
</th>
<th scope="col">
kogi
</th>
<th scope="col">
keffiyeh
</th>
<th scope="col">
pop-up
</th>
<th scope="col">
tumblr
</th>
<th scope="col">
semiotics
</th>
<th scope="col">
disrupt
</th>
<th scope="col">
forage
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DIY
</td>
<td>
cornhole
</td>
<td>
mixtape
</td>
<td>
truffaut
</td>
<td>
waistcoat
</td>
<td>
hashtag
</td>
<td>
mixtape
</td>
<td>
tousled
</td>
<td>
austin
</td>
<td>
sriracha
</td>
</tr>
<tr>
<td>
marfa
</td>
<td>
wolf
</td>
<td>
brooklyn
</td>
<td>
actually
</td>
<td>
cronut
</td>
<td>
wayfarers
</td>
<td>
synth
</td>
<td>
typewriter
</td>
<td>
poutine
</td>
<td>
chillwave
</td>
</tr>
<tr>
<td>
migas
</td>
<td>
gentrify
</td>
<td>
typewriter
</td>
<td>
franzen
</td>
<td>
kinfolk
</td>
<td>
artisan
</td>
<td>
intelligentsia
</td>
<td>
meggings
</td>
<td>
sustainable
</td>
<td>
vinegar
</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.
| umami | crucifix | paleo | lomo | ramps | ramps | flannel | quinoa | cliche | kickstarter |
|---|---|---|---|---|---|---|---|---|---|
| street | +1 | ugh | bespoke | meggings | selfies | gastropub | chartreuse | cornhole | paleo |
| cleanse | chicharrones | organic | disrupt | aesthetic | portland | PBR&B | wolf | lo-fi | brooklyn |
| listicle | brunch | mustache | salvia | neutra | post-ironic | farm-to-table | pickled | irony | asymmetrical |
<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">
umami
</th>
<th scope="col">
crucifix
</th>
<th scope="col">
paleo
</th>
<th scope="col">
lomo
</th>
<th scope="col">
ramps
</th>
<th scope="col">
ramps
</th>
<th scope="col">
flannel
</th>
<th scope="col">
quinoa
</th>
<th scope="col">
cliche
</th>
<th scope="col">
kickstarter
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
street
</th>
<td>
+1
</td>
<td>
ugh
</td>
<td>
bespoke
</td>
<td>
meggings
</td>
<td>
selfies
</td>
<td>
gastropub
</td>
<td>
chartreuse
</td>
<td>
cornhole
</td>
<td>
paleo
</td>
</tr>
<tr>
<th scope="row">
cleanse
</th>
<td>
chicharrones
</td>
<td>
organic
</td>
<td>
disrupt
</td>
<td>
aesthetic
</td>
<td>
portland
</td>
<td>
PBR&B
</td>
<td>
wolf
</td>
<td>
lo-fi
</td>
<td>
brooklyn
</td>
</tr>
<tr>
<th scope="row">
listicle
</th>
<td>
brunch
</td>
<td>
mustache
</td>
<td>
salvia
</td>
<td>
neutra
</td>
<td>
post-ironic
</td>
<td>
farm-to-table
</td>
<td>
pickled
</td>
<td>
irony
</td>
<td>
asymmetrical
</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 #
| humblebrag | banjo | VHS | listicle | hammock | phlogiston | mixtape | selvage | 8-bit | seitan | +1 | yr | kitsch |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| squid | mumblecore | meh | twee | scenester | vinegar | authentic | artisan | austin | salvia | 8-bit | meh | skateboard |
| celiac | yr | microdosing | hammock | ethical | mustache | everyday | cliche | lomo | hella | knausgaard | narwhal | semiotics |
| bushwick | synth | mlkshk | aesthetic | whatever | literally | chambray | post-ironic | phlogiston | migas | cred | gluten-free | humblebrag |
<!-- 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">
humblebrag
</th>
<th scope="col">
banjo
</th>
<th scope="col">
VHS
</th>
<th scope="col">
listicle
</th>
<th scope="col">
hammock
</th>
<th scope="col">
phlogiston
</th>
<th scope="col">
mixtape
</th>
<th scope="col">
selvage
</th>
<th scope="col">
8-bit
</th>
<th scope="col">
seitan
</th>
<th scope="col">
+1
</th>
<th scope="col">
yr
</th>
<th scope="col">
kitsch
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
squid
</th>
<td>
mumblecore
</td>
<td>
meh
</td>
<td>
twee
</td>
<td>
scenester
</td>
<td>
vinegar
</td>
<td>
authentic
</td>
<td>
artisan
</td>
<td>
austin
</td>
<td>
salvia
</td>
<td>
8-bit
</td>
<td>
meh
</td>
<td>
skateboard
</td>
</tr>
<tr>
<th scope="row">
celiac
</th>
<td>
yr
</td>
<td>
microdosing
</td>
<td>
hammock
</td>
<td>
ethical
</td>
<td>
mustache
</td>
<td>
everyday
</td>
<td>
cliche
</td>
<td>
lomo
</td>
<td>
hella
</td>
<td>
knausgaard
</td>
<td>
narwhal
</td>
<td>
semiotics
</td>
</tr>
<tr>
<th scope="row">
bushwick
</th>
<td>
synth
</td>
<td>
mlkshk
</td>
<td>
aesthetic
</td>
<td>
whatever
</td>
<td>
literally
</td>
<td>
chambray
</td>
<td>
post-ironic
</td>
<td>
phlogiston
</td>
<td>
migas
</td>
<td>
cred
</td>
<td>
gluten-free
</td>
<td>
humblebrag
</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.
| drinking | butcher | mustache | dreamcatcher | tacos | meggings | banjo | knausgaard | bushwick | chia | neutra | drinking | hammock |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| selfies actually health park cornhole | shoreditch fixie skateboard offal hashtag pop-up | cold-pressed | humblebrag | gentrify | tofu | fixie | phlogiston | church-key | phlogiston | shoreditch | swag | ugh |
| tacos helvetica Thundercats blog gentrify | pabst viral marfa cardigan beard mustache | XOXO | pitchfork | artisan | mustache | blog | carry | williamsburg | chartreuse | scenester | mixtape | Yuccie |
| everyday church-key skateboard narwhal loko | letterpress salvia squid everyday etsy try-hard | keytar | keffiyeh | yr | mustache | pabst | intelligentsia | banjo | XOXO | lumbersexual | ugh | keffiyeh |
[visual alignment test]
| cold-pressed | microdosing | swag | semiotics | YOLO | seitan | occupy | meditation | cleanse | master | asymmetrical | biodiesel | locavore |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| polaroid | pop-up chicharrones shoreditch offal pug echo | artisan | chartreuse | intelligentsia | cornhole | celiac | bitters | carry | selvage | intelligentsia | irony | tacos |
| tilde | sartorial everyday artisan vinyl goth neutra | echo | vinyl | cold-pressed | pop-up | pitchfork | aesthetic | typewriter | mustache | disrupt | vice | ugh |
| roof | brunch butcher disrupt echo freegan post-ironic | mustache | +1 | listicle | tilde | skateboard | letterpress | sartorial | wolf | bushwick | goth | lo-fi |
<!-- 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">
drinking
</th>
<th scope="col">
butcher
</th>
<th scope="col">
mustache
</th>
<th scope="col">
dreamcatcher
</th>
<th scope="col">
tacos
</th>
<th scope="col">
meggings
</th>
<th scope="col">
banjo
</th>
<th scope="col">
knausgaard
</th>
<th scope="col">
bushwick
</th>
<th scope="col">
chia
</th>
<th scope="col">
neutra
</th>
<th scope="col">
drinking
</th>
<th scope="col">
hammock
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
selfies actually health park cornhole
</th>
<td>
shoreditch fixie skateboard offal hashtag pop-up
</td>
<td>
cold-pressed
</td>
<td>
humblebrag
</td>
<td>
gentrify
</td>
<td>
tofu
</td>
<td>
fixie
</td>
<td>
phlogiston
</td>
<td>
church-key
</td>
<td>
phlogiston
</td>
<td>
shoreditch
</td>
<td>
swag
</td>
<td>
ugh
</td>
</tr>
<tr>
<th scope="row">
tacos helvetica Thundercats blog gentrify
</th>
<td>
pabst viral marfa cardigan beard mustache
</td>
<td>
XOXO
</td>
<td>
pitchfork
</td>
<td>
artisan
</td>
<td>
mustache
</td>
<td>
blog
</td>
<td>
carry
</td>
<td>
williamsburg
</td>
<td>
chartreuse
</td>
<td>
scenester
</td>
<td>
mixtape
</td>
<td>
Yuccie
</td>
</tr>
<tr>
<th scope="row">
everyday church-key skateboard narwhal loko
</th>
<td>
letterpress salvia squid everyday etsy try-hard
</td>
<td>
keytar
</td>
<td>
keffiyeh
</td>
<td>
yr
</td>
<td>
mustache
</td>
<td>
pabst
</td>
<td>
intelligentsia
</td>
<td>
banjo
</td>
<td>
XOXO
</td>
<td>
lumbersexual
</td>
<td>
ugh
</td>
<td>
keffiyeh
</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">
cold-pressed
</th>
<th scope="col">
microdosing
</th>
<th scope="col">
swag
</th>
<th scope="col">
semiotics
</th>
<th scope="col">
YOLO
</th>
<th scope="col">
seitan
</th>
<th scope="col">
occupy
</th>
<th scope="col">
meditation
</th>
<th scope="col">
cleanse
</th>
<th scope="col">
master
</th>
<th scope="col">
asymmetrical
</th>
<th scope="col">
biodiesel
</th>
<th scope="col">
locavore
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
polaroid
</th>
<td>
pop-up chicharrones shoreditch offal pug echo
</td>
<td>
artisan
</td>
<td>
chartreuse
</td>
<td>
intelligentsia
</td>
<td>
cornhole
</td>
<td>
celiac
</td>
<td>
bitters
</td>
<td>
carry
</td>
<td>
selvage
</td>
<td>
intelligentsia
</td>
<td>
irony
</td>
<td>
tacos
</td>
</tr>
<tr>
<th scope="row">
tilde
</th>
<td>
sartorial everyday artisan vinyl goth neutra
</td>
<td>
echo
</td>
<td>
vinyl
</td>
<td>
cold-pressed
</td>
<td>
pop-up
</td>
<td>
pitchfork
</td>
<td>
aesthetic
</td>
<td>
typewriter
</td>
<td>
mustache
</td>
<td>
disrupt
</td>
<td>
vice
</td>
<td>
ugh
</td>
</tr>
<tr>
<th scope="row">
roof
</th>
<td>
brunch butcher disrupt echo freegan post-ironic
</td>
<td>
mustache
</td>
<td>
+1
</td>
<td>
listicle
</td>
<td>
tilde
</td>
<td>
skateboard
</td>
<td>
letterpress
</td>
<td>
sartorial
</td>
<td>
wolf
</td>
<td>
bushwick
</td>
<td>
goth
</td>
<td>
lo-fi
</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
| literally | polaroid | hammock |
|---|---|---|
| ethical | keffiyeh | knausgaard |
| heirloom | swag | umami |
| YOLO | occupy | gentrify |
--accent-2
| chambray | hella | iPhone |
|---|---|---|
| wolf | kogi | pickled |
| venmo | gluten-free | cronut |
| mustache | tilde | paleo |
<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">
literally
</th>
<th scope="col">
polaroid
</th>
<th scope="col">
hammock
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ethical
</td>
<td>
keffiyeh
</td>
<td>
knausgaard
</td>
</tr>
<tr>
<td>
heirloom
</td>
<td>
swag
</td>
<td>
umami
</td>
</tr>
<tr>
<td>
YOLO
</td>
<td>
occupy
</td>
<td>
gentrify
</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">
chambray
</th>
<th scope="col">
hella
</th>
<th scope="col">
iPhone
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
wolf
</td>
<td>
kogi
</td>
<td>
pickled
</td>
</tr>
<tr>
<td>
venmo
</td>
<td>
gluten-free
</td>
<td>
cronut
</td>
</tr>
<tr>
<td>
mustache
</td>
<td>
tilde
</td>
<td>
paleo
</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".
| bushwick | flannel | tofu | sriracha | YOLO | roof |
|---|---|---|---|---|---|
| Thundercats | PBR&B | pabst | kombucha | listicle | occupy |
| YOLO | lumbersexual | stumptown | vice | selvage | mixtape |
| wolf | cray | fingerstache | marfa | scenester | selfies |
| cornhole | drinking | bespoke | YOLO | slow-carb | iPhone |
| helvetica | microdosing | portland | brunch | XOXO | stumptown |
| yr | pabst | stumptown | tilde | skateboard | Yuccie |
<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>
bushwick
</th>
<th>
flannel
</th>
<th>
tofu
</th>
<th>
sriracha
</th>
<th>
YOLO
</th>
<th>
roof
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Thundercats
</td>
<td>
PBR&B
</td>
<td>
pabst
</td>
<td>
kombucha
</td>
<td>
listicle
</td>
<td>
occupy
</td>
</tr>
<tr>
<td>
YOLO
</td>
<td>
lumbersexual
</td>
<td>
stumptown
</td>
<td>
vice
</td>
<td>
selvage
</td>
<td>
mixtape
</td>
</tr>
<tr>
<td>
wolf
</td>
<td>
cray
</td>
<td>
fingerstache
</td>
<td>
marfa
</td>
<td>
scenester
</td>
<td>
selfies
</td>
</tr>
<tr>
<td>
cornhole
</td>
<td>
drinking
</td>
<td>
bespoke
</td>
<td>
YOLO
</td>
<td>
slow-carb
</td>
<td>
iPhone
</td>
</tr>
<tr>
<td>
helvetica
</td>
<td>
microdosing
</td>
<td>
portland
</td>
<td>
brunch
</td>
<td>
XOXO
</td>
<td>
stumptown
</td>
</tr>
<tr>
<td>
yr
</td>
<td>
pabst
</td>
<td>
stumptown
</td>
<td>
tilde
</td>
<td>
skateboard
</td>
<td>
Yuccie
</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
| venmo | lo-fi | typewriter | wayfarers | marfa | kinfolk | artisan |
|---|---|---|---|---|---|---|
| goth | wolf | Yuccie | keffiyeh | forage | sartorial | pickled |
| crucifix | meditation | iPhone | letterpress | wolf | williamsburg | retro |
| biodiesel | mumblecore | loko | tilde | ramps | occupy | offal |
<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">
venmo
</th>
<th scope="col">
lo-fi
</th>
<th scope="col">
typewriter
</th>
<th scope="col">
wayfarers
</th>
<th scope="col">
marfa
</th>
<th scope="col">
kinfolk
</th>
<th scope="col">
artisan
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
goth
</td>
<td>
wolf
</td>
<td>
Yuccie
</td>
<td>
keffiyeh
</td>
<td>
forage
</td>
<td>
sartorial
</td>
<td>
pickled
</td>
</tr>
<tr>
<td>
crucifix
</td>
<td>
meditation
</td>
<td>
iPhone
</td>
<td>
letterpress
</td>
<td>
wolf
</td>
<td>
williamsburg
</td>
<td>
retro
</td>
</tr>
<tr>
<td>
biodiesel
</td>
<td>
mumblecore
</td>
<td>
loko
</td>
<td>
tilde
</td>
<td>
ramps
</td>
<td>
occupy
</td>
<td>
offal
</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