Skip to content
Polymer-based web component for D2L tables
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
images
test
.csslintrc
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.travis.yml
CODEOWNERS
LICENSE
README.md
d2l-scroll-wrapper.js
d2l-sticky-element.js Polymer 3 Conversion Dec 5, 2018
d2l-table-circle-button.js
d2l-table-col-sort-button.js
d2l-table-col-sort.js
d2l-table-observer-behavior.js
d2l-table-shared-styles.js
d2l-table-style.js
d2l-table-wrapper.js
d2l-table.js
d2l-tbody.js
d2l-td.js
d2l-tfoot.js
d2l-th.js
d2l-thead.js
d2l-tr.js
d2l-tspan.js
galen.config
package-lock.json
package.json
polymer.json
table.test.js
wct.conf.json

README.md

Looking for SASS-based d2l-table? It's over here.

d2l-table

Published on webcomponents.org Bower version Build status Dependency Status

Tables are styled like this:

A Polymer-based web component for D2L tables, which includes styling for tables.

screenshot of table

screenshot of responsive table

For further information on this and other components, refer to The Brightspace UI Guide.

Installation

d2l-table can be installed from Bower:

bower install d2l-table

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-table.html:

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-table/d2l-table.html">
	<!-- Alternatively use the style include only in custom components that use d2l-table -->
	<custom-style>
		<style include="d2l-table-style"></style>
	</custom-style>
</head>

HTML:

<!-- use the style include in custom components -->
<style include="d2l-table-style"></style>
<d2l-table-wrapper><table class="d2l-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></d2l-table-wrapper>

Alternatively, use the d2l-t* elements (allows use of dom-repeat, etc.) HTML:

<!-- d2l-t* elements still need the d2l-table-style,
since the table styling can't be done with polyfilled css mixins yet -->
<style include="d2l-table-style"></style>
<d2l-table>
	<d2l-thead>
		<d2l-tr>
			<d2l-th>Header column 1</d2l-th>
			<d2l-th>Header column 2</d2l-th>
		</d2l-tr>
	</d2l-thead>
	<d2l-tbody>
		<d2l-tr>
			<d2l-td>row 1 column 1</d2l-td>
			<d2l-td>row 1 column 2</d2l-td>
		</d2l-tr>
		<d2l-tr>
			<d2l-td>row 2 column 1</d2l-td>
			<d2l-td>row 2 column 2</d2l-td>
		</d2l-tr>
	</d2l-tbody>
</d2l-table>

The d2l-tr element does not support the colspan attribute. To create a row containing only a single cell that spans the entire width of the table, use d2l-tspan instead. Note that d2l-tspan rows are unaffected by horizontal scrolling.

HTML:

<style include="d2l-table-style"></style>
<d2l-table>
	<d2l-tbody>
		<d2l-tr>
			<d2l-td>row 1 column 1</d2l-td>
			<d2l-td>row 1 column 2</d2l-td>
		</d2l-tr>
		<d2l-tspan>
			row 2 (spans entire table width)
		</d2l-tspan>
		<d2l-tr>
			<d2l-td>row 3 column 1</d2l-td>
			<d2l-td>row 3 column 2</d2l-td>
		</d2l-tr>
	</d2l-tbody>
</d2l-table>

Row Styles

screenshot of table with styled rows

HTML:

<!-- use the style include in custom components -->
<style include="d2l-table-style"></style>
<d2l-table-wrapper><table class="d2l-table">
	<tr selected>
		<td>selected</td>
	</tr>
	<tr active>
		<td>active</td>
	</tr>
	<tr active selected>
		<td>active and selected</td>
	</tr>
</table></d2l-table-wrapper>

Header Icons

screenshot of table with sort icons

HTML:

<!-- use the style include in custom components -->
<style include="d2l-table-style"></style>
<d2l-table-wrapper><table class="d2l-table">
	<thead>
		<th>
			<d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button>
		</th>
		<th>
			<d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button>
		</th>
	</thead>
	<tbody>
	<tr>
		<td>123</td>
		<td>321</td>
	</tr>
	<tr>
		<td>456</td>
		<td>654</td>
	</tr>
	</tbody>
</table></d2l-table-wrapper>

Light Style - Full Design Spec Still In Progress

Lightweight data tables are used to display tabular data in rows when column dividers or individual cell colors are not required. They are best suited for data that is primarily organized by row while still allowing users to order the rows by using column header sorting.

You can get this style by setting the type attribute to light.

HTML:

<!-- use the style include in custom components -->
<style include="d2l-table-style"></style>
<d2l-table-wrapper type="light"><table class="d2l-table">
	...
</table></d2l-table-wrapper>

<style include="d2l-table-style"></style>
<d2l-table type="light">
	<d2l-tbody>
		...
	</d2l-tbody>
</d2l-table>

Sticky Headers

Note: This feature is only works with browsers that support position: sticky which currently includes:

  • Chrome 56+
  • FF 59+
  • Safari 8+

Edge 16 is currently not working due to bugs with position: sticky; and right-to-left as well as border issues.

The header row will always be vertically sticky. To add a sticky column, you add the sticky attribute to each cell in the column.

<d2l-table-wrapper sticky-headers>
<table>
	<thead>
		<tr>
			<th sticky>Sticky Column</th>
			<th>Not sticky column</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th sticky>Sticky Column</th>
			<th>Not sticky column</th>
		</tr>
	</tbody>
</table>

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test

Galen

The Galen tests check layout and look of table. Galen is not meant to test functionality. For example, these tests will fail if the border-radius changes. The tests use a combination of screenshots and layout assertions. The results of the tests can be found in reports/d2l-table/report.html

Testing with galen does not currently work on Windows. Use Docker or a VM until it's fixed.

To update the screenshots, run npm run dump. The screenshots will be placed under dumps/d2l-table/objects

Note for Windows users: If you experience an error executing chromedriver (CreateProcess error=193, %1 is not a valid Win32 application) you can work around this by deleting the file node_modules/.bin/chromedriver. Once removed, Galen will then use the chromedriver.cmd file which should work correctly.

You can’t perform that action at this time.