Tables

Default Table

Table powered by DataTables with default search, pagination, filter, sorting, and dynamic length.

NOTE: HPU Tables require that every table must have the same amount of columns for both th on the thead, and td on the tbody. If there are more th than the td (or vice versa), then a blank th or td must be added respectively. Otherwise, Tables won't function correctly.

<table class="hpu-table" data-hpu="table">
    <thead>
        <tr>
            <!-- th: 4 columns -->
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <!-- td: 4 columns -->
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>31</td>
        </tr>

        <tr>
            <!-- td: 4 columns -->
            <td>Garret Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
        </tr>

        <tr>
            <!-- td: 4 columns -->
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>26</td>
        </tr>

        <tr>
            <!-- td: 4 columns -->
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

Compact Table

Add the .compact alongside .hpu-table class for a more compressed look table.

<table class="hpu-table compact" data-hpu="table">
...
</table>

Table Row Borders

Add the .row-border alongside .hpu-table class to apply borders on each row.

<table class="hpu-table row-border" data-hpu="table">
...
</table>

Table Cell Borders

Add the .cell-border alongside .hpu-table class to apply borders on each cell, applying borders on all columns and rows.

<table class="hpu-table cell-border" data-hpu="table">
...
</table>

Hoverable Table

Add the .hover alongside .hpu-table class to add highlighting effect on a hovered row. Try hovering the pointer to any row below.

<table class="hpu-table hover" data-hpu="table">
    ...
</table>

Table Stripes

Add the .stripe alongside .hpu-table class to add alternating highlights on every other row.

<table class="hpu-table stripe" data-hpu="table">
...
</table>

Order Column

By default, DataTable applies table sorting. .order-column alongside .hpu-table class adds highlighting effect on the sorted column. Try clicking any column head to see the highlight effect on an ordered column.

<table class="hpu-table order-column" data-hpu="table">
...
</table>

Table Display

Rather than adding .row-border, .hover, .stripe and .order-column classes individually, simply use the .display alongside .hpu-table class to add their styles.

<table class="hpu-table display" data-hpu="table">
...
</table>

Table Colors

HPU Colors can also be applied with tables by adding .bg-{color} alongside .hpu-table class. In the example below, the .display is used to see color variations. Please refer to HPUCSS Colors for usage guides.

<table class="hpu-table display bg-1st" data-hpu="table">
    ...
</table>

<table class="hpu-table display bg-2nd" data-hpu="table">
    ...
</table>

Programmatic Table

Tables can be activated programmatically with options available to customize their behavior. When using this approach, simply remove the data-hpu attribute, add the id attribute, then call that id into your script.

<table class="hpu-table display" id="tableDemo">
    ...
</table>

let tableDemo = new HPU.Table('#tableDemo');

// Manually enable the defined table
tableDemo.activateTable();

Table Options

Table options are also available to change its behavior:

let table = new HPU.Table('#tableId', {options});

Table with Custom Options

The table below is a sample table with custom options applied. .display and .cell-border classes are used for styling.

<table class="hpu-table display cell-border" id="staffInfo">
    ...
</table>

let staffInfo = new HPU.Table('#staffInfo', {
    lengthMenu : [10, 15, 20],
    order : [[2, 'asc'], [0, 'asc']],
    pagingType : 'numbers'
});

// Manually enable the defined table
staffInfo.activateTable();