Table second design componentAvailable since EcoComposer 2.2

Classical Table second design example :
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>
^