njostonehouse/valence-ui-table

vui-table

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

Tables are styled like this:

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>.

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.

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.