Components

Tables

The tables component is to be used to make tabular data easier to read, compare and scan for users.

Example

Table head Table head Table head Table head
Table value Table value Table value Table value
Table value Table value Table value Table value 
                                
                                <div class="table-responsive">
<table class="table table-bordered table-fluid" style="border-collapse: collapse; width: 100%; height: 128px;" border="1">
<thead>
<tr>
<th>Table head</th>
<th>Table head</th>
<th>Table head</th>
<th>Table head</th>
</tr>
</thead>
<tbody>
<tr >
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
</tr>
<tr >
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
<td data-th="Table head">Table value</td>
</tr>
</tbody>
</table>
</div>

Portal Code example

  • Never use this for layout on a page or for content, only for tabular data so users can scan and read the data
  • Table output is usually predetermined by the portal, these usually come from entitylists in a entitygrid via liquid templating
  • When generating a review table screen, view our pattern on how to populate the table.

Table outputted from entitylist

Case number. sort descending Service type. sort descending Created on . sort descending
CASE REFERENCE ID Service name requested
CASE REFERENCE ID Service name requested
CASE REFERENCE ID Service name requested
CASE REFERENCE ID Service name requested
CASE REFERENCE ID Service name requested

Borderless table

Do you receive benefits? No
Number of bins to be emptied on each collection 1
Start Date 14/11/2019
End Date 14/11/2020
Renew subscription automatically No 
                        
                        <h2>Table outputted from entitylist</h2>
<table aria-live="polite" aria-relevant="additions" role="grid" tabindex="0" class="table table-fluid">
<thead>
<tr>
<th style="width:33.33333333333333%;" class="sort-enabled"><a href="#" role="button" aria-label="Case number">Case number<span class="sr-only sort-hint">. sort descending</span></a></th>
<th style="width:33.33333333333333%;" class="sort-enabled"><a href="#" role="button" aria-label="Service type">Service type<span class="sr-only sort-hint">. sort descending</span></a></th>
<th style="width:33.33333333333333%;" class="sort-enabled sort sort-desc" aria-sort="descending"><a href="#" role="button" aria-label="Created on">Created on <span class="fa fa-arrow-down" aria-hidden="true"></span><span class="sr-only sort-hint">. sort descending</span></a></th>
</tr>
</thead>
<tbody style="">
<tr data-id="282f6117-1a02-ea11-b862-0003ff391be4" data-entity="incident" data-name="SGT-03351-V9K7">
<td data-type="System.String" data-attribute="ticketnumber" data-value="" tabindex="0" data-th="Case number" aria-label=""><a href="" class="details-link has-tooltip" data-toggle="tooltip" title="View details">CASE REFERENCE ID</a></td>
<td data-type="Microsoft.Xrm.Sdk.EntityReference" data-attribute="lace_servicetype" data-value="" tabindex="0" data-th="" aria-label="">Service name requested</td>
<td data-type="System.DateTime" data-attribute="createdon" data-value="" tabindex="0" data-th="Created on" aria-label="Created on 08/11/2019 11:22 AM">
<time datetime="2019-11-08T11:22:48+00:00">08/11/2019 11:22 AM</time>
</td>
</tr>
<tr data-id="282f6117-1a02-ea11-b862-0003ff391be4" data-entity="incident" data-name="SGT-03351-V9K7">
<td data-type="System.String" data-attribute="ticketnumber" data-value="" tabindex="0" data-th="Case number" aria-label=""><a href="" class="details-link has-tooltip" data-toggle="tooltip" title="View details">CASE REFERENCE ID</a></td>
<td data-type="Microsoft.Xrm.Sdk.EntityReference" data-attribute="lace_servicetype" data-value="" tabindex="0" data-th="" aria-label="">Service name requested</td>
<td data-type="System.DateTime" data-attribute="createdon" data-value="" tabindex="0" data-th="Created on" aria-label="Created on 08/11/2019 11:22 AM">
<time datetime="2019-11-08T11:22:48+00:00">08/11/2019 11:22 AM</time>
</td>
</tr>
<tr data-id="282f6117-1a02-ea11-b862-0003ff391be4" data-entity="incident" data-name="SGT-03351-V9K7">
<td data-type="System.String" data-attribute="ticketnumber" data-value="" tabindex="0" data-th="Case number" aria-label=""><a href="" class="details-link has-tooltip" data-toggle="tooltip" title="View details">CASE REFERENCE ID</a></td>
<td data-type="Microsoft.Xrm.Sdk.EntityReference" data-attribute="lace_servicetype" data-value="" tabindex="0" data-th="" aria-label="">Service name requested</td>
<td data-type="System.DateTime" data-attribute="createdon" data-value="" tabindex="0" data-th="Created on" aria-label="Created on 08/11/2019 11:22 AM">
<time datetime="2019-11-08T11:22:48+00:00">08/11/2019 11:22 AM</time>
</td>
</tr>
<tr data-id="282f6117-1a02-ea11-b862-0003ff391be4" data-entity="incident" data-name="SGT-03351-V9K7">
<td data-type="System.String" data-attribute="ticketnumber" data-value="" tabindex="0" data-th="Case number" aria-label=""><a href="" class="details-link has-tooltip" data-toggle="tooltip" title="View details">CASE REFERENCE ID</a></td>
<td data-type="Microsoft.Xrm.Sdk.EntityReference" data-attribute="lace_servicetype" data-value="" tabindex="0" data-th="" aria-label="">Service name requested</td>
<td data-type="System.DateTime" data-attribute="createdon" data-value="" tabindex="0" data-th="Created on" aria-label="Created on 08/11/2019 11:22 AM">
<time datetime="2019-11-08T11:22:48+00:00">08/11/2019 11:22 AM</time>
</td>
</tr>
<tr data-id="282f6117-1a02-ea11-b862-0003ff391be4" data-entity="incident" data-name="SGT-03351-V9K7">
<td data-type="System.String" data-attribute="ticketnumber" data-value="" tabindex="0" data-th="Case number" aria-label=""><a href="" class="details-link has-tooltip" data-toggle="tooltip" title="View details">CASE REFERENCE ID</a></td>
<td data-type="Microsoft.Xrm.Sdk.EntityReference" data-attribute="lace_servicetype" data-value="" tabindex="0" data-th="" aria-label="">Service name requested</td>
<td data-type="System.DateTime" data-attribute="createdon" data-value="" tabindex="0" data-th="Created on" aria-label="Created on 08/11/2019 11:22 AM">
<time datetime="2019-11-08T11:22:48+00:00">08/11/2019 11:22 AM</time>
</td>
</tr>
</tbody>
</table>

<h2>Borderless table</h2>

<table class="review-table">
<tbody>
    <tr>
        <th style="width:80%"></th>
        <th style="width:20%"></th>
    </tr>
    <tr>
        <td>Do you receive benefits?</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Number of bins to be emptied on each collection</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Start Date</td>
        <td>14/11/2019</td>
    </tr>
    <tr>
        <td>End Date</td>
        <td>14/11/2020</td>
    </tr>
    <tr>
        <td>Renew subscription automatically</td>
        <td>No</td>
    </tr>
</tbody>
</table>

When to use this

You should use this component to display comparable or scanable content on a page for a user

When not to use this

You should not use this componet as a way of layout for the page, use bootstrap classes instead.

Back to top