Tables on GitHub

Tables

A responsive styled table.

To create a table, include the d2l-table-style, add the CSS class d2l-table to native HTML <table> elements and wrap them with the <d2l-table-wrapper> custom element.

Example (html)
<style include="d2l-table-style"></style>
<d2l-table-wrapper>
	<table class="d2l-table">
		<thead>
		<tr>
			<th>First Name</th>
			<th>Middle Name</th>
			<th>Last Name</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>Darlene</td>
			<td>Bridget</td>
			<td>Waters</td>
		</tr>
		<tr header>
			<th colspan="3">Inline header</th>
		</tr>
		<tr>
			<td>David</td>
			<td>Robert</td>
			<td>Sandoval</td>
		</tr>
		</tbody>
	</table>
</d2l-table-wrapper>
First Name Middle Name Last Name
Darlene Bridget Waters
Inline header
David Robert Sandoval

Sorting attributes

To create a sort button, use the <d2l-table-col-sort-button> custom element. The sort button does not include any implementation. The sort button accepts the desc attribute to indicate the sort direction is descending (by default it is ascending). The nosort attribute indicate field could be sorted, but is currently not.

Example (html)
<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>
			<th>
				<d2l-table-col-sort-button nosort>Not sorted</d2l-table-col-sort-button>
			</th>
		</thead>
		<tbody>
		<tr>
			<td>123</td>
			<td>654</td>
			<td>654</td>
		</tr>
		<tr>
			<td>456</td>
			<td>321</td>
			<td>321</td>
		</tr>
		</tbody>
	</table>
</d2l-table-wrapper>
Ascending Descending Not sorted
123 654 654
456 321 321

Responsive

The table is responsive. When a table is wider than a user’s screen, arrows will appear which allow the user to scroll the table back and forth.

First Name Middle Name Last Name
Darlene Bridget Waters
Inline header
David Robert Sandoval

No column border

To disable column borders, add the no-column-border attribute to the table element

Example (html)
<d2l-table-wrapper>
	<table class="d2l-table" no-column-border>
		<thead>
		<tr>
			<th>First Name</th>
			<th>Middle Name</th>
			<th>Last Name</th>
		</tr>
		</thead>
		<tbody>
		<tr selected active>
			<td>Darlene</td>
			<td>Bridget</td>
			<td>Waters</td>
		</tr>
		<tr>
			<td>David</td>
			<td>Robert</td>
			<td>Sandoval</td>
		</tr>
		</tbody>
	</table>
</d2l-table-wrapper>
First Name Middle Name Last Name
Darlene Bridget Waters
David Robert Sandoval

Selectable

To hint that rows are selectable with a hover effect, add the selectable attribute to the table element. To set a row as being selected, add the selected attribute to its tr element.

Example (html)
<d2l-table-wrapper>
	<table class="d2l-table" selectable>
		<thead>
		<tr>
			<th>First Name</th>
			<th>Middle Name</th>
			<th>Last Name</th>
		</tr>
		</thead>
		<tbody>
		<tr selected active>
			<td>Darlene</td>
			<td>Bridget</td>
			<td>Waters</td>
		</tr>
		<tr header>
			<th colspan="3">Inline header</th>
		</tr>
		<tr>
			<td>David</td>
			<td>Robert</td>
			<td>Sandoval</td>
		</tr>
		</tbody>
	</table>
</d2l-table-wrapper>
First Name Middle Name Last Name
Darlene Bridget Waters
Inline header
David Robert Sandoval

Developing with Tables

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-table

Then import the components you need:

Example (html)
<link
  rel="import"
  href="bower_components/d2l-table/d2l-table.html">

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/table" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.