Table componentAvailable since EcoComposer 2.2
Date | Schedule | Event |
---|---|---|
January 1, 2021 | 18:00 22:00 | Eco-Friendly Web Design Workshop |
March 10, 2021 | 15:00 16:00 | Sustainable Development Strategies |
Date | Schedule | Event |
---|---|---|
January 1, 2021 | 18:00 22:00 | Eco-Friendly Web Design Workshop |
March 10, 2021 | 15:00 16:00 | Sustainable Development Strategies |
The default 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>