iPro / Tables
Standard Tables
Tables are used in iPro to show tabular data in columns and rows when large data is involved, while ePro uses tables sparingly dependent on the layouts purpose. Currently, iPro tables do not use Bootstrap 4 classes, however going forward we'll be transitioning all tabular data to take advantage of Bootstrap 4.
This is a example of a table, design of this table may change.
| Pay Code | Description | Advance Months On Submit | Advance Months On Issue | As Earned | Status | |
|---|---|---|---|---|---|---|
| AE | As Earned | 0 | 0 | Active | ||
| AV | Advanced | 0 | 0 | Active | ||
| Add New Pay Code | ||||||
<table class="margin-0">
<thead>
<tr>
<th>Pay Code <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Description<img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Advance Months On Submit <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Advance Months On Issue <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>As Earned <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Status <img src="images/icon-ngx-datatables-arrow-up.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td>AE</td>
<td>As Earned</td>
<td>0</td>
<td>0</td>
<td><input type="checkbox" checked ></td>
<td>Active</td>
</tr>
<tr>
<td>AV</td>
<td>Advanced</td>
<td>0</td>
<td>0</td>
<td></td>
<td>Active</td>
</tr>
<tr>
<td colspan="7" class="text-center">
<a href="#">
<svg version="1.1" class="s16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="st0" d="M26,30.7c1-0.4,2-1.1,2.8-1.9c1.6-1.6,2.5-3.8,2.5-6.1c0-1.1-0.2-2.2-0.6-3.3c-0.4-1-1.1-2-1.9-2.8
c-3.4-3.3-8.8-3.3-12.1,0c-0.8,0.8-1.4,1.7-1.9,2.8c-0.9,2.1-0.9,4.5,0,6.6c0.4,1,1.1,2,1.9,2.8C19.1,31.3,22.8,32.1,26,30.7
L26,30.7z M19.4,28h5.2c0,0,1.3,0,1.3-1.6s0-2.7,0-2.7s0.3-1.5-1.5-1.5s-3.5,0-3.5,0s-1.5,0-1.5-1.5s0-2.1,0-2.1s-0.1-1.4,1.8-1.4
c2.1,0,4.7,0,4.7,0 M22.7,16.1v13.4"/>
<g>
<line class="st0" x1="18.6" y1="7" x2="1.9" y2="7"/>
<line class="st0" x1="15.6" y1="11.8" x2="1.9" y2="11.8"/>
<line class="st0" x1="12.9" y1="16.5" x2="1.9" y2="16.5"/>
<line class="st0" x1="11.1" y1="21.6" x2="1.9" y2="21.6"/>
<path class="st0" d="M18.6,12.3V2.6c0-0.6-0.5-1.1-1.1-1.1H2.4C1.8,1.5,1.4,2,1.4,2.6v23c0,0.6,0.5,1.1,1.1,1.1H12"/>
</g>
</svg>
Add New Pay Code
</a>
</td>
</tr>
</tbody>
</table>
Tables with Hovers
Tables are used in iPro to show tabular data in columns and rows when large data is involved, while ePro uses tables sparingly dependent on the layouts purpose. Currently, iPro tables do not use Bootstrap 4 classes, however going forward we'll be transitioning all tabular data to take advantage of Bootstrap 4.
This is a example of a table, design of this table may change.
| Carrier | Product | Plan | Start Date | Agent ID | Agent Name | Status |
|---|---|---|---|---|---|---|
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
| Aetna | Dental | Dental Gold Plan | 01/01/2018 | QT3216549876 | Kevin Moore | Active |
<table class="margin-0">
<thead>
<tr>
<th>Pay Code <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Description<img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Advance Months On Submit <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Advance Months On Issue <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>As Earned <img src="images/icon-ngx-datatables-arrow-up.png"></th>
<th>Status <img src="images/icon-ngx-datatables-arrow-up.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td>AE</td>
<td>As Earned</td>
<td>0</td>
<td>0</td>
<td><input type="checkbox" checked ></td>
<td>Active</td>
</tr>
<tr>
<td>AV</td>
<td>Advanced</td>
<td>0</td>
<td>0</td>
<td></td>
<td>Active</td>
</tr>
<tr>
<td colspan="7" class="text-center">
<a href="#">
<svg version="1.1" class="s16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="st0" d="M26,30.7c1-0.4,2-1.1,2.8-1.9c1.6-1.6,2.5-3.8,2.5-6.1c0-1.1-0.2-2.2-0.6-3.3c-0.4-1-1.1-2-1.9-2.8
c-3.4-3.3-8.8-3.3-12.1,0c-0.8,0.8-1.4,1.7-1.9,2.8c-0.9,2.1-0.9,4.5,0,6.6c0.4,1,1.1,2,1.9,2.8C19.1,31.3,22.8,32.1,26,30.7
L26,30.7z M19.4,28h5.2c0,0,1.3,0,1.3-1.6s0-2.7,0-2.7s0.3-1.5-1.5-1.5s-3.5,0-3.5,0s-1.5,0-1.5-1.5s0-2.1,0-2.1s-0.1-1.4,1.8-1.4
c2.1,0,4.7,0,4.7,0 M22.7,16.1v13.4"/>
<g>
<line class="st0" x1="18.6" y1="7" x2="1.9" y2="7"/>
<line class="st0" x1="15.6" y1="11.8" x2="1.9" y2="11.8"/>
<line class="st0" x1="12.9" y1="16.5" x2="1.9" y2="16.5"/>
<line class="st0" x1="11.1" y1="21.6" x2="1.9" y2="21.6"/>
<path class="st0" d="M18.6,12.3V2.6c0-0.6-0.5-1.1-1.1-1.1H2.4C1.8,1.5,1.4,2,1.4,2.6v23c0,0.6,0.5,1.1,1.1,1.1H12"/>
</g>
</svg>
Add New Pay Code
</a>
</td>
</tr>
</tbody>
</table>