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