Pit Viper

v2.15.0

Pit Viper

v2.15.0
v1 / v2

  • Home
  • Components
  • Tables

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>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Service Date</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Revenue Code</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Procedure Code</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Modifier</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Modifier 2</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Modifier 3</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Modifier 4</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent">Units</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="pv-surface-accent" style="border-radius: 0 0 0 5px">NDC</td>
    <td>&nbsp;</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

Green Cross Orange County

Central Texas

Humaetna

Central Texas

Insura

Central Texas

Unanimous Healthcare

Central Texas

Green Cross Orange County

Central Texas

Humaetna
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

Green Cross Orange County

Central Texas

Humaetna

Central Texas

Insura

Central Texas

Unanimous Healthcare

Central Texas

Green Cross Orange County

Central Texas

Humaetna
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

Green Cross Orange County

Central Texas

Humaetna

Central Texas

Insura

Central Texas

Unanimous Healthcare

Central Texas

Green Cross Orange County

Central Texas

Humaetna
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>