Table
Display your data in non-interactive, interactive or responsive tables.
View SourceUsage
css
@import "winduum/src/components/table/index.css" layer(components);Variants
Props
Installation
Follow instructions for individual framework usage below
Examples
Default
html
<div class="x-table border border-body-tertiary text-sm">
<table>
<thead class="whitespace-nowrap text-main-secondary font-bold">
<tr>
<th>Full name</th>
<th>Email</th>
<th>Employment</th>
</tr>
</thead>
<tbody>
<tr>
<td>Agata Henderson</td>
<td>a.henderson@example.com</td>
<td>Interpreter</td>
</tr>
<tr>
<td>Tony Johnston</td>
<td>t.johnston@example.com</td>
<td>Singer</td>
</tr>
<tr>
<td>Maya Walker</td>
<td>m.walker@example.com</td>
<td>Lawer</td>
</tr>
</tbody>
</table>
</div>Interactive
html
<div class="x-table text-sm border border-body-tertiary">
<table>
<thead class="whitespace-nowrap">
<tr class="text-main-secondary font-bold">
<th class="sticky start-0 z-10">
<label class="x-check flex w-max">
<input type="checkbox">
</label>
</th>
<th>Name</th>
<th>Vacation</th>
<th>Late arrival</th>
<th>Employment</th>
<th>Meeting</th>
<th>Homeoffice</th>
<th>Doctor</th>
<th>Pause</th>
<th>Worked time</th>
<th>Total time</th>
</tr>
</thead>
<tbody>
<tr tabindex="0">
<td class="sticky start-0 z-10">
<label class="x-check flex w-max">
<input type="checkbox">
</label>
</td>
<td>
<div class="flex gap-2.5 whitespace-nowrap">
<div class="x-image rounded-full size-9">
<img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
</div>
<div>
<div class="x-title">John Smith</div>
<div class="x-title sm font-normal">
Programmer
</div>
</div>
</div>
</td>
<td>
20 days
</td>
<td>
12
</td>
<td>
Full time
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:18 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
</tr>
<tr tabindex="0">
<td class="sticky start-0 z-10">
<label class="x-check flex w-max">
<input type="checkbox">
</label>
</td>
<td>
<div class="flex gap-2.5 whitespace-nowrap">
<div class="x-image rounded-full size-9">
<img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
</div>
<div>
<div class="x-title">John Smith</div>
<div class="x-title sm font-normal">
Programmer
</div>
</div>
</div>
</td>
<td>
20 days
</td>
<td>
12
</td>
<td>
Full time
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:18 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
</tr>
<tr tabindex="0">
<td class="sticky start-0 z-10">
<label class="x-check flex w-max">
<input type="checkbox">
</label>
</td>
<td>
<div class="flex gap-2.5 whitespace-nowrap">
<div class="x-image rounded-full size-9">
<img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
</div>
<div>
<div class="x-title">John Smith</div>
<div class="x-title sm font-normal">
Programmer
</div>
</div>
</div>
</td>
<td>
20 days
</td>
<td>
12
</td>
<td>
Full time
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
<td>
0:18 h
</td>
<td>
0:00 h
</td>
<td>
0:00 h
</td>
</tr>
</tbody>
</table>
</div>Advanced
html
<div class="x-table border border-body-tertiary text-sm" style="--x-table-cell-border-inline-width: 1px;">
<table>
<caption class="text-center p-4 border-b border-body-tertiary font-bold">Product summary</caption>
<thead>
<tr>
<td colspan="2" rowspan="2"></td>
<th colspan="3" scope="colgroup">Clothes</th>
<th colspan="2" scope="colgroup">Accessories</th>
</tr>
<tr>
<th scope="col">Trousers</th>
<th scope="col">Skirts</th>
<th scope="col">Dresses</th>
<th scope="col">Bracelets</th>
<th scope="col">Rings</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup" tabindex="0">Belgium</th>
<th scope="row" tabindex="0">Antwerp</th>
<td tabindex="0">56</td>
<td tabindex="0">22</td>
<td tabindex="0">43</td>
<td tabindex="0">72</td>
<td tabindex="0">23</td>
</tr>
<tr>
<th scope="row" tabindex="0">Gent</th>
<td tabindex="0">46</td>
<td tabindex="0">18</td>
<td tabindex="0">50</td>
<td tabindex="0">61</td>
<td tabindex="0">15</td>
</tr>
<tr>
<th scope="row" tabindex="0">Brussels</th>
<td tabindex="0">51</td>
<td tabindex="0">27</td>
<td tabindex="0">38</td>
<td tabindex="0">69</td>
<td tabindex="0">28</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup" tabindex="0">The Netherlands</th>
<th scope="row" tabindex="0">Amsterdam</th>
<td tabindex="0">89</td>
<td tabindex="0">34</td>
<td tabindex="0">69</td>
<td tabindex="0">85</td>
<td tabindex="0">38</td>
</tr>
<tr>
<th scope="row" tabindex="0">Utrecht</th>
<td tabindex="0">80</td>
<td tabindex="0">12</td>
<td tabindex="0">43</td>
<td tabindex="0">36</td>
<td tabindex="0">19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" tabindex="0">Sum</td>
<td colspan="5" tabindex="0">NaN</td>
</tr>
</tfoot>
</table>
</div>