Table
The new AHA notice table is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
Responsive Table with Status
Type | Program | Country | Program Type |
|---|---|---|---|
Success / Approved | Stroke | India | Primary |
Deactivated / Inactive / Disabled | Stroke | India | Primary |
Inprogress / Pending | Stroke | India | Primary |
Warning / Alert | Stroke | India | Primary |
Normal | Stroke | India | Primary |
Rejected / Danger | Stroke | India | Primary |
HTML
<table class="aui-responsive-status-table">
<thead>
<tr>
<th scope="col"><div class="aui-th">Type</div></th>
<th scope="col"><div class="aui-th">Program</div></th>
<th scope="col"><div class="aui-th">Country</div></th>
<th scope="col"><div class="aui-th">Program Type</div></th>
</tr>
</thead>
<tbody>
<tr class="aui-table-status-success">
<td data-title="Type">
<div class="aui-td">Success / Approved</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr class="aui-table-status-deactivated">
<td data-title="Type">
<div class="aui-td">Deactivated / Inactive / Disabled</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr class="aui-table-status-pending">
<td data-title="Type">
<div class="aui-td">Inprogress / Pending</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr class="aui-table-status-warning">
<td data-title="Type">
<div class="aui-td">Warning / Alert</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr class="aui-table-status-normal">
<td data-title="Type">
<div class="aui-td">Normal</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr class="aui-table-status-danger">
<td data-title="Type">
<div class="aui-td">Rejected / Danger</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
</tbody>
</table>Responsive Table Emptystate
Hospital Name | Program | Country | Program Type |
|---|---|---|---|
No Data | |||
HTML
<table class="aui-responsive-status-table">
<thead>
<tr>
<th scope="col"><div class="aui-th">Hospital Name</div></th>
<th scope="col"><div class="aui-th">Program</div></th>
<th scope="col"><div class="aui-th">Country</div></th>
<th scope="col"><div class="aui-th">Program Type</div></th>
</tr>
</thead>
<tbody>
<tr class="aui-status-table-emptystate">
<td colspan="4"><div class="aui-td">No Data</div></td>
</tr>
</tbody>
</table> Responsive Table
| Hospital Name | Program | Country | Program Type |
|---|---|---|---|
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
HTML
<table class="aui-responsive-table">
<thead>
<tr>
<th scope="col">Hospital Name</th>
<th scope="col">Program</th>
<th scope="col">Country</th>
<th scope="col">Program Type</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
</tbody>
</table>Vertical Header Table
| Hospital Name A | Stroke |
|---|---|
| Hospital Name A | Stroke |
| Hospital Name A | Stroke |
| Hospital Name A | Stroke |
HTML
<table class="aui-responsive-table aui-table-cols">
<tbody>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
</tbody>
</table>