Skip to main content

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

Events
DateTimeUser typeEventActions
13/01/20173:30pmstaffStatus changedDetails
<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=&quot;padding&quot;><span class=&quot;label&quot;>Waiting on client</span> to <span class=&quot;label&quot;>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 attributeValueDescription
data-table-detail-tableAdd to the table element you which to use the table-detail pattern on
data-table-detail-contenthtmlAdd 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-detailtrueAdd to the link you want to trigger the detail panel for the row
data-table-detail-panel-custom-titleAllows 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