d2l-table

Polymer-based web components for D2L tables


Keywords
polymer, web-components
License
Apache-2.0
Install
bower install d2l-table

Documentation

vui-table

Bower version NPM version Build status Dependency Status

This component contains Sass mixins and CSS that you can use to style tables for display of tabular data.

Tables are styled like this:

screenshot of table with data

For element layout concerns see vui-grid-system.

For further information on this component and other VUI components, see the docs at ui.valence.d2l.com.

Installation

vui-table can be installed from Bower:

bower install vui-table

Or alternatively from NPM:

npm install vui-table

Depending on which installation method you choose, use that path when doing the SASS import:

@import 'bower_components/vui-table/table.scss';
// or...
@import "node_modules/vui-table/table.scss";

Usage

To style tables, first include its SCSS file. Then, apply the mixin using the vui-table selector on the table element.

HTML:

<table>
    <thead>
        <tr>
            <th>Header column 1</th>
            <th>Header column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1 column 1</td>
            <td>row 1 column 2</td>
        </tr>
        <tr>
            <td>row 2 column 1</td>
            <td>row 2 column 2</td>
        </tr>
    </tbody>
</table>

SCSS:

@import 'table.scss';

table {
    @include vui-table();
}

Row Styles

To style an individual table row as active, selected, or both, add the appropriate mixin to <tr>.

screenshot of table with styled rows

HTML:

<table>
    <tr class="selected">
        <td>active</td>
    </tr>
    <tr class="active">
        <td>selected</td>
    </tr>
    <tr class="active-selected">
        <td>active and selected</td>
    </tr>
</table>

SCSS:

.selected {
    @include vui-table-row-selected($state:'selected');
}
.active {
    @include vui-table-row-selected($state:'active');
}
.active-selected {
    @include vui-table-row-selected($state:'active-selected');
}

Header Icons

To include ascending or descending sort icons, include the appropriate mixin.

screenshot of table with sort icons

HTML:

<table>
    <thead>
        <th class="ascending">
            Ascending
        </th>
        <th class="descending">
            Descending
        </th>
    </thead>
    <tbody>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
    <tr>
        <td>456</td>
        <td>654</td>
    </tr>
    </tbody>
</table>

SCSS:

.ascending {
    @include vui-table-column-sort();
}
.descending {
    @include vui-table-column-sort('desc');
}

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.