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	Tag 1	Tag 2	Tag 3	Tag 4	Tag 5	Tag 6	Tag 7	Tag 8	Tag 9
Category 1	YES	NO	YES	YES	YES	NO	NO	YES	NO
Category 2	NO	NO	YES	YES	NO	NO	NO	YES	YES
Category 3	YES	NO	NO	YES	YES	NO	NO	YES	YES
Category 4	YES	NO	YES	NO	NO	YES	NO	YES	YES
Category 5	YES	NO	YES	NO	YES	YES	NO	YES	YES
Category 6	YES	NO	YES	NO	YES	NO	YES	YES	NO
Category 7	YES	NO	YES	NO	NO	YES	YES	NO	YES
Category 8	YES	YES	YES	YES	NO	YES	YES	NO	YES
Category 9	NO	NO	NO	YES	NO	YES	YES	NO	NO

The defaults 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>