Data Tables

A data table is composed of at least two column headers row and at least one data row (and occasionally a column footer). It is used to organize large volumes of data.

Subcomponents

View Demo

Design

Usage:

The Data table uses a combination of the table component, pagination, and a filter to organise data and enable filtration and navigation of large datasets. It should be used in interactive tables with possibly large amounts of rows; like Orders or Products.

Developer

<form method="post" class="form" ng-submit="bcServerTableDemoCtrl.bcServerTable.updateTable()">
    <fieldset class="form-fieldset">
        <div class="form-field">
            <label class="form-label" for="time">Filter:</label>
            <div class="form-prefixPostfix">
                <input class="form-input" id="time" type="text" placeholder="Keywords" ng-model="bcServerTableDemoCtrl.bcServerTable.filters.time">
                <button class="button button--primary form-prefixPostfix-button--postfix" id="updateFilter" type="submit">Update</button>
                <button class="button form-prefixPostfix-button--postfix" type="reset" ng-click="bcServerTableDemoCtrl.clearTable($event)">Reset table</button>
            </div>
        </div>
    </fieldset>
</form>
<table class="table">
    <thead class="table-thead">
        <th><input type="checkbox"/></th>
        <th>Name</th>
        <th>Star</th>
        <th>Location</th>
    </thead>
    <tbody class="table-tbody">
        <tr id="row-" class="tableRow">
            <td><input type="checkbox"/></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<bc-pagination class="pagination" id="pagination"
               on-change="bcServerTableDemoCtrl.bcServerTable.updatePage(page, limit)"
               total-items="bcServerTableDemoCtrl.bcServerTable.pagination.total"
               page="bcServerTableDemoCtrl.bcServerTable.pagination.page"
               items-per-page="bcServerTableDemoCtrl.bcServerTable.pagination.limit"
               max-size="5">
</bc-pagination>

Usage:

Empty Treatment

View Demo

Design

Usage:

When there isn’t any content to display in a table, an empty treatment should be used to provide users with contextual information. An Illustration is optional, and should be sized at a maximum height of 40px, or maximum width of 200px. The empty treatment may also have a maximum of one link or button. This should help the user to populate the data table, either through education (via a knowledgebase article), or direct action (Create a Product).

Developer

Usage:

As an empty table has no content, the table doesn't require a thead. There is only one tr which contains one td, which is the .emptyTable component.

CSS Classes:

1. .emptyTable

The component's container class. Should be applied to the only td in the table.

2. .emptyTable-image

Applied to an optional illustration that may be used to enhance the message.
Maximum image width is 200px; Maximum image height is 40px.

3. .emptyTable-title and .emptyTable-description

The default classes for the title and description of the message, respectively. Styled to default text styles.
.emptyTable-title is expected to be a strong, .emptyTable-description is expected to be a p.

4. .emptyTable-action

The only action allowed for this message. Should aid user in populating table.
Expected to be applied to a.