❤
npm
Sign UpSign In

This package has been deprecated

Author message:

replaced with BrightspaceUI/table Bower package

vui-table

0.1.0 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i vui-table

Repository

github.com/Brightspace/valence-ui-table

Homepage

github.com/Brightspace/valence-ui-table#readme

Weekly Downloads

1

Version

0.1.0

License

Apache-2.0

Last publish

Collaborators

  • d2l-travis-deploy
Try on RunKit
Report malware