Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Table

Data tables. See a real exemple on our prototypes pages here.

Default table

#

Default table styling. The fact that this looks very bare is intentional; additional styling is added with modifier classes.

Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
table.c-table
    thead
        tr
            th Data
            th Data
            th Data
    tbody
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data

Styled Table

#

A table with more styling.

Activité: ABC
Lorem Lorem Ipsum Dolor Lorem Ipsum Dolor
Lorem Ipsum Total
Lorem Ipsum Success 700,00 € 30% 1000,00 €
Pending 700,00 € 30% 1000,00 €
Total 700,00 € 30% 1000,00 €
Lorem Ipsum Success 700,00 € 30% 1000,00 €
Pending 700,00 € 30% 1000,00 €
Total 700,00 € 30% 1000,00 € 
<div class="bckg-gray-50 u-padding-l">
    <table class="c-table c-table--styled c-table--bordered js-data-table">
        <thead>
            <tr>
                <th class="disabled" rowspan="2">Activité: ABC
                    <div class="c-badge c-badge--help" data-tooltip="tooltip-1" data-tooltip-placement="right">
                        <div class="o-svg-icon o-svg-icon-circle-help  ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                                <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                                <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
                            </svg>
                        </div>
                    </div>
                    <div class="c-tooltip" id="tooltip-1" role="tooltip">Informations sur l'activité en question
                        <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
                    </div>
                </th>
                <th rowspan="2">Lorem</th>
                <th class="u-text-center" rowspan="2">Lorem Ipsum Dolor</th>
                <th class="u-text-center dotted-bottom" colspan="4">Lorem Ipsum Dolor</th>
            </tr>
            <tr>
                <th class="u-text-center dotted">Lorem Ipsum</th>
                <th class="u-text-center">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-top-left-r" rowspan="3">Lorem Ipsum</td>
                <td>
                    <span class="c-status-pill c-status-pill--success">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">Success</span>
                    </span>
                </td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000<small>,00 €</small>
                </td>
            </tr>
            <tr class="bckg-gray">
                <td>
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">Pending</span>
                    </span>
                </td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000,<small>00&nbsp;€</small>
                </td>
            </tr>
            <tr class="bckg-yellow">
                <td>Total</td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000,<small>00&nbsp;€</small>
                </td>
            </tr>
            <tr>
                <td class="border-bottom-left-r" rowspan="3">Lorem Ipsum</td>
                <td>
                    <span class="c-status-pill c-status-pill--success">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">Success</span>
                    </span>
                </td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000,<small>00&nbsp;€</small>
                </td>
            </tr>
            <tr class="bckg-gray">
                <td>
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">Pending</span>
                    </span>
                </td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000,<small>00&nbsp;€</small>
                </td>
            </tr>
            <tr class="bckg-yellow">
                <td>Total</td>
                <td class="u-text-center">700,<small>00&nbsp;€</small>
                </td>
                <td class="u-text-center">30%</td>
                <td class="u-text-center">1000,<small>00&nbsp;€</small>
                </td>
            </tr>
        </tbody>
    </table>
</div>
div.bckg-gray-50.u-padding-l
    table.c-table.c-table--styled.c-table--bordered.js-data-table
        thead
            tr
                th(rowspan="2" class="disabled") Activité: ABC
                    +c-badge({skin: 'help'})(data-tooltip="tooltip-1" data-tooltip-placement="right")
                    .c-tooltip#tooltip-1(role="tooltip")
                        | Informations sur l'activité en question   
                        .c-tooltip__arrow(data-popper-arrow)
                th(rowspan="2") Lorem
                th(rowspan="2").u-text-center Lorem Ipsum Dolor
                th(colspan="4").u-text-center.dotted-bottom Lorem Ipsum Dolor
            tr
                th.u-text-center.dotted Lorem Ipsum
                th.u-text-center Total

        tbody
            tr
                td(rowspan="3").border-top-left-r Lorem Ipsum
                td
                    +c-status-pill({skin: 'success'}) Success
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000<small>,00 €</small>
            tr.bckg-gray
                td
                    +c-status-pill({skin: 'pending'}) Pending
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000,<small>00&nbsp;€</small>
            tr.bckg-yellow
                td Total
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000,<small>00&nbsp;€</small>
            tr
                td(rowspan="3").border-bottom-left-r Lorem Ipsum
                td
                    +c-status-pill({skin: 'success'}) Success
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000,<small>00&nbsp;€</small>
            tr.bckg-gray
                td
                    +c-status-pill({skin: 'pending'}) Pending
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000,<small>00&nbsp;€</small>
            tr.bckg-yellow
                td Total
                td.u-text-center 700,<small>00&nbsp;€</small>
                td.u-text-center 30%
                td.u-text-center 1000,<small>00&nbsp;€</small>

Table with single action

#

A table with a single action.

Data Data Data
Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table c-table--styled c-table--bordered">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>
                <!-- Actions-->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
table.c-table.c-table--styled.c-table--bordered
    thead
        tr
            th Data
            th Data
            th Data
            th
                // Actions
    tbody
        each item in [1, 2, 3, 4]
            tr
                td Data
                td Data
                td Data
                td
                    .c-button-toolbar
                        +c-button({skin: 'borderless', icon: 'chevron-right', layout: 'icon-only'}) Go to detail

Table with multiple action

#

A table with a multiple actions.

Data Data Data
Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table c-table--styled c-table--bordered js-data-table">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>
                <!-- Actions-->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-0">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-0">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-delete  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-1">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-1">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-delete  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-2">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-2">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-delete  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-3">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-3">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <div class="o-svg-icon o-svg-icon-delete  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
table.c-table.c-table--styled.c-table--bordered.js-data-table
    thead
        tr
            th Data
            th Data
            th Data
            th
                // Actions
    tbody
        each item, index in [1, 2, 3, 4]
            tr
                td Data
                td Data
                td Data
                td
                    .c-button-toolbar
                        +c-button({skin: 'borderless', icon: 'options-horizontal', layout: 'icon-only'})(data-menu-placement="bottom-end" data-menu="dropdownMenu-"+index) More options

                        ul.c-menu(id="dropdownMenu-"+index)
                            li.c-menu__item
                                a.c-menu__label(href="#")
                                    +icon('edit')
                                    span Edit
                            li.c-menu__item
                                a.c-menu__label(href="#")
                                    +icon('delete')
                                    span Delete
                        +c-button({skin: 'borderless', icon: 'chevron-right', layout: 'icon-only'}) Go to detail

Table (invisible)

#

Invisible table structure.

Data header Data point
Data header Data point
Data header Data point 
<table class="c-table c-table--invisible c-table--horizontal">
    <tr>
        <th scope="row">Data header</th>
        <td>Data point</td>
    </tr>
    <tr>
        <th scope="row">Data header</th>
        <td>Data point</td>
    </tr>
    <tr>
        <th scope="row">Data header</th>
        <td>
            <a href="#">Data point</a>
        </td>
    </tr>
</table>
table.c-table.c-table--invisible.c-table--horizontal
    tr
        th(scope="row") Data header
        td Data point
    tr
        th(scope="row") Data header
        td Data point
    tr
        th(scope="row") Data header
        td
            a(href="#") Data point