Tables
The below examples use standard HTML tables under the hood. For any semi-complex table needs, it’s recommended to use the data grid component as it provides more functionality and styling options.
Table
A table with minimal styling.
Example
A table.
Contract | Payer | Effective | Status |
---|---|---|---|
CCH Eastport - CN Single Case Agreement |
Insura | Jan 22, 2021 | Negotiating |
Kyphoplasty - 10 Network Agreement |
Great Lakes Medical Alliance | Jan 22, 2021 | Draft |
ACL Repair - 673 Single Case Agreement |
Steam Insurance | Jan 22, 2021 | Negotiating |
HTML
<table class="pv-table">
<thead>
<tr>
<th>Contract</th>
<th>Payer</th>
<th>Effective</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">CCH Eastport - CN</a><br>
<span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
</td>
<td>Insura</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-yellow">Negotiating</span></td>
</tr>
<tr>
<td>
<a href="#">Kyphoplasty - 10</a><br>
<span class="pv-text-subdued pv-text-body-xs">Network Agreement</span>
</td>
<td>Great Lakes Medical Alliance</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-red">Draft</span></td>
</tr>
<tr>
<td>
<a href="#">ACL Repair - 673</a><br>
<span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
</td>
<td>Steam Insurance</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-yellow">Negotiating</span></td>
</tr>
</tbody>
</table>
Compressed Table
Use a compressed table to reduce the vertical padding on each cell by half, add borders by default, and change the style of the header row.
Example
A compressed table.
Name | Health System | City | State | Beds |
---|---|---|---|---|
Lafayette General Health | Abbeville | SC | 71 | |
Allina Health System | Minneapolis | MN | 71 | |
Tenet Healthcare Corp. | Phoenix | AZ | 71 |
HTML
<table class="pv-table-compressed">
<thead>
<tr>
<th>Name</th>
<th>Health System</th>
<th>City</th>
<th>State</th>
<th>Beds</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="pv-flex">
<input type="checkbox" class="pv-checkbox" name="name" checked>
<span>Abbeville Area Medical Center</span>
</label>
</td>
<td>Lafayette General Health</td>
<td>Abbeville</td>
<td>SC</td>
<td>71</td>
</tr>
<tr>
<td>
<label class="pv-flex">
<input type="checkbox" class="pv-checkbox" name="name" checked>
<span>Abbott Northwestern Hospital</span>
</label>
</td>
<td>Allina Health System</td>
<td>Minneapolis</td>
<td>MN</td>
<td>71</td>
</tr>
<tr>
<td>
<label class="pv-flex">
<input type="checkbox" class="pv-checkbox" name="name" checked>
<span>Abrazo Arrowhead Campus</span>
</label>
</td>
<td>Tenet Healthcare Corp.</td>
<td>Phoenix</td>
<td>AZ</td>
<td>71</td>
</tr>
</tbody>
</table>
Bordered Table
Use a bordered table to add borders under each row.
Example
A table with horizontal borders.
Contract | Payer | Effective | Status |
---|---|---|---|
CCH Eastport - CN Single Case Agreement |
Insura | Jan 22, 2021 | Negotiating |
Kyphoplasty - 10 Network Agreement |
Great Lakes Medical Alliance | Jan 22, 2021 | Draft |
ACL Repair - 673 Single Case Agreement |
Steam Insurance | Jan 22, 2021 | Negotiating |
HTML
<table class="pv-table pv-table-bordered">
<thead>
<tr>
<th>Contract</th>
<th>Payer</th>
<th>Effective</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">CCH Eastport - CN</a><br>
<span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
</td>
<td>Insura</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-yellow">Negotiating</span></td>
</tr>
<tr>
<td>
<a href="#">Kyphoplasty - 10</a><br>
<span class="pv-text-subdued pv-text-body-xs">Network Agreement</span>
</td>
<td>Great Lakes Medical Alliance</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-red">Draft</span></td>
</tr>
<tr>
<td>
<a href="#">ACL Repair - 673</a><br>
<span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
</td>
<td>Steam Insurance</td>
<td>Jan 22, 2021</td>
<td><span class="pv-status-yellow">Negotiating</span></td>
</tr>
</tbody>
</table>
Vertical Borders
Use the vertical border utility to add borders between each column.
Example
A table with vertical borders
claim_line_index | |
Service Date | |
Revenue Code | |
Procedure Code | |
Modifier | |
Modifier 2 | |
Modifier 3 | |
Modifier 4 | |
Units | |
NDC |
HTML
<table class="pv-table-compressed pv-table-vertical-borders pv-border-left pv-border-right pv-radius">
<tr>
<td class="pv-surface-accent" width="200" style="border-radius: 5px 0 0 0">claim_line_index</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Service Date</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Revenue Code</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Procedure Code</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Modifier</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Modifier 2</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Modifier 3</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Modifier 4</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent">Units</td>
<td> </td>
</tr>
<tr>
<td class="pv-surface-accent" style="border-radius: 0 0 0 5px">NDC</td>
<td> </td>
</tr>
</table>
Matrix Table
Use a matrix table when you need both horizontal and vertical headers. By default, the table scrolls horizontally and the first column remains fixed. You can add sticky headers to keep the top row fixed as well.
Use the colgroup
element to set the sizes of each column.
Example
A matrix table in a container with fixed dimensions to demonstrate the heading and column scrolling.
TagsManage
|
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
---|---|---|---|---|---|---|
Effective Date | 10/11/2024 | 09/01/2024 | Empty | Empty | 01/01/2025 | 12/31/2026 |
Termination Date | 10/10/2025 | 08/31/2025 | Empty | Empty | 12/31/2026 | 12/31/2026 |
Term Length | 1 | Empty | Empty | Empty | 1 | 2 |
Line of Business | Commercial | Commercial | Empty | Empty | Commercial | Empty |
Products | PPO, HMO, EPO | PPO, EPO | Empty | Empty | Empty | Empty |
COB Language | Pays COB | Empty | Empty | Empty | Empty | Empty |
Lessor Of | Yes | Empty | Empty | Empty | Empty | Empty |
MS Per Diem | $2,500.00 | $2,000.00 | Empty | Empty | Empty | Empty |
DOU Per Diem | $4,000.00 | $3,500.00 | Empty | Empty | Empty | Empty |
HTML
<div style="overflow-x: auto; max-height: 400px;">
<table class="pv-table-matrix" data-sticky>
<colgroup>
<col style="width:260px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
</colgroup>
<thead>
<tr>
<th><div class="pv-space-between"><span>Tags</span><a href="" class="pv-text-title-sm">Manage</a></div>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Green Cross Orange County</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Humaetna</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Insura</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Unanimous Healthcare</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Green Cross Orange County</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Humaetna</a></p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Effective Date</th>
<td>10/11/2024</td>
<td>09/01/2024</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>01/01/2025</td>
<td>12/31/2026</td>
</tr>
<tr>
<th>Termination Date</th>
<td>10/10/2025</td>
<td>08/31/2025</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>12/31/2026</td>
<td>12/31/2026</td>
</tr>
<tr>
<th>Term Length</th>
<td>1</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>Line of Business</th>
<td>Commercial</td>
<td>Commercial</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>Commercial</td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>Products</th>
<td>PPO, HMO, EPO</td>
<td>PPO, EPO</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>COB Language</th>
<td>Pays COB</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>Lessor Of</th>
<td>Yes</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>MS Per Diem</th>
<td>$2,500.00</td>
<td>$2,000.00</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>DOU Per Diem</th>
<td>$4,000.00</td>
<td>$3,500.00</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
</tbody>
</table>
</div>
Compressed Matrix Table
Use the compressed matrix table to reduce padding of the cells.
Example
A compressed matrix table.
TagsManage
|
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
---|---|---|---|---|---|---|
Effective Date | 10/11/2024 | 09/01/2024 | Here's a really long string of text that wraps obnoxiously and breaks everything. | Empty | 01/01/2025 | 12/31/2026 |
Termination Date | 10/10/2025 | 08/31/2025 | Empty | Empty | 12/31/2026 | 12/31/2026 |
Term Length | 1 | Empty | Empty | Empty | 1 | 2 |
Line of Business | Commercial | Commercial | Empty | Empty | Commercial | Empty |
Products | PPO, HMO, EPO | PPO, EPO | Empty | Empty | Empty | Empty |
COB Language | Pays COB | Empty | Empty | Empty | Empty | Empty |
Lessor Of | Yes | Empty | Empty | Empty | Empty | Empty |
MS Per Diem | $2,500.00 | $2,000.00 | Empty | Empty | Empty | Empty |
DOU Per Diem | $4,000.00 | $3,500.00 | Empty | Empty | Empty | Empty |
HTML
<div style="overflow-x: auto; max-height: 400px;">
<table class="pv-table-matrix-compressed" data-sticky>
<colgroup>
<col style="width:260px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
<col style="width:200px">
</colgroup>
<thead>
<tr>
<th><div class="pv-space-between"><span>Tags</span><a href="" class="pv-text-title-sm">Manage</a></div>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Green Cross Orange County</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Humaetna</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Insura</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Unanimous Healthcare</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Green Cross Orange County</a></p>
</th>
<th>
<p class="pv-text-body-xs pv-text-subdued">Central Texas</p>
<p class="pv-truncate"><a href="">Humaetna</a></p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Effective Date</th>
<td>10/11/2024</td>
<td>09/01/2024</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>01/01/2025</td>
<td>12/31/2026</td>
</tr>
<tr>
<th>Termination Date</th>
<td>10/10/2025</td>
<td>08/31/2025</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>12/31/2026</td>
<td>12/31/2026</td>
</tr>
<tr>
<th>Term Length</th>
<td>1</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>Line of Business</th>
<td>Commercial</td>
<td>Commercial</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td>Commercial</td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>Products</th>
<td>PPO, HMO, EPO</td>
<td>PPO, EPO</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>COB Language</th>
<td>Pays COB</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>Lessor Of</th>
<td>Yes</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>MS Per Diem</th>
<td>$2,500.00</td>
<td>$2,000.00</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
<tr>
<th>DOU Per Diem</th>
<td>$4,000.00</td>
<td>$3,500.00</td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
<td><span class="pv-text-subdued">Empty</span></td>
</tr>
</tbody>
</table>
</div>
Matrix Table Buttons
Matrix Table buttons allow you to make the content of a cell clickable while showing additional content on hover/focus.
There are two kinds of patterns, the first will show an icon with a tooltip on hover/focus. For this pattern, the direct children of the button should be the initial text of the cell, followed by the tooltip.
The second pattern will visually replace the content of the cell on hover/focus. For this pattern, the direct children of the button should be the initial text of the cell within a span
element, followed by a div
element with the content that should appear on hover/focus.
On hover
& focus
, pv-truncate
and pv-tooltip
should always stay visible.
Note: as of v1.72.1, Matrix Table Buttons can be used in any type of table by adding the class .pv-table-button
to the button.
Example
A matrix table row with icon/tooltip on hover and action text on hover patterns.
TagsManage
|
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
Central Texas |
---|---|---|---|---|---|---|
Effective Date |
HTML
<table class="pv-table-matrix" data-sticky>
...
<tr>
<th>Effective Date</th>
<td>
<button type="button">
10/11/2024
<div class="pv-tooltip" data-position="bottom-center">
<svg aria-hidden="true" class="pv-icon-16 pv-text-brand">
<title>note</title>
<use xlink:href="#note"></use>
</svg>
<span role="tooltip">This is the tag description, not associated text.</span>
</div>
</button>
</td>
<td>
<button type="button">
<span class="pv-truncate">Long text long text long text</span>
<div class="pv-tooltip" data-position="bottom-center">
<svg aria-hidden="true" class="pv-icon-16 pv-text-brand">
<title>note</title>
<use xlink:href="#note"></use>
</svg>
<span role="tooltip">Long text long text long text</span>
</div>
</button>
<td>
<button type="button">
<svg aria-hidden="true" class="pv-icon-16 pv-text-subdued">
<title>ai</title>
<use xlink:href="#ai"></use>
</svg>
<span class="pv-text-subdued pv-truncate pv-flex-item">Minimum $160; maximum $240</span>
</button>
</td>
<td>
<button type="button">
<span class="pv-text-subdued">Empty</span>
<div>
Add tag
</div>
</button>
</td>
<td>
<button type="button">
01/01/2025
<div class="pv-tooltip" data-position="bottom-center">
<svg aria-hidden="true" class="pv-icon-16 pv-text-brand">
<title>note</title>
<use xlink:href="#note"></use>
</svg>
<span role="tooltip">This is the tag description, not associated text.</span>
</div>
</button>
</td>
<td>
<button type="button">
12/31/2026
<div class="pv-tooltip" data-position="bottom-center">
<svg aria-hidden="true" class="pv-icon-16 pv-text-brand">
<title>note</title>
<use xlink:href="#note"></use>
</svg>
<span role="tooltip">This is the tag description, not associated text.</span>
</div>
</button>
</td>
</tr>
</table>
Responsive Cells
Use .pv-responsive-cell
to flex two items on a single row but stack when a cell spans multiple rows.
Example
Responsive cells with no rowspan
and with rowspan="2"
.
Payer/Plan | Code | NYC Health |
---|---|---|
Aetna AETNA - AETNA PPO |
HCPCS
0337U
|
16,235.00 |
Aetna AETNA - AETNA PPO |
HCPCS
0337U
|
16,235.00 |
HCPCS
0337U
|
16,235.00 |
HTML
<table class="pv-table-compressed pv-table-vertical-borders pv-border-left pv-border-right">
<colgroup>
...
</colgroup>
<thead>
...
</thead>
<tbody>
<tr>
<td>
<div class="pv-responsive-cell">
<p class="pv-text-subdued pv-text-body-xs">Aetna</p>
<p class="pv-truncate">AETNA - AETNA PPO</p>
</div>
</td>
<td>
<div class="pv-space-between">
<span class="pv-text-subdued">HCPCS</span>
<span>0337U</span>
</div>
</td>
<td data-symbol="$">16,235.00</td>
</tr>
<tr>
<td rowspan="2">
<div class="pv-responsive-cell">
<p class="pv-text-subdued pv-text-body-xs">Aetna</p>
<p class="pv-truncate">AETNA - AETNA PPO</p>
</div>
</td>
<td>
<div class="pv-space-between">
<span class="pv-text-subdued">HCPCS</span>
<span>0337U</span>
</div>
</td>
<td data-symbol="$">16,235.00</td>
</tr>
<tr>
<td>
<div class="pv-space-between">
<span class="pv-text-subdued">HCPCS</span>
<span>0337U</span>
</div>
</td>
<td data-symbol="$">16,235.00</td>
</tr>
</tbody>
</table>
Sortable Columns
Use the data attributes data-sort="ascending"
or data-sort="descending"
to indicate a table column is sorted. Use only data-sort
to indicate a column is sortable.
Example
Tables with a column sorted in descending and ascending order.
# |
Name NPI |
MSDRG | Average Rate | Average % of Medicare | |
---|---|---|---|---|---|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
# |
Name NPI |
MSDRG | Average Rate | Average % of Medicare | |
---|---|---|---|---|---|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
HTML
<table class="pv-table-compressed pv-border-left pv-border-right">
<thead>
<tr>
<th data-sort>#</th>
<th data-sort>
<div class="pv-flex" style="--flex-gap: .5rem">
<span>Name</span> <span class="pv-text-body-sm pv-text-body-subdued">NPI</span></th>
</div>
</th>
<th data-sort>MSDRG</th>
<th class="pv-text-right" data-sort>Average Rate</th>
<th class="pv-text-right" data-sort="descending"><a href="#">Average % of Medicare</a></th>
<th><svg aria-hidden="true" class="pv-icon-24">
<title>show</title>
<use xlink:href="#show"></use>
</svg></th>
</tr>
</thead>
<tbody>
<tr>
<td class="pv-surface-accent">1</td>
<td>
<p class="pv-text-title-sm">BWI Maryland Hospital</p>
<p class="pv-text-subdued">1234567890</p>
</td>
<td>4</td>
<td>
<div class="pv-space-between">
<span class="pv-text-subdued">$</span>
<span>456,427.97</span>
</div>
</td>
<td>
<div class="pv-flex" style="--flex-justify: flex-end">
<span>451.64</span>
<span class="pv-text-subdued">%</span>
</div>
</td>
<td><button type="button" class="pv-button-icon"><svg aria-hidden="true" class="pv-icon-24 pv-text-subdued">
<title>hide</title>
<use xlink:href="#hide"></use>
</svg></button></td>
</tr>
</tbody>
</table>
<table class="pv-table-compressed pv-border-left pv-border-right">
<thead>
<tr>
<th data-sort>#</th>
<th data-sort>
<div class="pv-flex" style="--flex-gap: .5rem">
<span>Name</span> <span class="pv-text-body-sm pv-text-body-subdued">NPI</span></th>
</div>
</th>
<th data-sort>MSDRG</th>
<th class="pv-text-right" data-sort>Average Rate</th>
<th class="pv-text-right" data-sort="ascending"><a href="#">Average % of Medicare</a></th>
<th><svg aria-hidden="true" class="pv-icon-24">
<title>show</title>
<use xlink:href="#show"></use>
</svg></th>
</tr>
</thead>
<tbody>
<tr>
<td class="pv-surface-accent">1</td>
<td>
<p class="pv-text-title-sm">BWI Maryland Hospital</p>
<p class="pv-text-subdued">1234567890</p>
</td>
<td>4</td>
<td>
<div class="pv-space-between">
<span class="pv-text-subdued">$</span>
<span>456,427.97</span>
</div>
</td>
<td>
<div class="pv-flex" style="--flex-justify: flex-end">
<span>451.64</span>
<span class="pv-text-subdued">%</span>
</div>
</td>
<td><button type="button" class="pv-button-icon"><svg aria-hidden="true" class="pv-icon-24 pv pv-text-subdued">
<title>hide</title>
<use xlink:href="#hide"></use>
</svg></button></td>
</tr>
</tbody>
</table>
Sticky Headers
Use sticky headers to keep the headers in view when a long table is scrolled vertically. Add the data attribute data-sticky
(it doesn’t need a value).
You can override the top
value of the sticky header with a custom property. Use this to adjust the vertical positioning of the header if it’s not appearing where it should.
Custom Property | Default Value | Description |
---|---|---|
--top |
0 | The top position of the sticky header |
Example
A tables with a sticky header.
# |
Name NPI |
MSDRG | Average Rate | Average % of Medicare | |
---|---|---|---|---|---|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
|
1 |
BWI Maryland Hospital 1234567890 |
4 |
$
456,427.97
|
451.64
%
|
HTML
<table class="pv-table-compressed pv-border-left pv-border-right" data-sticky style="--top: -3rem">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Sticky Columns
Use sticky columns to “freeze” columns to the left when a table scrolls horizontally. You can make multiple columns sticky but after the first column you must set the property --offset
to the width of the preceding columns. You must add data-sticky-col
(and --offset
on subsequent columns) to each cell (th
/td
) in the column.
Example
A table with the first two columns sticky.
Payer/Plan | Code | NYC Health + Hospitals - South Brooklyn Health / Ruth Bader Ginsburg Hospital) |
Mount Sinai Beth Israel |
Mount Sinai Queens |
United Memorial Medical Center |
---|---|---|---|---|---|
Aetna AETNA - AETNA PPO |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 | |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 | |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 | |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 | |
Aetna AETNA - AETNA PPO |
HCPCS
0337U
|
16,235.00 | 16,235.00 | 16,235.00 | 16,235.00 |
HTML
<table class="pv-table-compressed pv-table-vertical-borders">
<colgroup>
...
</colgroup>
<thead>
<tr>
<th data-sticky-col>Payer/Plan</th>
<th data-sticky-col style="--offset: 240px" class="pv-border-thick-right">...</th>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5" data-sticky-col>
...
</td>
<td class="pv-border-thick-right" data-sticky-col style="--offset: 240px">
...
</td>
...
</tr>
...
</tbody>
</table>
Thick Right Border
When using sticky columns, apply pv-border-thick-right
to each cell in the right-most sticky column to provide the user with more indication that the column is “frozen”. See example above.
Symbols
Use the data-symbol
attribute to embed a symbol on a table cell.
data-symbol | Description |
---|---|
$ |
Adds $ to the left edge of a cell. |
% |
Adds % to the right edge of a cell. |
/d |
Adds $ to the left edge of a cell and /d to the right edge. |
Example
A table row with symbols.
NYC Health | Mount Sinai | United Memorial |
---|---|---|
16,235.00 | 16,235.00 | 16,235.00 |
HTML
<table class="pv-table-compressed pv-table-vertical-borders pv-border-left pv-border-right">
<colgroup>
...
</colgroup>
<thead>
...
</thead>
<tbody>
<tr>
<td data-symbol="$">16,235.00</td>
<td data-symbol="%">16,235.00</td>
<td data-symbol="/d">16,235.00</td>
</tr>
</tbody>
</table>
Vertical Align
Use the vertical align utility to align text in a table cell to the top of the cell rather than the center.
Example
A table row with the first cell set to vertical align.
Contract |
Humaetna Medical Group All Commercial Effective 2025-12-31
Priority 1
VBC
|
Insura_B01-01-200G_really_long_name Effective 2023-01-01 Southeast |
---|
HTML
<table class="pv-table-matrix-compressed">
<colgroup>
...
</colgroup>
<thead>
<tr>
<th class="pv-valign-top">Contract</th>
<td colspan="2" class="pv-text-center pv-status-green">
...
</td>
<td class="pv-text-center pv-status-red">
...
</td>
</tr>
...
</table>
WIP: Collapsible Rows
Use collapsible rows to toggle the visibility of one or more rows following a parent row.
Each table row (tr
) needs an id
attribute. Children of that row should have a data-parent
attribute referencing that ID. The button that toggles the visibility of the row should pass the ID of the parent row to the toggleRows()
function.
All children of the row should have the class .pv-hide
and aria-expanded="false"
, if they should be hidden by default, otherwise include only aria-expanded="true"
and they will be visible by default until the toggle button is clicked.
Requires some JavaScript, included in the HTML sample.
Example
A table with collapsible rows.
Name | Type | Effective Date | |
---|---|---|---|
Humaetna Metropolis Contract | Contract | Jan 22, 2022 | |
Humaetna Gotham Contract | Contract | Jan 22, 2022 | |
Humaetna Gotham ASC | Base Language | Feb 1, 2022 | |
Humaetna Gotham ASC V2 | Base Language | Feb 1, 2022 | |
Humaetna Gotham First Health Rates | Fee Schedule | Feb 1, 2022 | |
Humaetna Gotham Medicare Rates | Fee Schedule | Feb 1, 2022 | |
Humaetna Racoon City Contract | Contract | Jan 22, 2022 | |
Humaetna Racoon City ASC | Base Language | Feb 1, 2022 | |
Humaetna Racoon City ASC V2 | Base Language | Feb 1, 2022 | |
Humaetna Racoon City First Health Rates | Fee Schedule | Feb 1, 2022 | |
Humaetna Racoon City Medicare Rates | Fee Schedule | Feb 1, 2022 |
HTML
<table class="pv-table-compressed">
<thead>...</thead>
<tbody>
<tr>...</tr>
<tr id="1" role="tree">
<td class="pv-flex">
<button type="button" class="pv-button-icon" onClick="toggleRows(1)" aria-expanded="true">
<svg aria-hidden="true" class="pv-icon-24">
<title>Toggle Humaetna Gotham Contract Folder</title>
<use xlink:href="#caret-right"></use>
</svg>
</button>
<a href="">Humaetna Gotham Contract</a>
</td>
<td>Contract</td>
<td>Jan 22, 2022</td>
<td>...</td>
</tr>
<tr data-parent="1" role="treeitem">
<td>Humaetna Gotham ASC</td>
<td>Base Language</td>
<td>Feb 1, 2022</td>
<td>...</td>
</tr>
<tr data-parent="1" role="treeitem">
...
</tr>
<tr data-parent="1" role="treeitem">
...
</tr>
<tr data-parent="1" role="treeitem">
...
</tr>
<tr id="2" role="tree">
<td class="pv-flex">
<button type="button" class="pv-button-icon" onClick="toggleRows(2)" aria-expanded="false">
<svg aria-hidden="true" class="pv-icon-24">
<title>Toggle Humaetna Racoon City Contract Folder</title>
<use xlink:href="#caret-right"></use>
</svg>
</button>
<a href="">Humaetna Racoon City Contract</a>
</td>
<td>Contract</td>
<td>Jan 22, 2022</td>
<td>...</td>
</tr>
<tr data-parent="2" class="pv-hide" role="treeitem">
...
</tr>
<tr data-parent="2" class="pv-hide" role="treeitem">
...
</tr>
<tr data-parent="2" class="pv-hide" role="treeitem">
...
</tr>
<tr data-parent="2" class="pv-hide" role="treeitem">
...
</tr>
</tbody>
</table>
<script>
function toggleRows(parent) {
let rows = document.querySelectorAll(`[data-parent="${parent}"]`);
for (let i = 0; i < rows.length; i++) {
rows[i].classList.toggle("pv-hide");
}
}
</script>