@kabbage/sprout 0.17.3

Table Component

A CSS implementation of the Sprout table component.

Related

Sprout table documentation [external]

Example

html 
<h2>Medium Padding</h2>
<div class="spr-table-md">
    <div class="spr-table-row-header">
        <div class="spr-table-cell">Date</div>
        <div class="spr-table-cell">Description</div>
        <div class="spr-table-cell">Category</div>
        <div class="spr-table-cell">Amount</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Pending</div>
        <div class="spr-table-cell">SOUTHWES    5262136459504</div>
        <div class="spr-table-cell">Travel</div>
        <div class="spr-table-cell">$236.00</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Oct 7, 2019</div>
        <div class="spr-table-cell">CVS/PHARMACY</div>
        <div class="spr-table-cell">Office supplies</div>
        <div class="spr-table-cell">$234.58</div>
    </div>
</div>

<h2>Small Padding</h2>
<div class="spr-table-xs">
    <div class="spr-table-row-header">
        <div class="spr-table-cell">Date</div>
        <div class="spr-table-cell">Description</div>
        <div class="spr-table-cell">Category</div>
        <div class="spr-table-cell">Amount</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Pending</div>
        <div class="spr-table-cell">SOUTHWES    5262136459504</div>
        <div class="spr-table-cell">Travel</div>
        <div class="spr-table-cell">$236.00</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Oct 7, 2019</div>
        <div class="spr-table-cell">CVS/PHARMACY</div>
        <div class="spr-table-cell">Office supplies</div>
        <div class="spr-table-cell">$234.58</div>
    </div>
</div>

<h2>Growing columns</h2>
<div class="spr-table-md grow">
    <div class="spr-table-row-header">
        <div class="spr-table-cell">Date</div>
        <div class="spr-table-cell">Description</div>
        <div class="spr-table-cell">Category</div>
        <div class="spr-table-cell">Amount</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Pending</div>
        <div class="spr-table-cell">SOUTHWES    5262136459504</div>
        <div class="spr-table-cell">Travel</div>
        <div class="spr-table-cell">$236.00</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Oct 7, 2019</div>
        <div class="spr-table-cell">CVS/PHARMACY</div>
        <div class="spr-table-cell">Office supplies</div>
        <div class="spr-table-cell">$234.58</div>
    </div>
</div>

<h2>Fixed size columns</h2>
<div class="spr-table-md grow">
    <div class="spr-table-row-header">
        <div class="spr-table-cell" style="width: 200px;">Date</div>
        <div class="spr-table-cell">Description</div>
        <div class="spr-table-cell" style="width: 300px;">Category</div>
        <div class="spr-table-cell" style="width: 200px;">Amount</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Pending</div>
        <div class="spr-table-cell">SOUTHWES    5262136459504</div>
        <div class="spr-table-cell">Travel</div>
        <div class="spr-table-cell">$236.00</div>
    </div>
    <div class="spr-table-row">
        <div class="spr-table-cell">Oct 7, 2019</div>
        <div class="spr-table-cell">CVS/PHARMACY</div>
        <div class="spr-table-cell">Office supplies</div>
        <div class="spr-table-cell">$234.58</div>
    </div>
</div>

Compiled CSS

Example

scss 
@import 'components/table';
css compiled 
@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-table-xs {
  display: table;
  background-color: #fff;
  border-collapse: collapse;
}

.spr-table-xs.grow {
  width: 100%;
}

.spr-table-xs .spr-table-row {
  border-bottom: 1px solid #e4e5e7;
  display: table-row;
}

.spr-table-xs .spr-table-row .spr-table-cell {
  padding: 1rem 0.5rem;
}

.spr-table-xs .spr-table-row-header {
  border-bottom: 1px solid #e4e5e7;
  display: table-row;
  font-weight: bold;
}

.spr-table-xs .spr-table-row-header .spr-table-cell {
  padding: 0.5rem 0.5rem;
}

.spr-table-md {
  display: table;
  background-color: #fff;
  border-collapse: collapse;
}

.spr-table-md.grow {
  width: 100%;
}

.spr-table-md .spr-table-row {
  border-bottom: 1px solid #e4e5e7;
  display: table-row;
}

.spr-table-md .spr-table-row .spr-table-cell {
  padding: 1rem 1rem;
}

.spr-table-md .spr-table-row-header {
  border-bottom: 1px solid #e4e5e7;
  display: table-row;
  font-weight: bold;
}

.spr-table-md .spr-table-row-header .spr-table-cell {
  padding: 0.5rem 1rem;
}

.spr-table-cell {
  overflow: hidden;
  white-space: nowrap;
  display: table-cell;
}