Table

Simple Table

Use modifier Panel-row--withCells to display Panel-cells side-by-side in a row.

By default the cells will be equal width. Use size properties to adjust their ratio.

Use modifier Panel-cell--header to define the heading cell.

Panel Header

Muporu Lunien

Naten suec hetcofkeb na wowopev.

Ewtaj Lifteddij

Bifet guflar la mujcesu umehef.

Tirjap Uf

Omag jihesipo inco gonuj icpa. 
<div class="Panel">
  <div class="Panel-header">
    <h3 class="Panel-title">
      Panel Header
    </h3>
    <button class="Button">
      <svg viewBox="0 0 960 960" role="presentation" class="Icon">
        <path d="M58.3 950c-12.2 0-22.8-4.5-31.8-13.5-11.6-11.6-15.7-25-12.5-40.4L109.3 458c.6-7.7 4.8-15.4 12.5-23.1L525.2 31.5c8.3-9 18.9-13.5 31.8-13.5s23.4 4.5 31.8 13.5l344.7 343.7c8.3 9 12.5 19.7 12.5 32.3 0 12.5-4.2 23.3-12.5 32.3L529.1 843.1c-6.4 6.4-14.1 10.6-23.1 12.5C209.4 918.5 60.2 950 58.3 950zm424.6-247.4l324.5-324.5-62.6-63.5L420.3 639c-12.8 12.8-28.6 19.3-47.2 19.3s-34.3-6.4-47.2-19.3c-12.8-12.8-19.3-28.4-19.3-46.7s6.4-33.9 19.3-46.7l324.5-325.4-62.6-62.6-324.5 324.5c-19.9 19.9-43.3 25-70.3 15.4l-33.7 177.2 130 130.9 178.1-34.7c-9.6-25.7-4.4-48.4 15.5-68.3z" />
      </svg>
      Edit
    </button>
  </div>
  <div class="Panel-body">
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-size1of3">
        <h4>Poto Mawdun </h4>
      </div>
      <div class="Panel-cell u-size2of3">
        Inhob zum zi akwu amkenciw.
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-size1of3">
        <h4>Sinos Niwo </h4>
      </div>
      <div class="Panel-cell u-size2of3">
        Umapero deg pomto hacges cedujmup.
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-size1of3">
        <h4>Ow Uhegiw </h4>
      </div>
      <div class="Panel-cell u-size2of3">
        Gok nuwotpa zu codi gefazetor.
      </div>
    </div>
  </div>
  <div class="Panel-footer">
    <button class="Button Button--negative">Sit</button>
    <button class="Button Button--primary">Amet</button>
  </div>
</div>

Simple Table Responsive

Use Panel modifier classes to stack cells up to a max screen size.

  • Panel--xsMax-stacked: Stacked until the xs breakpoint
  • Panel--smMax-stacked: Stacked until the sm breakpoint
  • Panel--mdMax-stacked: Stacked until the md breakpoint
  • Panel--lgMax-stacked: Stacked until the lg breakpoint

Panel Header

Ro Cizoru

Udo cokfusdo limla ubegepfi gew.

Jopofnu Binoodo

Daz zifefhe mikmuok dovieki afi.

Hiubgef Javzin

Wolograt osref rotodji loz sa. 
<div class="Panel Panel--mdMax-stacked">
  <div class="Panel-header">
    <h3 class="Panel-title">
      Panel Header
    </h3>
    <button class="Button">
      <svg viewBox="0 0 960 960" role="presentation" class="Icon">
        <path d="M58.3 950c-12.2 0-22.8-4.5-31.8-13.5-11.6-11.6-15.7-25-12.5-40.4L109.3 458c.6-7.7 4.8-15.4 12.5-23.1L525.2 31.5c8.3-9 18.9-13.5 31.8-13.5s23.4 4.5 31.8 13.5l344.7 343.7c8.3 9 12.5 19.7 12.5 32.3 0 12.5-4.2 23.3-12.5 32.3L529.1 843.1c-6.4 6.4-14.1 10.6-23.1 12.5C209.4 918.5 60.2 950 58.3 950zm424.6-247.4l324.5-324.5-62.6-63.5L420.3 639c-12.8 12.8-28.6 19.3-47.2 19.3s-34.3-6.4-47.2-19.3c-12.8-12.8-19.3-28.4-19.3-46.7s6.4-33.9 19.3-46.7l324.5-325.4-62.6-62.6-324.5 324.5c-19.9 19.9-43.3 25-70.3 15.4l-33.7 177.2 130 130.9 178.1-34.7c-9.6-25.7-4.4-48.4 15.5-68.3z" />
      </svg>
      Edit
    </button>
  </div>
  <div class="Panel-body">
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-lg-size1of3">
        <h4>
              Zupamha
              Koj
          </h4>
      </div>
      <div class="Panel-cell u-lg-size2of3">
        Dam wecoc jetjoamo vuzpe de.
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-lg-size1of3">
        <h4>
              Okuezi
              Bob
          </h4>
      </div>
      <div class="Panel-cell u-lg-size2of3">
        Pen humpuuc re ran ves.
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell Panel-cell--header u-lg-size1of3">
        <h4>
              Wut
              Be
          </h4>
      </div>
      <div class="Panel-cell u-lg-size2of3">
        Nen teti guhufehi hik repseted.
      </div>
    </div>
  </div>
</div>

Complex Table

Complex table with filter controls in the header composed of other patterns.

Add modifier Panel-row--withCells to each Panel-row to create rows of side-by-side cells.

By default cells will all be equal width. Use different flex or size properties to customize cell width.

Use modifier Panel--striped to add zebra striping.

Advanced Search

1-46 of 46

ID

Status

Date

Type

Total

Payments

Adjustments

Balance

Admin

10001
Submitted
10/27/2061
online
$525.00
$505.64
$576.67
$540.70
10002
Pending
1/21/2033
online
$900.00
$541.65
$209.09
$926.91
10003
Paid
10/12/2038
online
$490.00
$982.32
$129.02
$504.65
10005
Paid
9/10/2095
offline
$600.00
$751.93
$98.74
$600.00
10006
Refunded
10/8/2058
online
$0.00
$665.65
$409.15
$0.00 
<div class="Grid u-flexAlignItemsEnd">
  <div class="Grid-cell u-size1of2">
    <div class="FieldGroup">
      <p class="FieldGroup-label">
        Advanced Search
      </p>
      <div class="Grid Grid--withGutter">
        <div class="Grid-cell u-size1of2">
          <div class="SelectBox">
            <label class="u-hiddenVisually">Select search paramenter</label>
            <select class="SelectBox-options">
              <option disabled selected>Select search parameter</option>
              <option value="">Status</option>
              <option value="">Batch title</option>
            </select>
          </div>
        </div>
        <div class="Grid-cell u-size1of2">
          <label class="u-hiddenVisually">Enter search terms</label>
          <input class="Input" placeholder='Search terms e.g. "open"'>
        </div>
      </div>
    </div>
  </div>
  <div class="Grid-cell u-size1of2">
    <div class="u-flex u-flexAlignItemsCenter u-flexJustifyEnd u-spaceBottomMd">
      <p class="u-spaceRightMd">1-46 of 46</p>
      <div class="ButtonGroup">
        <button disabled class="Button">
          Prev
        </button>
        <button class="Button is-active">
          1
        </button>
        <button class="Button ">
          2
        </button>
        <button class="Button ">
          3
        </button>
        <button class="Button ">
          4
        </button>
        <button class="Button">
          Next
        </button>
      </div>
    </div>
  </div>
</div>
<div class="Panel Panel--striped">
  <div class="Panel-body">
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">ID</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block u-colorHighlight"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Status</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Date</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Type</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Total</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Payments</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Adjustments</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Balance</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell u-borderLeft u-spaceLeftSm">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyCenter" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Admin</span>
          </a>
        </h4>
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        10001
      </div>
      <div class="Panel-cell">
        Submitted
      </div>
      <div class="Panel-cell">
        4/5/2057
      </div>
      <div class="Panel-cell">
        online
      </div>
      <div class="Panel-cell u-textRight">
        $525.00
      </div>
      <div class="Panel-cell u-textRight">
        $818.40
      </div>
      <div class="Panel-cell u-textRight">
        $238.07
      </div>
      <div class="Panel-cell u-textRight">
        $540.70
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        10002
      </div>
      <div class="Panel-cell">
        Pending
      </div>
      <div class="Panel-cell">
        4/26/2069
      </div>
      <div class="Panel-cell">
        online
      </div>
      <div class="Panel-cell u-textRight">
        $900.00
      </div>
      <div class="Panel-cell u-textRight">
        $921.66
      </div>
      <div class="Panel-cell u-textRight">
        $248.21
      </div>
      <div class="Panel-cell u-textRight">
        $926.91
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        10003
      </div>
      <div class="Panel-cell">
        Paid
      </div>
      <div class="Panel-cell">
        7/7/2024
      </div>
      <div class="Panel-cell">
        online
      </div>
      <div class="Panel-cell u-textRight">
        $490.00
      </div>
      <div class="Panel-cell u-textRight">
        $960.85
      </div>
      <div class="Panel-cell u-textRight">
        $612.17
      </div>
      <div class="Panel-cell u-textRight">
        $504.65
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        10005
      </div>
      <div class="Panel-cell">
        Paid
      </div>
      <div class="Panel-cell">
        10/20/2049
      </div>
      <div class="Panel-cell">
        offline
      </div>
      <div class="Panel-cell u-textRight">
        $600.00
      </div>
      <div class="Panel-cell u-textRight">
        $754.72
      </div>
      <div class="Panel-cell u-textRight">
        $840.40
      </div>
      <div class="Panel-cell u-textRight">
        $600.00
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        10006
      </div>
      <div class="Panel-cell">
        Refunded
      </div>
      <div class="Panel-cell">
        4/13/2087
      </div>
      <div class="Panel-cell">
        online
      </div>
      <div class="Panel-cell u-textRight">
        $0.00
      </div>
      <div class="Panel-cell u-textRight">
        $111.42
      </div>
      <div class="Panel-cell u-textRight">
        $173.08
      </div>
      <div class="Panel-cell u-textRight">
        $0.00
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>
  </div>
</div>

Expandable Rows

ID

Payment Status

Date

Type

Net Amount

Gross Amount

Admin

10001
Submitted
1/2/2113
online
$525.00
$540.70
10051
Submitted
8/18/2101
online
$525.00
$540.70
-
10002
Pending
5/14/2073
online
$900.00
$926.91
10041
Submitted
1/22/2050
online
$900.00
$926.91
-
10042
Pending
1/7/2044
online
$900.00
$926.91
-
10003
Paid
10/4/2103
online
$490.00
$504.65
10031
Submitted
6/2/2092
online
$490.00
$504.65
-
10032
Pending
5/12/2042
online
$490.00
$504.65
-
10033
Paid
4/24/2049
online
$490.00
$504.65
-
10005
Paid
2/6/2053
offline
$600.00
$600.00
10006
Refunded
9/15/2090
online
$0.00
$0.00
10021
Submitted
6/29/2119
online
$800.00
$823.92
-
10022
Pending
9/9/2075
online
$800.00
$823.92
-
10023
Paid
1/6/2113
online
$800.00
$823.92
-
10023
Refunded
1/21/2099
online
$-800.00
$-823.92
- 
<div class="Panel">
  <div class="Panel-body">
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell ">
        <h4 class="Panel-title">ID</h4>
      </div>
      <div class="Panel-cell ">
        <h4 class="Panel-title">Payment Status</h4>
      </div>
      <div class="Panel-cell ">
        <h4 class="Panel-title">Date</h4>
      </div>
      <div class="Panel-cell ">
        <h4 class="Panel-title">Type</h4>
      </div>
      <div class="Panel-cell u-textRight">
        <h4 class="Panel-title">Net Amount</h4>
      </div>
      <div class="Panel-cell u-textRight">
        <h4 class="Panel-title">Gross Amount</h4>
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter">
        <h4 class="Panel-title">Admin</h4>
      </div>
    </div>
    <div class="Panel-expandableRow">
      <div class="Panel-row Panel-row--withCells Panel-row--parent">
        <div class="Panel-cell">
          <a href="#"
                   class="Panel-expandableControl js-expandableControlDemo"
                   data-control="10001">
                  <span class="Panel-expandableControlIcon">
                    <svg viewBox="0 0 960 960" class="Icon"><path d="M497 854c-6.7 6.7-14.7 10-24 10H225c-14.7 0-24.7-6.3-30-19-2-4-3-8.3-3-13 0-7.3 2.7-14.3 8-21l313-331-313-330c-9.3-11.3-11-23-5-35 6-12.7 16-19 30-19h248c10 0 18 3.7 24 11l326 352c6 6 9 13 9 21s-3 15.3-9 22L497 854z"/></svg>
                  </span>
                  10001
                </a>
        </div>
        <div class="Panel-cell">
          Submitted
        </div>
        <div class="Panel-cell">
          10/6/2068
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $525.00
        </div>
        <div class="Panel-cell u-textRight">
          $540.70
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-childRows" data-childRows="10001">
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10051
          </div>
          <div class="Panel-cell">
            Submitted
          </div>
          <div class="Panel-cell">
            9/17/2071
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $525.00
          </div>
          <div class="Panel-cell u-textRight">
            $540.70
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
      </div>
    </div>
    <div class="Panel-expandableRow">
      <div class="Panel-row Panel-row--withCells Panel-row--parent">
        <div class="Panel-cell">
          <a href="#"
                   class="Panel-expandableControl js-expandableControlDemo"
                   data-control="10002">
                  <span class="Panel-expandableControlIcon">
                    <svg viewBox="0 0 960 960" class="Icon"><path d="M497 854c-6.7 6.7-14.7 10-24 10H225c-14.7 0-24.7-6.3-30-19-2-4-3-8.3-3-13 0-7.3 2.7-14.3 8-21l313-331-313-330c-9.3-11.3-11-23-5-35 6-12.7 16-19 30-19h248c10 0 18 3.7 24 11l326 352c6 6 9 13 9 21s-3 15.3-9 22L497 854z"/></svg>
                  </span>
                  10002
                </a>
        </div>
        <div class="Panel-cell">
          Pending
        </div>
        <div class="Panel-cell">
          7/5/2031
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $900.00
        </div>
        <div class="Panel-cell u-textRight">
          $926.91
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-childRows" data-childRows="10002">
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10041
          </div>
          <div class="Panel-cell">
            Submitted
          </div>
          <div class="Panel-cell">
            12/2/2069
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $900.00
          </div>
          <div class="Panel-cell u-textRight">
            $926.91
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10042
          </div>
          <div class="Panel-cell">
            Pending
          </div>
          <div class="Panel-cell">
            1/7/2088
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $900.00
          </div>
          <div class="Panel-cell u-textRight">
            $926.91
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
      </div>
    </div>
    <div class="Panel-expandableRow">
      <div class="Panel-row Panel-row--withCells Panel-row--parent">
        <div class="Panel-cell">
          <a href="#"
                   class="Panel-expandableControl js-expandableControlDemo"
                   data-control="10003">
                  <span class="Panel-expandableControlIcon">
                    <svg viewBox="0 0 960 960" class="Icon"><path d="M497 854c-6.7 6.7-14.7 10-24 10H225c-14.7 0-24.7-6.3-30-19-2-4-3-8.3-3-13 0-7.3 2.7-14.3 8-21l313-331-313-330c-9.3-11.3-11-23-5-35 6-12.7 16-19 30-19h248c10 0 18 3.7 24 11l326 352c6 6 9 13 9 21s-3 15.3-9 22L497 854z"/></svg>
                  </span>
                  10003
                </a>
        </div>
        <div class="Panel-cell">
          Paid
        </div>
        <div class="Panel-cell">
          4/11/2057
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $490.00
        </div>
        <div class="Panel-cell u-textRight">
          $504.65
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-childRows" data-childRows="10003">
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10031
          </div>
          <div class="Panel-cell">
            Submitted
          </div>
          <div class="Panel-cell">
            5/3/2100
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $490.00
          </div>
          <div class="Panel-cell u-textRight">
            $504.65
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10032
          </div>
          <div class="Panel-cell">
            Pending
          </div>
          <div class="Panel-cell">
            2/9/2068
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $490.00
          </div>
          <div class="Panel-cell u-textRight">
            $504.65
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10033
          </div>
          <div class="Panel-cell">
            Paid
          </div>
          <div class="Panel-cell">
            8/8/2051
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $490.00
          </div>
          <div class="Panel-cell u-textRight">
            $504.65
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
      </div>
    </div>

    <div class="Panel-row Panel-row--withCells ">
      <div class="Panel-cell">
        10005
      </div>
      <div class="Panel-cell">
        Paid
      </div>
      <div class="Panel-cell">
        6/2/2101
      </div>
      <div class="Panel-cell">
        offline
      </div>
      <div class="Panel-cell u-textRight">
        $600.00
      </div>
      <div class="Panel-cell u-textRight">
        $600.00
      </div>
      <div class="Panel-cell u-borderLeft u-textCenter">
        <button class="Button Button--small Button--negative">
          Refund
        </button>
      </div>
    </div>

    <div class="Panel-expandableRow">
      <div class="Panel-row Panel-row--withCells Panel-row--parent">
        <div class="Panel-cell">
          <a href="#"
                   class="Panel-expandableControl js-expandableControlDemo"
                   data-control="10006">
                  <span class="Panel-expandableControlIcon">
                    <svg viewBox="0 0 960 960" class="Icon"><path d="M497 854c-6.7 6.7-14.7 10-24 10H225c-14.7 0-24.7-6.3-30-19-2-4-3-8.3-3-13 0-7.3 2.7-14.3 8-21l313-331-313-330c-9.3-11.3-11-23-5-35 6-12.7 16-19 30-19h248c10 0 18 3.7 24 11l326 352c6 6 9 13 9 21s-3 15.3-9 22L497 854z"/></svg>
                  </span>
                  10006
                </a>
        </div>
        <div class="Panel-cell">
          Refunded
        </div>
        <div class="Panel-cell">
          9/17/2059
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-childRows" data-childRows="10006">
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10021
          </div>
          <div class="Panel-cell">
            Submitted
          </div>
          <div class="Panel-cell">
            9/3/2062
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $800.00
          </div>
          <div class="Panel-cell u-textRight">
            $823.92
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10022
          </div>
          <div class="Panel-cell">
            Pending
          </div>
          <div class="Panel-cell">
            2/18/2058
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $800.00
          </div>
          <div class="Panel-cell u-textRight">
            $823.92
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10023
          </div>
          <div class="Panel-cell">
            Paid
          </div>
          <div class="Panel-cell">
            7/11/2109
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $800.00
          </div>
          <div class="Panel-cell u-textRight">
            $823.92
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
        <div class="Panel-row Panel-row--withCells">
          <div class="Panel-cell">
            10023
          </div>
          <div class="Panel-cell">
            Refunded
          </div>
          <div class="Panel-cell">
            5/15/2091
          </div>
          <div class="Panel-cell">
            online
          </div>
          <div class="Panel-cell u-textRight">
            $-800.00
          </div>
          <div class="Panel-cell u-textRight">
            $-823.92
          </div>
          <div class="Panel-cell u-borderLeft u-textCenter">
            -
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="Panel-footer">
    <button class="Button Button--primary">Add Payment</button>
  </div>
</div>

Scrollable Body

Body of table scrolls with fixed header row.

ID

Status

Date

Type

Total

Payments

Adjustments

Balance

Admin

10001
Submitted
5/4/2115
online
$525.00
$474.70
$243.93
$540.70
10002
Pending
10/1/2084
online
$900.00
$408.61
$371.54
$926.91
10003
Paid
10/22/2030
online
$490.00
$723.71
$464.99
$504.65
10005
Paid
8/12/2037
offline
$600.00
$346.47
$814.74
$600.00
10006
Refunded
7/16/2108
online
$0.00
$680.18
$876.10
$0.00
10001
Submitted
11/22/2035
online
$525.00
$687.40
$501.60
$540.70
10002
Pending
7/26/2089
online
$900.00
$612.78
$412.11
$926.91
10003
Paid
9/6/2026
online
$490.00
$921.83
$719.10
$504.65
10005
Paid
7/5/2068
offline
$600.00
$48.13
$812.28
$600.00
10006
Refunded
8/10/2087
online
$0.00
$431.17
$72.87
$0.00 
<div class="Panel Panel--striped">
  <div class="Panel-body">
    <div class="Panel-row Panel-row--withCells">
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">ID</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block u-colorHighlight"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Status</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Date</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Type</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Total</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Payments</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Adjustments</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyEnd u-spaceNegativeRightSm" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Balance</span>
            <div class="u-colorGrey u-fontSizeXs u-spaceLeftXs">
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M853 495c7.3 6 11 14 11 24v248c0 14-6.3 24-19 30-4 2-8.3 3-13 3-8 0-15.3-2.7-22-8L480 479 149 792c-10 8.7-21.3 10.3-34 5s-19-15.3-19-30V519c0-9.3 3.3-17.3 10-24l352-326c6.7-6 14-9 22-9s15 3 21 9l352 326z"/></svg>
              <svg viewBox="0 0 960 960" role="presentation" class="Icon u-block"><path d="M113.5 464.2c-6.7-6.7-10-14.7-10-24v-248c0-14.7 6.3-24.7 19-30 4-2 8.3-3 13-3 8 0 15 3 21 9l331 313 330-313c10.7-9.3 22.3-11.3 35-6 12.7 6 19 16 19 30v248c0 10-3.7 18-11 24l-352 327c-14 12.7-28.3 12.7-43 0l-352-327z"/></svg>
            </div>
          </a>
        </h4>
      </div>
      <div class="Panel-cell u-borderLeft u-spaceLeftSm">
        <h4 class="Panel-title">
          <a class="u-flex u-flexJustifyCenter" href="sortColumn">
            <span class="u-colorInfo u-textNoWrap">Admin</span>
          </a>
        </h4>
      </div>
    </div>
    <div style="height: 200px; overflow: scroll">
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10001
        </div>
        <div class="Panel-cell">
          Submitted
        </div>
        <div class="Panel-cell">
          9/24/2112
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $525.00
        </div>
        <div class="Panel-cell u-textRight">
          $949.55
        </div>
        <div class="Panel-cell u-textRight">
          $583.47
        </div>
        <div class="Panel-cell u-textRight">
          $540.70
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10002
        </div>
        <div class="Panel-cell">
          Pending
        </div>
        <div class="Panel-cell">
          6/22/2071
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $900.00
        </div>
        <div class="Panel-cell u-textRight">
          $172.07
        </div>
        <div class="Panel-cell u-textRight">
          $716.70
        </div>
        <div class="Panel-cell u-textRight">
          $926.91
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10003
        </div>
        <div class="Panel-cell">
          Paid
        </div>
        <div class="Panel-cell">
          1/3/2060
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $490.00
        </div>
        <div class="Panel-cell u-textRight">
          $631.83
        </div>
        <div class="Panel-cell u-textRight">
          $329.72
        </div>
        <div class="Panel-cell u-textRight">
          $504.65
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10005
        </div>
        <div class="Panel-cell">
          Paid
        </div>
        <div class="Panel-cell">
          7/15/2096
        </div>
        <div class="Panel-cell">
          offline
        </div>
        <div class="Panel-cell u-textRight">
          $600.00
        </div>
        <div class="Panel-cell u-textRight">
          $869.43
        </div>
        <div class="Panel-cell u-textRight">
          $13.35
        </div>
        <div class="Panel-cell u-textRight">
          $600.00
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10006
        </div>
        <div class="Panel-cell">
          Refunded
        </div>
        <div class="Panel-cell">
          10/31/2066
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-textRight">
          $986.96
        </div>
        <div class="Panel-cell u-textRight">
          $639.32
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10001
        </div>
        <div class="Panel-cell">
          Submitted
        </div>
        <div class="Panel-cell">
          8/24/2060
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $525.00
        </div>
        <div class="Panel-cell u-textRight">
          $439.75
        </div>
        <div class="Panel-cell u-textRight">
          $585.63
        </div>
        <div class="Panel-cell u-textRight">
          $540.70
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10002
        </div>
        <div class="Panel-cell">
          Pending
        </div>
        <div class="Panel-cell">
          9/5/2066
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $900.00
        </div>
        <div class="Panel-cell u-textRight">
          $567.00
        </div>
        <div class="Panel-cell u-textRight">
          $852.14
        </div>
        <div class="Panel-cell u-textRight">
          $926.91
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10003
        </div>
        <div class="Panel-cell">
          Paid
        </div>
        <div class="Panel-cell">
          8/16/2081
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $490.00
        </div>
        <div class="Panel-cell u-textRight">
          $403.13
        </div>
        <div class="Panel-cell u-textRight">
          $851.96
        </div>
        <div class="Panel-cell u-textRight">
          $504.65
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10005
        </div>
        <div class="Panel-cell">
          Paid
        </div>
        <div class="Panel-cell">
          10/31/2097
        </div>
        <div class="Panel-cell">
          offline
        </div>
        <div class="Panel-cell u-textRight">
          $600.00
        </div>
        <div class="Panel-cell u-textRight">
          $299.45
        </div>
        <div class="Panel-cell u-textRight">
          $685.08
        </div>
        <div class="Panel-cell u-textRight">
          $600.00
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
      <div class="Panel-row Panel-row--withCells">
        <div class="Panel-cell">
          10006
        </div>
        <div class="Panel-cell">
          Refunded
        </div>
        <div class="Panel-cell">
          10/22/2100
        </div>
        <div class="Panel-cell">
          online
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-textRight">
          $367.67
        </div>
        <div class="Panel-cell u-textRight">
          $702.97
        </div>
        <div class="Panel-cell u-textRight">
          $0.00
        </div>
        <div class="Panel-cell u-borderLeft u-textCenter u-spaceLeftSm">
          <button class="Button Button--small Button--negative">
            Refund
          </button>
        </div>
      </div>
    </div>
  </div>
</div>