causeway-standard-theme/causeway/docs/components/tables.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="table"></a>
      <header class="content-header">
        <h1 class="title">
          Tables
        </h1>
      </header>
      <p>Tables should be wrapped in a
        <code>&lt;div class=&quot;table-wrapper&quot;&gt; &lt;!--table goes in here --&gt; &lt;/div&gt;</code> with a class
        <code>.table-wrapper</code></p>

      <p>
        <code>&lt;div class=&quot;table-wrapper&quot;&gt;&lt;/div&gt;</code> should basically contain tree first level container divs.
      </p>
      <ul>
        <li>
          <code>&lt;div class=&quot;table-toolbar&quot;&gt;&lt;/div&gt;</code> -- Its optional. Should be used to hold table related action buttons as in below example.
        </li>
        <li>
          <code>&lt;div class=&quot;table-content&quot;&gt;&lt;/div&gt;</code> -- This should hold the table.
          <code>&lt;tfoot&gt;&lt;/tfoot&gt;</code> should not be the part of table.
        </li>
        <li>
          <code>&lt;div class=&quot;table-footer&quot;&gt;&lt;/div&gt;</code> -- This should hold table footer content which normally exists in
          <code>&lt;tfoot&gt;&lt;/tfoot&gt;</code>
        </li>
      </ul>
      <p>Tables must be created with the classes <code>"table"</code> and <code>"table-striped"</code> and contain
        <code>&lt;thead&gt;</code>,
        <code>&lt;tbody&gt;</code> tags only, preferably in that order and should be wrapped in
        <code>&lt;div class=&quot;table-content&quot;&gt;&lt;/div&gt;</code>.</p>

      <p><code>&lt;tfoot&gt;</code> contents should go in
        <code>&lt;div class=&quot;table-footer&quot;&gt;&lt;/div&gt;</code> and be placed immediately after
        <code>&lt;div class=&quot;table-content&quot;&gt;&lt;/div&gt;</code>.</p>

      <p>To control the width of individual column use <code>&lt;col&gt;</code> tag nested inside
        <code>&lt;colgroup&gt;&lt;/colgroup&gt;</code>. Refer the code below.
        <code>&lt;col&gt;</code> accepts <code>"width"</code> attribute and the value can specified in
        <code>"%", "px" or "relative units"</code>
      </p>

      <p> For table group heading add <code>&lt;tr&gt;&lt;/tr&gt;</code> as first element of
        <code>&lt;thead&gt;</code> and add class <code>"has-table-group"</code> to <code>&lt;thead&gt;</code></p>

      <div class="table-wrapper edge-2-edge">
        <div class="table-toolbar">
          <button type="button" class="btn btn-filter">
            Filter
          </button>
          <div class="toolbar-filter">
            <form action="" class="form-inline">
              <div class="form-row">
                <div class="form-group">
                  <label for="listField0value" class="control-label  has-tooltip" data-toggle="tooltip" data-title="Search for a specific document number" data-original-title="" title="">Document Number:</label>

                  <div class="control-input">
                    <input type="text" id="listField0value" class="form-control" name="listField[0].value" value="" maxlength="40" size="40">
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label  has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title="">Archived:</label>

                  <div class="control-input">
                    <div class="form-group radio form-group-inline">
                      <input type="radio" id="listField1value_0" class="form-control" name="listField[1].value" value="" checked>
                      <label for="listField1value_0" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>All</label>
                    </div>
                    <div class="form-group radio form-group-inline">
                      <input type="radio" id="listField1value_1" class="form-control" name="listField[1].value" value="Y">
                      <label for="listField1value_1" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>Archived</label>
                    </div>
                    <div class="form-group radio form-group-inline">
                      <input type="radio" id="listField1value_2" class="form-control" name="listField[1].value" value="N">
                      <label for="listField1value_2" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>Not Archived</label>
                    </div>
                  </div>
                </div>
                <div class="form-group pull-right">
                  <button type="button" class="btn btn-default btn-with-icon has-tooltip" title="" data-original-title="Search this list by typing text to compare against in the fields below then click search">Search
                    <span class="glyphicon glyphicon-search"></span></button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="table-content">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>
                  Column 1, width = 20%
                </th>
                <th>
                  Column 2, width = 30%
                </th>
                <th>
                  Column 3, width = 50%
                </th>
              </tr>
              <tr class="filter">
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col11_filter" name="col1_filter" placeholder="Enter Value">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col12_filter" name="col2_filter" placeholder="Enter Value">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col13_filter" placeholder="Enter Value" name="col3_filter">
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  Cell 4
                </td>
                <td>
                  Cell 5
                </td>
                <td>
                  Cell 6
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              <tr>
                <td>
                  Cell 77
                </td>
                <td>
                  Cell 88
                </td>
                <td>
                  Cell 99
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
          <!--Table Footer contents of <tfoot> should be place here-->
        </div>
      </div>
      <pre><code>
      &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;div class=&quot;table-toolbar&quot;&gt;
          &lt;!-- Table action button or filters --&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-filter&quot;&gt;
            Filter
          &lt;/button&gt;
          &lt;div class=&quot;toolbar-filter&quot;&gt;
            &lt;!--Toolbar related any content goes in here. This content toggles on above filter button--&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;table-content&quot;&gt;
          &lt;table class=&quot;table table-striped&quot;&gt;
            &lt;colgroup&gt;
              &lt;col width=&quot;20%&quot;&gt;
              &lt;col width=&quot;30%&quot;&gt;
              &lt;col width=&quot;50%&quot;&gt;
            &lt;/colgroup&gt;
            &lt;thead class=&quot;has-table-group&quot;&gt;
            &lt;tr&gt;
              &lt;th colspan=&quot;2&quot;&gt;&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;
                Column 1, width = 20%
              &lt;/th&gt;
              &lt;th&gt;
                Column 2, width = 30%
              &lt;/th&gt;
              &lt;th&gt;
                Column 3, width = 50%
              &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr class=&quot;filter&quot;&gt;
              &lt;th&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col1_filter&quot; name=&quot;col1_filter&quot;&gt;
                &lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col2_filter&quot; name=&quot;col2_filter&quot; value=&quot; &quot;&gt;
                &lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col3_filter&quot; name=&quot;col3_filter&quot;&gt;
                &lt;/div&gt;
              &lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;
                Cell 1
              &lt;/td&gt;
              &lt;td&gt;
                Cell 2
              &lt;/td&gt;
              &lt;td&gt;
                Cell 3
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;
                Cell 4
              &lt;/td&gt;
              &lt;td&gt;
                Cell 5
              &lt;/td&gt;
              &lt;td&gt;
                Cell 6
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;
                Cell 7
              &lt;/td&gt;
              &lt;td&gt;
                Cell 8
              &lt;/td&gt;
              &lt;td&gt;
                Cell 9
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;div class=&quot;table-footer&quot;&gt;
          &lt;!--Table Footer contents of &lt;tfoot&gt; should be place here--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      </code></pre>
      <p>Tables that can have their rows re-ordered by a user (as by using the
        <a href="http://jqueryui.com/sortable/">jQuery UI sortable component</a>) must have an empty cell at the start of every row (<code>&lt;th&gt;</code> in the
        <code>&lt;thead&gt;</code> section and <code>&lt;td&gt;</code> in the <code>&lt;tfoot&gt;</code> and
        <code>&lt;tbody&gt;</code> sections).</p>

      <div class="table-wrapper">
        <div class="table-content">
          <table class="table table-striped table-handles">
            <thead>
            <tr>
              <th class="handle"></th>
              <th>
                Column 1
              </th>
              <th>
                Column 2
              </th>
              <th>
                Column 3
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="handle">
                <a href="#" title="" class="table-notification"></a>
              </td>
              <td>
                Cell 1
              </td>
              <td>
                Cell 2
              </td>
              <td>
                Cell 3
              </td>
            </tr>
            <tr>
              <td class="handle">
                <a href="#" title="" class="table-notification-alert"></a>
              </td>
              <td>
                Cell 4
              </td>
              <td>
                Cell 5
              </td>
              <td>
                Cell 6
              </td>
            </tr>
            <tr>
              <td class="handle"></td>
              <td>
                Cell 7
              </td>
              <td>
                Cell 8
              </td>
              <td>
                Cell 9
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
          <div class="col-md-9"></div>
          <div class="col-md-3"></div>
        </div>
      </div>
      <pre>
        <code>
        &lt;div class=&quot;table-wrapper&quot;&gt;
          &lt;div class=&quot;table-content&quot;&gt;
            &lt;table class=&quot;table table-striped table-handles&quot;&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                &lt;th class=&quot;handle&quot;&gt;&lt;/th&gt;
                &lt;th&gt;
                  Column 1
                &lt;/th&gt;
                &lt;th&gt;
                  Column 2
                &lt;/th&gt;
                &lt;th&gt;
                  Column 3
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td class=&quot;handle&quot;&gt;&lt;/td&gt;
                &lt;td&gt;
                  Cell 1
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 2
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 3
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class=&quot;handle&quot;&gt;&lt;/td&gt;
                &lt;td&gt;
                  Cell 4
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 5
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 6
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class=&quot;handle&quot;&gt;&lt;/td&gt;
                &lt;td&gt;
                  Cell 7
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 8
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 9
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class=&quot;table-footer&quot;&gt;
            &lt;div class=&quot;col-md-9&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;col-md-3&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        </code>
      </pre>
      <p>Tables that can have columns sorted by a user must use the appropriate sorting handles in each of the column headings that can be sorted (the
        <code>&lt;th&gt;</code> elements in the <code>&lt;thead&gt;</code> element). Each
        <code>&lt;th&gt;</code> element must have a class of
        <code>"sorting"</code> and an optional class based on the sorting capability and currently active sort as detailed below.
      </p>

      <div class="table-wrapper">
        <div class="table-content">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>
                Column
              </th>
              <th>
                Class
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                Can be sorted but is not the currently active sorted column.
              </td>
              <td>
                No class required
              </td>
            </tr>
            <tr>
              <td>
                Is currently sorted ascending.
              </td>
              <td>
                sorting-asc
              </td>
            </tr>
            <tr>
              <td>
                Is currently sorted descending.
              </td>
              <td>
                sorting-desc
              </td>
            </tr>
            <tr>
              <td>
                Can be sorted but sorting is currently disabled
              </td>
              <td>
                sorting-disabled
              </td>
            </tr>
            <tr>
              <td>
                Can only be sorted ascending but is not the currently active sorted column.
              </td>
              <td>
                sorting-desc-disabled
              </td>
            </tr>
            <tr>
              <td>
                Can only be sorted ascending and is the currently active sorted column.
              </td>
              <td>
                sorting-desc-disabled-asc
              </td>
            </tr>
            <tr>
              <td>
                Can only be sorted descending but is not the currently active sorted column.
              </td>
              <td>
                sorting-asc-disabled
              </td>
            </tr>
            <tr>
              <td>
                Can only be sorted descending and is the currently active sorted column.
              </td>
              <td>
                sorting-asc-disabled-desc
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
          <div class="pull-left pagination-page-view">
            <div class="form-group">
              <label for="pageNumber" class="control-label ">Go to page:</label>

              <div class="control-input">
                <input type="text" id="pageNumber" class="form-control" name="pageNumber" value="" size="1">
              </div>
            </div>
          </div>
          <div class="pull-left pagination-page-view">
            <label class="control-label ">Viewing page 1 of 133:</label>
          </div>
          <ul class="pagination pull-right">
            <li><span class="glyphicon glyphicon-pagination-first"></span></li>
            <li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></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="#" class="glyphicon glyphicon-pagination-next"></a></li>
            <li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
          </ul>
        </div>
      </div>
      <br/>

      <p>
        Table with horizontal scrolling.
      </p>

      <div class="table-wrapper fixed-header1">
        <div class="table-content">
          <table id="my_table" class="table table-striped table-sort fixed-header">
            <thead>
            <tr>
              <th>
                <span>LongLongLongHeaderWord</span>
                <a class="sorting" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Very Very Long Header Text</span>
                <a class="sorting sorting-desc" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 3</span>
                <a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 4</span>
                <a class="sorting sorting-asc" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 5</span>
                <a class="sorting sorting-asc-disabled" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 6</span>
                <a class="sorting sorting-disabled" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 7</span>
              </th>
              <th><span>Column 08</span></th>
              <th><span>Column 09</span></th>
              <th><span>Column 10</span></th>
              <th><span>Column 11</span></th>
              <th><span>Column 12</span></th>
              <th><span>Column 13</span></th>
              <th><span>Column 14</span></th>
              <th><span>Column 15</span></th>
              <th><span>Column 16</span></th>
              <th><span>Column 17</span></th>
              <th><span>Column 18</span></th>
              <th><span>Column 19</span></th>
              <th><span>Column 20</span></th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                Cell 1
              </td>
              <td>
                Cell 2
              </td>
              <td>
                Cell 3
              </td>
              <td>
                Cell 4
              </td>
              <td>
                Cell 5
              </td>
              <td>
                Cell 6
              </td>
              <td colspan="14">
                Cell 7
              </td>
            </tr>
            <tr>
              <td>
                Cell 8
              </td>
              <td>
                Cell 9
              </td>
              <td>
                Cell 10
              </td>
              <td>
                Cell 11
              </td>
              <td>
                Cell 12
              </td>
              <td>
                Cell 13
              </td>
              <td colspan="14">
                Cell 14
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
              <td>
                Cell 20
              </td>
              <td colspan="14">
                Cell 21
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="table-footer">
        </div>
      </div>
      <br>
      <br>
      <div class="table-wrapper">
        <div class="table-toolbar">
          <button type="button" class="btn btn-filter">
            Filter
          </button>
        </div>
        <div class="table-content">
          <table id="my_table2" class="table table-filter table-sort">
            <thead>
            <tr>
              <th>
                <span>LongLongLongHeaderWord</span>
                <a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Very Very Long Header Text</span>
                <a class="sorting" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 3</span>
                <a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 4</span>
                <a class="sorting sorting-asc" href="javascript:void(0)"></a>
              </th>
              <th>
                <span>Column 5</span>
                <a class="sorting sorting-asc-disabled" href="javascript:void(0)"></a>
              </th>
            </tr>
            <tr class="filter">
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col11" name="col1_filter" value="Hello">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col12" name="col2_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col13" name="col3_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col14" name="col4_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col15" name="col5_filter">
                </div>
              </th>
            </tr>

            </thead>

            <tbody>
            <tr>
              <td>
                Cell 1
              </td>
              <td>
                Cell 2
              </td>
              <td>
                Cell 3
              </td>
              <td>
                Cell 4
              </td>
              <td>
                Cell 5
              </td>

            </tr>
            <tr>
              <td>
                Cell 15
              </td>
              <td>
                Cell 16
              </td>
              <td>
                Cell 17
              </td>
              <td>
                Cell 18
              </td>
              <td>
                Cell 19
              </td>
            </tr>
            </tbody>
          </table>

        </div>
        <div class="table-footer"></div>
      </div>
      <pre>
        <code>
        &lt;div class=&quot;table-wrapper&quot;&gt;
          &lt;div class=&quot;table-content&quot;&gt;
            &lt;table class=&quot;table table-striped&quot;&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;
                  Column
                &lt;/th&gt;
                &lt;th&gt;
                  Class
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;

              &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can be sorted but is not the currently active sorted column.
                &lt;/td&gt;
                &lt;td&gt;
                  No class required
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Is currently sorted ascending.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-asc
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Is currently sorted descending.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-desc
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can be sorted but sorting is currently disabled
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-disabled
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can only be sorted ascending but is not the currently active sorted column.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-desc-disabled
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can only be sorted ascending and is the currently active sorted column.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-desc-disabled-asc
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can only be sorted descending but is not the currently active sorted column.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-asc-disabled
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Can only be sorted descending and is the currently active sorted column.
                &lt;/td&gt;
                &lt;td&gt;
                  sorting-asc-disabled-desc
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class=&quot;table-footer&quot;&gt;
            &lt;ul class=&quot;pagination pull-right&quot;&gt;
              &lt;li&gt;&lt;span class=&quot;glyphicon glyphicon-pagination-first&quot;&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;disabled&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-pagination-prev&quot;&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-next&quot;&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;glyphicon glyphicon-pagination-last&quot;&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        </code>
      </pre>
      <ul>
        <li>
          Points:
          <ul>
            <li>Filter row</li>
          </ul>
        </li>
      </ul>
      <p>Tables that can have columns filtered by a user must add a second row to the
        <code>&lt;thead&gt;</code> element with a class of <code>"filter"</code> that contains
        <code>&lt;th&gt;</code> elements containing the appropriate
        <code>&lt;a href=&quot;/docs/components/forms.html#forms&quot;&gt;form elements&lt;/a&gt;</code> without their accompanying labels.
      </p>

      <form role="form">
        <div class="table-wrapper">
          <div class="table-toolbar">
            <button type="button" class="btn btn-filter">
              Filter
            </button>
          </div>
          <div class="form-row table-content">
            <table class="table table-striped">
              <thead>
              <tr>
                <th>
                  <div class="form-group">
                    <div class="checkbox">
                      <input type="checkbox" class="form-control filter" value="true">
                      <label><span class="checkbox-icon"></span></label>
                    </div>
                  </div>
                </th>
                <th>
                  Column 2
                </th>
                <th>
                  Column 3
                </th>
              </tr>
              <tr class="filter">
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col1_filter" name="col1_filter" value="Hello World">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col2_filter" name="col2_filter">
                  </div>
                </th>
                <th>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col3_filter" name="col3_filter">
                  </div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  Cell 1
                </td>
                <td>
                  Cell 2
                </td>
                <td>
                  Cell 3
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col4_filter" name="col1_filter">
                  </div>
                </td>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col5_filter" name="col1_filter">
                  </div>
                </td>
                <td>
                  <div class="form-group">
                    <input class="form-control" type="text" id="col6_filter" name="col1_filter">
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  Cell 7
                </td>
                <td>
                  Cell 8
                </td>
                <td>
                  Cell 9
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="table-footer">
          </div>
        </div>
      </form>

      <pre>
        <code>
        &lt;div class=&quot;table-wrapper&quot;&gt;
          &lt;div class=&quot;table-toolbar&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-filter&quot;&gt;
              Filter
            &lt;/button&gt;
          &lt;/div&gt;

          &lt;div class=&quot;form-row table-content&quot;&gt;
            &lt;table class=&quot;table table-striped&quot;&gt;
              &lt;thead&gt;
              &lt;tr class=&quot;filter&quot;&gt;
                &lt;th&gt;
                  &lt;div class=&quot;form-group checkbox no-label&quot;&gt;
                    &lt;input type=&quot;checkbox&quot; class=&quot;form-control filter&quot; value=&quot;true&quot;&gt;
                    &lt;label&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  Column 2
                &lt;/th&gt;
                &lt;th&gt;
                  Column 3
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr class=&quot;filter&quot;&gt;
                &lt;th&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col1_filter&quot; name=&quot;col1_filter&quot; value=&quot;Hello World&quot;&gt;
                  &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col2_filter&quot; name=&quot;col2_filter&quot;&gt;
                  &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col3_filter&quot; name=&quot;col3_filter&quot;&gt;
                  &lt;/div&gt;
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Cell 1
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 2
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 3
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col4_filter&quot; name=&quot;col1_filter&quot;&gt;
                  &lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col5_filter&quot; name=&quot;col1_filter&quot;&gt;
                  &lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;col6_filter&quot; name=&quot;col1_filter&quot;&gt;
                  &lt;/div&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  Cell 7
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 8
                &lt;/td&gt;
                &lt;td&gt;
                  Cell 9
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class=&quot;table-footer&quot;&gt;

          &lt;/div&gt;
        &lt;/div&gt;
        </code>
      </pre>
      <header>
        <h1 class="title">
          Table with Filter Columns
        </h1>
      </header>
      <div class="table-wrapper fixed-header2">
        <div class="table-toolbar">
          <button type="button" class="btn btn-filter">
            Filter
          </button>
        </div>
        <div class="table-content">
          <table class="table table-striped table-filter fixed-header">
            <thead>
            <tr>
              <th>Name</th>
              <th>User Name</th>
              <th>Email</th>
            </tr>
            <tr class="filter">
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col1" name="col1_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col2" name="col2_filter">
                </div>
              </th>
              <th>
                <div class="form-group">
                  <input class="form-control" type="text" id="col3" name="col3_filter">
                </div>
              </th>
            </tr>