Creates a responsibe table by extracting thead titles and injecting them into each tbody row,
those are hidded by default on desktop with CSS and displayed on mobile.
classnames (required) Object
Classnames for each element:
-
title:theadtitles -
description: Second column description -
content: Element that encapsulates description shown on mobile -
mobile: Media query class for mobile -
description: Media query class for desktop
{
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
Options
{
'classnames': {
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
}thead {
display: none;
/* Mobile */
{
display: table-header-group;
}
}
td {
display: flex;
flex-basis: 100%;
align-self: stretch;
/* Mobile */
{
display: table-cell;
}
}
.titles {
display: flex;
flex-direction: column;
justify-content: baseline;
/* Mobile */
{
display: none;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: baseline;
}
.description.desktop {
display: none;
/* Mobile */
{
display: block;
}
}
.description.mobile {
/* Mobile */
{
display: none;
}
}