Skip to content

Table

Display your data in non-interactive, interactive or responsive tables.

View Source 

Usage

css
@import "winduum/src/components/table/index.css" layer(components);

Variants

  • default 
  • interactive 

Props

  • default-props 
  • interactive-props 

Examples

Default

html
<div class="c-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="c-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="ui-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="ui-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="ui-image rounded-full size-9">
                            <img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="ui-title">John Smith</div>
                            <div class="ui-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
            <tr tabindex="0">
                <td class="sticky start-0 z-10">
                    <label class="ui-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="ui-image rounded-full size-9">
                            <img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="ui-title">John Smith</div>
                            <div class="ui-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
            <tr tabindex="0">
                <td class="sticky start-0 z-10">
                    <label class="ui-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="ui-image rounded-full size-9">
                            <img src="https://via.placeholder.com/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="ui-title">John Smith</div>
                            <div class="ui-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
        </tbody>
    </table>
</div>

Advanced

html
<div class="c-table border border-body-tertiary text-sm" style="--c-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>

Released under the MIT License.