components

Table

Use the Table component to arrange information into rows and columns.

  • Table With Title, Subtitle and Download button

    Showing 1 - 20 of 99 projects matching the search criteria

    Project Title Project ID Commitment Amount * Status Approval Date
    TOGO Economic Governance P158078 15.0 Active October 3, 2017
    Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3) P158078 0.23 Active October 23, 2017
    Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3) P158078 54 Active October 13, 2017
    Lesotho Smallholder Agriculture Development Project Additional Financing P158078 150 Active October 13, 2017

    Table style various options for customizing in table header background color add .lp__table_inverse class with .lp__table .

    Showing 1 - 20 of 99 projects matching the search criteria

    Project Title Project ID Commitment Amount * Status Approval Date
    TOGO Economic Governance P158078 15.0 Active October 3, 2017
    Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3) P158078 0.23 Active October 23, 2017
    Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3) P158078 54 Active October 13, 2017
    Lesotho Smallholder Agriculture Development Project Additional Financing P158078 150 Active October 13, 2017 
    
<div class="lp__noshorting_table">
<div class="lp__table_heading"> 
    <h6>Table With Title, Subtitle and Download button</h6>
    <p class="lp__blurb_text">Showing 1 - 20 of 99 projects matching the search criteria</p>     
    <div class="download_group_btn">
        <a href="#" class="download_btn" data-type="pdf" title="Download pdf"><span><i class="loop loop-file-pdf" aria-hidden="true"></i></span></a>
        <a href="#" class="download_btn" data-type="word" title="Download Word"><span><i class="loop loop-file-word" aria-hidden="true"></i></span></a>
        <a href="#" class="download_btn" data-type="excel" title="Download excel"><span><i class="loop loop-file-excel" aria-hidden="true"></i></span></a>
        <a href="#" class="download_btn" data-type="print" title="Download Print"><span><i class="loop loop-print" aria-hidden="true"></i></span></a>
    </div>     
</div>
<div class="lp__table responsive-table">
<div class="paragraph table-sort sorter">
<table class="responsive" id="sortTable">
    <thead>
        <tr>
        <th colspan="undefined" class="header">Project Title</th>
        <th colspan="undefined" class="header">Project ID</th>
        <th colspan="undefined" class="header">Commitment Amount *</th>
        <th colspan="undefined" class="header">Status</th>
        <th colspan="undefined" class="header">Approval Date</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><a href="#">TOGO Economic Governance</a></td>
        <td>P158078</td>
        <td>15.0</td>
        <td>Active</td>
        <td>October 3, 2017</td>
    </tr>
    <tr>
        <td><a href="#">Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3)</a></td>
        <td>P158078</td>
        <td>0.23</td>
        <td>Active</td>
        <td>October 23, 2017</td>
    </tr>
    <tr>
        <td><a href="#">Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3)</a></td>
        <td>P158078</td>
        <td>54</td>
        <td>Active</td>
        <td>October 13, 2017</td>
    </tr>
    <tr>
        <td><a href="#">Lesotho Smallholder Agriculture Development Project Additional Financing</a></td>
        <td>P158078</td>
        <td>150</td>
        <td>Active</td>
        <td>October 13, 2017</td>
    </tr>
    </tbody>
</table>
</div>
</div>
</div>

<p class="lp__lead_paragraph_sm">Table style various options for customizing in table header background color add <span class="bg-gray-95">.lp__table_inverse</span> class with <span class="bg-gray-95">.lp__table</span> .</p>
<hr>

<div class="lp__noshorting_table">
<div class="lp__table_heading"> 
  <h6></h6>
  <p class="lp__blurb_text">Showing 1 - 20 of 99 projects matching the search criteria</p>     
  <div class="download_group_btn">
      <a href="#" class="download_btn" data-type="pdf" title="Download pdf"><span><i class="loop loop-file-pdf" aria-hidden="true"></i></span></a>
      <a href="#" class="download_btn" data-type="word" title="Download Word"><span><i class="loop loop-file-word" aria-hidden="true"></i></span></a>
      <a href="#" class="download_btn" data-type="excel" title="Download excel"><span><i class="loop loop-file-excel" aria-hidden="true"></i></span></a>
      <a href="#" class="download_btn" data-type="print" title="Download Print"><span><i class="loop loop-print" aria-hidden="true"></i></span></a>
  </div>     
</div>
<div class="lp__table lp__table_inverse responsive-table">
<div class="paragraph table-sort sorter">
<table class="responsive" id="sortTable">
  <thead>
    <tr>
    <th colspan="undefined" class="header">Project Title</th>
    <th colspan="undefined" class="header">Project ID</th>
    <th colspan="undefined" class="header">Commitment Amount *</th>
    <th colspan="undefined" class="header">Status</th>
    <th colspan="undefined" class="header">Approval Date</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><a href="#">TOGO Economic Governance</a></td>
    <td>P158078</td>
    <td>15.0</td>
    <td>Active</td>
    <td>October 3, 2017</td>
  </tr>
  <tr>
    <td><a href="#">Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3)</a></td>
    <td>P158078</td>
    <td>0.23</td>
    <td>Active</td>
    <td>October 23, 2017</td>
  </tr>
  <tr>
    <td><a href="#">Third South West Indian Ocean Fisheries Governance and Shared Growth Project (SWIOFish3)</a></td>
    <td>P158078</td>
    <td>54</td>
    <td>Active</td>
    <td>October 13, 2017</td>
  </tr>
  <tr>
    <td><a href="#">Lesotho Smallholder Agriculture Development Project Additional Financing</a></td>
    <td>P158078</td>
    <td>150</td>
    <td>Active</td>
    <td>October 13, 2017</td>
  </tr>
  </tbody>
</table>
</div>
</div>
</div>
  • DESIGNER
  • EXAMPLE