Table componentAvailable since EcoComposer 2.2

Table examples
Default SCSS values
SCSS implementation
HTML implementation

Default table example :
Date	Schedule	Event
Le 01/01/2021	18:00 22:00	Our event
Le 10/03/2021	15:00 16:00	Our second event

Table example with some configuration :
Date	Schedule	Event
Le 01/01/2021	18:00 22:00	Our event
Le 10/03/2021	15:00 16:00	Our second event

The defaults values are :

'border-collapse' : collapse,
'desktop--td-padding' : .5rem * theming.$font-size,
'mobile--header-min-width' : 25rem * theming.$font-size,
'mobile--gap' : 1rem * theming.$font-size,
'mobile--td-padding' : .5rem * theming.$font-size,
'print' : false,
'table--border' : 'table--border',
'table--border-radius' : .5rem * theming.$font-size,
'table--font-family' : theming.$font-family,
'table--td--border' : 'table--td--border',
'table--td--color' : 'table--td--color',
'table--th--border' : 'table--th--border',
'table--th--color' : 'table--th--color',
'suffix' : '',
'themes' :  (
  'light' : (
    'default--table--border' : 1px solid #333,
    'default--table--td--border' : 1px solid #333,
    'default--table--td--color' : #333,
    'default--table--th--border' : 1px solid #333,
    'default--table--th--color' : #333,
  ),
  'dark' : (
    'default--table--border' : 1px solid #eee,
    'default--table--td--border' : 1px solid #eee,
    'default--table--td--color' : #ccc,
    'default--table--th--border' : 1px solid #eee,
    'default--table--th--color' : #ccc,
  )
)

We can implement it that way :

@include table.init();
@include table.create();
@include table.create(
  (
    'mobile--gap' : 1rem,
    'themes' : $themes
  )
);

We can implement it that way :

<table class="table suffix">
  <caption class=table--caption>My table :</caption>
  <thead class=table-header>
    <tr>
      <th>Date</th>
      <th>Schedule</th>
      <th>Event</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-label=Date>Le 01/01/2021</td>
      <td data-label=Schedule>18:00 22:00</td>
      <td data-label=Event>Our event</td>
    </tr>

    <tr>
      <td data-label=Date>Le 10/03/2021</td>
      <td data-label=Schedule>15:00 16:00</td>
      <td data-label=Event>Our second event</td>
    </tr>
  </tbody>
</table>