---
title: Table Components
layout: nested-component.html
---
<h1 class="docs--page-header">Table Components</h1>

<h2 class="docs--section-header">
    Numbers and dates
</h2>

<p class="docs--page-description">
    Numbers and dates can be hard to quickly digest using normal fonts. Use these helper classes to apply a monospaced font instead.
</p>

<table class="table">
    <thead>
        <tr>
            <td>
                Numbers
            </td>
            <td>
                Dates
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="table-data-number">
                398.382,20
            </td>
            <td class="table-data-date">
                15-01-2014
            </td>
        </tr>
        <tr>
            <td class="table-data-number">
                398.382,20
            </td>
            <td class="table-data-date">
                15-01-2014
            </td>
        </tr>
        <tr>
            <td class="table-data-number">
                398.382,20
            </td>
            <td class="table-data-date">
                15-01-2014
            </td>
        </tr>
        <tr>
            <td class="table-data-number">
                398.382,20
            </td>
            <td class="table-data-date">
                15-01-2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Table Subheaders
</h2>

<p class="docs--page-description">
    Use subheaders in <code>&lt;thead&gt;</code> to connect multiple columns under one name. Just don't forget to add the appropriate colspan attributes.
</p>

<table class="table">
    <thead>
        <tr class="table-subheader">
            <td colspan="3">
                Group of columns
            </td>
            <td colspan="4">
                Group of columns
            </td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem</td>
        </tr>
    </thead>
</table>

<h2 class="docs--section-header">
    Table Actions
</h2>

<p class="docs--page-description">
    We use buttons and links alot in our tables. Adding this class will help making the cell look good regardless of the amount of buttons you might decide to put in there.
</p>
<div class="text-info docs--panel docs--panel-info docs--panel-designers">
    <p>
        Table rules still apply. All other cells in the row expands along with the cell with actions.
    </p>
</div>

<table class="table">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Actions
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td class="table-actions">
                <button class="btn btn-sm btn-default">Action</button>
                <button class="btn btn-sm btn-default">Action</button>
                <button class="btn btn-sm btn-default">Action</button>
                <button class="btn btn-sm btn-danger">Action</button>
                <button class="btn btn-sm btn-warning">Action</button>
                <button class="btn btn-sm btn-danger"><i class="fa fa-bus"></i></button>
                <button class="btn btn-sm btn-warning"><i class="fa fa-search"></i></button>
                <div class="table-dropdown">
                    <button class="btn btn-transparent" data-dropdown data-options="{position: 'bottom right'}">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <i class="fa fa-play-circle"></i>
                                Restart
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa fa-trash-o"></i>
                                Forget
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Table Dropdowns
</h2>

<p class="docs--page-description">
    Adding 500 buttons to a table-cell is horrible, so we also offer a dropdown specifically designed to be used with tables. The dropdown is not the default bootstrap dropdown, but instead a more advanced build by Hubspot.
</p>
<div class="text-info docs--panel docs--panel-info docs--panel-developers">
    <p>
        Dropdowns build with Drop from Hubspot can be configured by adding a <code>data-options</code> attribute with a object of options to the triggering button, ie.: <code>data-options="{position: 'bottom right'}"</code>.
    </p>
    <p>
        Read all about Drop here: <a href="http://github.hubspot.com/drop/" target="_blank">http://github.hubspot.com/drop/</a>
    </p>
</div>

<table class="table">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Actions
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td class="table-actions">
                <div class="table-dropdown">
                    <button class="btn btn-transparent" data-dropdown data-options="{position: 'bottom right'}">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <i class="fa fa-play-circle"></i>
                                Restart
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa fa-trash-o"></i>
                                Forget
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Some other action
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Some other action
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Some other action
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Some other action
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Table Sorters
</h2>

<p class="docs--page-description">
    We add sorting buttons automatically on our javascript backed data-tables. But if you want to sort using Laravel or something else, you can add an element to a <code>&lt;td&gt;</code> in your table header.
    Use <code>.sorting</code> when the current column is not being sorted, <code>.sorting_asc</code> for ascending and <code>.sorting_desc</code> for descending.
</p>

<table class="table">
    <thead>
        <tr>
            <td class="sorting">
                Sortable
            </td>
            <td class="sorting_asc">
                Sortable
            </td>
            <td class="sorting_desc">
                Sortable
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Not here though
            </td>
            <td>
                Not here though
            </td>
            <td>
                Not here though
            </td>
        </tr>
    </tbody>
</table>