@kabbage/sprout 0.25.2

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 grow">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';