Table second design componentAvailable since EcoComposer 2.2

Table second design examples
Default SCSS values
SCSS implementation
HTML implementation

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>