ghost
commented
2 years ago The table is using class="wb-tables tbl-gridify" and the table body is using class="row wb-eqht" lastly the row is using class="col-xs-12 col-sm-6 col-md-4".
You can view the raw code at https://raw.githubusercontent.com/wet-boew/wet-boew-styleguide/master/index-en.md
<table id="designlayout" class="wb-tables tbl-gridify" data-wb-tables='{"order" : [ 0, "asc" ], "bPaginate" : false,
"columnDefs": [
{ "targets": [4], "visible": false },
{ "targets": [5], "visible": false },
{ "targets": [6], "visible": false }
]}'>
<caption class="wb-inv">
Design elements
</caption>
<thead>
<tr>
<th>Design option</th>
<th>Description</th>
<th>Keywords</th>
<th>Example</th>
<th>Related to</th>
<th>Design category</th>
<th>Design feature</th>
</tr>
</thead>
<tbody class="row wb-eqht">
<tr class="col-xs-12 col-sm-6 col-md-4">
<td><a href="design/position-en.html" class="h4 mrgn-tp-0 mrgn-bttm-0">Absolute positioning</a> </td>
<td><p>Use to position content on top of other content.</p></td>
<td class="text-muted small">Tags: Links</td>
<td><hr class="mrgn-tp-0">
<div class="row">
<div class="col-xs-12"> <a href="#"><img alt="Decorative image with people" class="img-responsive full-width" src="https://www.canada.ca/content/canadasite/assets/finance/carousel/20141203-1.jpg">
<p class="well brdr-rds-0 well-sm mrgn-bttm-sm mrgn-rght-md mrgn-lft-md opct-90 pstn-bttm-xs pstn-rght-xs">Link on top of image</p>
</a> </div>
</div></td>
<td>CSS Style</td>
<td>Structure and placement</td>
<td>Absolute positioning</td>
</tr>
</tbody>
</table>
locutux
Hello team!
I love your implementation of the data tables on the main page of the WET Style Guide (https://wet-boew.github.io/wet-boew-styleguide/index-en.html).
Could I obtain a sample of the code used to generate that searchable table please? I tried replicating it, but I do not know which classes were coded in, and which were injected on page rendering.
Thank you and have a great day!