Looking for SASS-based d2l-table? It's over here.
Tables are styled like this:
A Polymer-based web component for D2L tables, which includes styling for tables.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.
d2l-table can be installed from Bower:
bower install d2l-tableInclude 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>
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>
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>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>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-cliTo start a local web server that hosts the demo page and tests:
polymer serveTo lint (eslint and Polymer lint):
npm run lintTo run unit tests locally using Polymer test:
polymer test --skip-plugin sauceTo lint AND run local unit tests:
npm testThe 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
- run the tests with
npm run test:galen - galen.config can be used to change the browser that is being tested. See the config documentation
- table.gspec contains the actual assertions. Documentation can be found here
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.