Data Table

Searchable, sortable responsive data table with a labeled horizontal scroll region on narrow screens.

Find a service

Example service comparison

Design review	One week	Page and component review
Website build	Four weeks	Responsive page templates
Ongoing support	Monthly	Updates and maintenance

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.

<label class="form-label mb-4 d-block">Find a service<input class="form-control" data-table-search="" placeholder="Search the table" type="search"/></label><p data-table-status="" role="status"></p>
<div aria-label="Service comparison, scroll horizontally" class="table-responsive" role="region" tabindex="0">
<table class="table cp-data-table">
<caption>
         Example service comparison
        </caption>
<thead>
<tr>
<th aria-sort="none" scope="col"><button class="upgrade-sort" data-sort-column="" type="button">Service ↕</button></th>
<th aria-sort="none" scope="col"><button class="upgrade-sort" data-sort-column="" type="button">Delivery ↕</button></th>
<th aria-sort="none" scope="col"><button class="upgrade-sort" data-sort-column="" type="button">Includes ↕</button></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
           Design review
          </th>
<td>
           One week
          </td>
<td>
           Page and component review
          </td>
</tr>
<tr>
<th scope="row">
           Website build
          </th>
<td>
           Four weeks
          </td>
<td>
           Responsive page templates
          </td>
</tr>
<tr>
<th scope="row">
           Ongoing support
          </th>
<td>
           Monthly
          </td>
<td>
           Updates and maintenance
          </td>
</tr>
</tbody>
</table>
</div>