Table

REQUIRES JAVASCRIPT IF USING ROWSPANS
This element requires both jQuery and corelogic-ui.min.js to function properly.

If using rowspans, you will need to initialize the table using tableInit().

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/table.css file second from your npm repository. If you are using rowspans, load table.jsand call tableInit().

To make rows linkable, add a class link to the tr element of the row. Then you must bind the click event to the tr` using javascript.

Base Table

Admin Name Date Description Result Actions
Jon Snow 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Edit Something Delete Something
Arya Stark 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Edit Something Delete Something
Gregor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Edit Something Delete Something
Melisandre 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Edit Something Delete Something
Sandor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Edit Something Delete Something
<table class="table">
  <thead>
    <tr>
      <th>Admin Name</th>
      <th>Date</th>
      <th>Description</th>
      <th>Result</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody>
      <tr class="link" id="link1">
        <td>Daenerys Targaryen</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash" aria-hidden="true" title="Delete"><span class="sr-only">Delete Something</span></i></a>
        </td>
      </tr>
      <tr>
        <td>Jon Snow</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash" aria-hidden="true" title="Delete"></i><span class="sr-only">Delete Something</span></a>
        </td>
      </tr>
      <tr>
        <td>Arya Stark</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash" aria-hidden="true" title="Delete"></i><span class="sr-only">Delete Something</span></a>
        </td>
      </tr>
      <tr>
        <td>Gregor Clegane</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash" aria-hidden="true" title="Delete"></i><span class="sr-only">Delete Something</span></a>
        </td>
      </tr>
      <tr>
        <td>Melisandre</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash" aria-hidden="true" title="Delete"></i><span class="sr-only">Delete Something</span></a>
        </td>
      </tr>
      <tr>
        <td>Sandor Clegane</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>
          <a href="#" onclick="pencilClicked(event)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i><span class="sr-only">Edit Something</span></a>
          <a href="#" onclick="trashClicked(event)"><i class="padding-left-15 fa fa-trash"></i><span class="sr-only">Delete Something</span></a>
        </td>
      </tr>
    </tbody>
</table>
<script>
    function pencilClicked(e) {
      alert('Pencil was clicked.');
      e.stopPropagation();
    }

    function trashClicked(e) {
      alert('Trash was clicked.');
      e.stopPropagation();
    }

    $('#link1').on('click', function(e) {
        alert('Daenerys Targaryen row was clicked!');
    });
</script>

Table with small rows

Use the row-small class on table or tr tags. Rows are only 45px high instead of the default 60px. If applied to the table tag, all rows will be small.

Admin Name Date Description Result
Jon Snow 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Arya Stark 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<table class="table">
  <thead>
    <tr>
      <th>Admin Name</th>
      <th>Date</th>
      <th>Description</th>
      <th>Result</th>
    </tr>
    </thead>
    <tbody>
      <tr class="link row-small">
        <td>Daenerys Targaryen</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr class="row-small">
        <td>Jon Snow</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr class="row-small">
        <td>Arya Stark</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
    </tbody>
</table>

Table Pagination

The pagination component expects a "Previous", "Next" to be included.

Admin Name Date Description Result
Jon Snow 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Arya Stark 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Gregor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Melisandre 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Sandor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<table class="table">
  <thead>
    <tr>
      <th>Admin Name</th>
      <th>Date</th>
      <th>Description</th>
      <th>Result</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">Previous</span>
            </a>
          </li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><span>...</span></li>
          <li><a href="#">10</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">Next</span>
            </a>
          </li>
        </ul>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr class="link" id="link2">
      <td>Daenerys Targaryen</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Jon Snow</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Arya Stark</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Gregor Clegane</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Melisandre</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Sandor Clegane</td>
      <td>01/01/2016</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
  </tbody>
</table>
<script>
    $('#link2').on('click', function() {
        alert('Daenerys Targaryen row was clicked!');
    });
</script>

Table with Accordion

# APN Owner Name Address City
1 4378-027-088 Agentonio Alicia 903 West Barry Ave Chicago
$320,000
March 10, 2015
$288,000
2 4378-064-904 Brokart Paul 903 West Barry Ave Chicago
$320,000
March 10, 2015
$288,000
3 4378-027-088 Trense Larry 903 West Barry Ave Chicago
$320,000
March 10, 2015
$288,000
<table class="table table-accordion">
  <thead>
    <tr>
      <td></td>
      <th>#</th>
      <th>APN</th>
      <th>Owner Name</th>
      <th>Address</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a role="button" data-toggle="collapse" href="#tableCollapseOne">
        <div class="icon">
          <i class="fa fa-chevron-down"></i>
        </div>
      </a></td>
      <td>1</td>
      <td>4378-027-088</td>
      <td>Agentonio Alicia</td>
      <td>903 West Barry Ave</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td colspan="6" class="hidden-content open">
          <div id="tableCollapseOne" class="collapse in panel panel-default">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Estimated Value</label>
                    <div class="value">$320,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Date</label>
                    <div class="value">March 10, 2015</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Price</label>
                    <div class="value">$288,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Owner(s)</label>
                    <div class="value"><a href="#">Mike Dawson, Kathy</a></div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td><a class="collapsed" role="button" data-toggle="collapse" href="#tableCollapseTwo">
        <div class="icon">
          <i class="fa fa-chevron-down"></i>
        </div>
      </a></td>
      <td>2</td>
      <td>4378-064-904</td>
      <td>Brokart Paul</td>
      <td>903 West Barry Ave</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td colspan="6" class="hidden-content">
          <div id="tableCollapseTwo" class="collapse panel panel-default">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Estimated Value</label>
                    <div class="value">$320,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Date</label>
                    <div class="value">March 10, 2015</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Price</label>
                    <div class="value">$288,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Owner(s)</label>
                    <div class="value"><a href="#">Mike Dawson, Kathy</a></div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td><a class="collapsed" role="button" data-toggle="collapse" href="#tableCollapseThree">
        <div class="icon">
          <i class="fa fa-chevron-down"></i>
        </div>
      </a></td>
      <td>3</td>
      <td>4378-027-088</td>
      <td>Trense Larry</td>
      <td>903 West Barry Ave</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td colspan="6" class="hidden-content">
          <div id="tableCollapseThree" class="collapse panel panel-default">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Estimated Value</label>
                    <div class="value">$320,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Date</label>
                    <div class="value">March 10, 2015</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="field">
                    <label>Last Sale Price</label>
                    <div class="value">$288,000</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="field">
                    <label>Owner(s)</label>
                    <div class="value"><a href="#">Mike Dawson, Kathy</a></div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Table with secondary heading

Admin Name Date Description Result
ab cd ef gh
Daenerys Targaryen 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Jon Snow 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Arya Stark 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Gregor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Melisandre 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Sandor Clegane 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<table class="table">
  <thead>
    <tr>
      <th>Admin Name</th>
      <th>Date</th>
      <th>Description</th>
      <th>Result</th>
    </tr>
    </thead>
    <tbody>
      <tr class="secondary-heading">
        <td>ab</td>
        <td>cd</td>
        <td>ef</td>
        <td>gh</td>
      <tr>
      <tr>
        <td>Daenerys Targaryen</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Jon Snow</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Arya Stark</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Gregor Clegane</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Melisandre</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Sandor Clegane</td>
        <td>01/01/2016</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
    </tbody>
</table>