Table Detail
The table detail pattern allows a user to view additional information relevant to a row whilst staying in context.
info
The example in this page is not yet functional
Date | Time | User type | Event | Actions |
---|---|---|---|---|
13/01/2017 | 3:30pm | staff | Status changed | Details |
<table class="table table--full" data-table-detail-table>
<caption class="hide">Events</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">User type</th>
<th scope="col">Event</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr data-table-detail-content="<div class="padding"><span class="label">Waiting on client</span> to <span class="label">Open</span></div>" data-table-detail-panel-custom-title="A custom title set on the clicked TR">
<td>13/01/2017</td>
<td>3:30pm</td>
<td><span class="label label--success">staff</span></td>
<td>Status changed</td>
<td><a href="#" class="table-action" data-table-detail-view-detail="true">Details</a></td>
</tr>
</tbody>
</table>
Dependencies
You will need the TableDetailComponent
to be included in your browserify configuration. Depending on your setup, this will probably need to be in a file called index.js
or main.js
.
index.js
var TableDetailComponent = require('/path/to/pulsar/TableDetailComponent');
module.exports = {
TableDetailComponent: TableDetailComponent
}
main.js
var $html = $('html');
pulsar.tableDetail = new pulsar.TableDetailComponent($html);
$(function () {
pulsar.tableDetail.init();
});
Markup
You'll need to add the following data attributes to your table markup.
Data attribute | Value | Description |
---|---|---|
data-table-detail-table | Add to the table element you which to use the table-detail pattern on | |
data-table-detail-content | html | Add to each tr element. The value of the attribute should be the content to display in the detail panel when the row link is clicked |
data-table-detail-view-detail | true | Add to the link you want to trigger the detail panel for the row |
data-table-detail-panel-custom-title | Allows you to set a custom title on the details when this row is clicked. Add to the tr element with the string you wish to use for the custom title |