Table second design componentAvailable since EcoComposer 2.2
Categories | Responsive Design | Dark Mode Support | Multi-Language | Offline Mode | Cloud Backup | User Analytics | Custom Themes | SEO Optimization | Real-Time Notifications |
---|---|---|---|---|---|---|---|---|---|
Starter Package | ✓ | ✗ | ✓ | ✗ | ✗ | ✓ | ✗ | ✓ | ✗ |
Professional Plan | ✓ | ✓ | ✓ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
Enterprise Suite | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
E-Commerce Essentials | ✓ | ✓ | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
Marketing Booster | ✗ | ✓ | ✓ | ✗ | ✗ | ✓ | ✓ | ✓ | ✗ |
Analytics Pro | ✓ | ✓ | ✗ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ |
Customer Success Toolkit | ✓ | ✗ | ✓ | ✓ | ✗ | ✓ | ✓ | ✓ | ✗ |
Growth Accelerator | ✓ | ✓ | ✗ | ✓ | ✓ | ✓ | ✗ | ✓ | ✓ |
Team Collaboration Suite | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ | ✓ | ✗ | ✓ |
The default values are :
print : false,
td-padding : .5rem * theming.$font-size,
table-border-radius : .5rem * theming.$font-size,
table-container--max-height : 98vh,
table-container--width : 100%,
table--font-family : theming.$font-family,
table-second-design--border : 'table-second-design--border',
table-second-design--td--border : 'table-second-design--td--border',
table-second-design--td--color : 'table-second-design--td--color',
table-second-design--th--border : 'table-second-design--th--border',
table-second-design--th--color : 'table-second-design--th--color',
table-second-design--thead--th--background-color : 'table-second-design--thead--th--background-color',
table-second-design--tbody--th--background-color : 'table-second-design--thead--th--background-color',
table-second-design--td--background-color : 'table-second-design--thead--th--background-color',
suffix : '',
themes : (
light : (
default--table-second-design--border : 1px solid #333,
default--table-second-design--td--border : 1px solid #333,
default--table-second-design--td--color : #333,
default--table-second-design--th--border : 1px solid #333,
default--table-second-design--th--color : #333,
default--table-second-design--thead--th--background-color : #eee,
default--table-second-design--tbody--th--background-color : #eee,
default--table-second-design--td--background-color : #eee,
),
dark : (
default--table-second-design--border : 1px solid #eee,
default--table-second-design--td--border : 1px solid #eee,
default--table-second-design--td--color : #ccc,
default--table-second-design--th--border : 1px solid #eee,
default--table-second-design--th--color : #ccc,
default--table-second-design--thead--th--background-color : #333,
default--table-second-design--tbody--th--background-color : #333,
default--table-second-design--td--background-color : #333,
)
)
We can implement it that way :
@include tableSecondDesign.init();
@include tableSecondDesign.create(
(
'table-container-max-height' : 50rem
)
);
We can implement it that way :
<div class=table-second-design--container>
<table class=table-second-design>
<caption class=table-second-design--caption>My table :</caption>
<thead class=table-second-design--thead>
<tr>
<th scope=col>Categories</th>
<th scope=col>Tag 1</th>
<th scope=col>Tag 2</th>
<th scope=col>Tag 3</th>
<th scope=col>Tag 4</th>
<th scope=col>Tag 5</th>
<th scope=col>Tag 6</th>
<th scope=col>Tag 7</th>
<th scope=col>Tag 8</th>
<th scope=col>Tag 9</th>
</tr>
</thead>
<tbody class=table-second-design--tbody>
<tr>
<th scope=row>Category 1</th>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<th scope=row>Category 2</th>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 3</th>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 4</th>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 5</th>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 6</th>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<th scope=row>Category 7</th>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 8</th>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
</tr>
<tr>
<th scope=row>Category 9</th>
<td>NO</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
</tr>
</tbody>
</table>
</div>