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>