kibana-123/ui_framework/doc_site/src/views/table/controlled_table.html

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

<div class="kuiControlledTable">
  <!-- ToolBar -->
  <div class="kuiToolBar">
    <div class="kuiToolBarSearch">
      <div class="kuiToolBarSearchBox">
        <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
        <input
          class="kuiToolBarSearchBox__input"
          type="text"
          placeholder="Search..."
        >
      </div>
    </div>

    <div class="kuiToolBarSection">
      <button class="kuiButton kuiButton--primary">
        Add
      </button>

      <button class="kuiButton kuiButton--basic kuiButton--icon">
        <span class="kuiButton__icon kuiIcon fa-gear"></span>
      </button>

      <button class="kuiButton kuiButton--basic kuiButton--icon">
        <span class="kuiButton__icon kuiIcon fa-bars"></span>
      </button>
    </div>

    <div class="kuiToolBarSection">
      <div class="kuiToolBarText">
        1 &ndash; 20 of 33
      </div>

      <div class="kuiButtonGroup kuiButtonGroup--united">
        <button class="kuiButton kuiButton--basic kuiButton--icon">
          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
        </button>
        <button class="kuiButton kuiButton--basic kuiButton--icon">
          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
        </button>
      </div>
    </div>
  </div>

  <!-- Table -->
  <table class="kuiTable">
    <thead>
      <tr>
        <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
          <input type="checkbox" class="kuiCheckBox">
        </th>
        <th class="kuiTableHeaderCell">
          Title
        </th>
        <th class="kuiTableHeaderCell">
          Status
        </th>
        <th class="kuiTableHeaderCell">
          Date created
        </th>
        <th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
          Orders of magnitude
        </th>
      </tr>
    </thead>

    <tbody>
      <tr class="kuiTableRow">
        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
          <input type="checkbox" class="kuiCheckBox">
        </td>
        <td class="kuiTableRowCell">
          <a class="kuiLink" href="#">Alligator</a>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiIcon kuiIcon--success fa-check"></div>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiTableRowCell__liner">
            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
          </div>
        </td>
        <td class="kuiTableRowCell kuiTableRowCell--alignRight">
          <div class="kuiTableRowCell__liner">
            1
          </div>
        </td>
      </tr>

      <tr class="kuiTableRow">
        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
          <input type="checkbox" class="kuiCheckBox">
        </td>
        <td class="kuiTableRowCell">
          <a class="kuiLink" href="#">Boomerang</a>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiIcon kuiIcon--success fa-check"></div>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiTableRowCell__liner">
            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
          </div>
        </td>
        <td class="kuiTableRowCell kuiTableRowCell--alignRight">
          <div class="kuiTableRowCell__liner">
            10
          </div>
        </td>
      </tr>

      <tr class="kuiTableRow">
        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
          <input type="checkbox" class="kuiCheckBox">
        </td>
        <td class="kuiTableRowCell">
          <a class="kuiLink" href="#">Celebration</a>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiTableRowCell__liner">
            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
          </div>
        </td>
        <td class="kuiTableRowCell kuiTableRowCell--alignRight">
          <div class="kuiTableRowCell__liner">
            100
          </div>
        </td>
      </tr>

      <tr class="kuiTableRow">
        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
          <input type="checkbox" class="kuiCheckBox">
        </td>
        <td class="kuiTableRowCell">
          <a class="kuiLink" href="#">Dog</a>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiIcon kuiIcon--error fa-warning"></div>
        </td>
        <td class="kuiTableRowCell">
          <div class="kuiTableRowCell__liner">
            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
          </div>
        </td>
        <td class="kuiTableRowCell kuiTableRowCell--alignRight">
          <div class="kuiTableRowCell__liner">
            1000
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- ToolBarFooter -->
  <div class="kuiToolBarFooter">
    <div class="kuiToolBarFooterSection">
      <div class="kuiToolBarText">
        5 Items selected
      </div>
    </div>

    <div class="kuiToolBarFooterSection">
      <div class="kuiToolBarText">
        1 &ndash; 20 of 33
      </div>

      <div class="kuiButtonGroup kuiButtonGroup--united">
        <button class="kuiButton kuiButton--basic kuiButton--icon">
          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
        </button>
        <button class="kuiButton kuiButton--basic kuiButton--icon">
          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
        </button>
      </div>
    </div>
  </div>

</div>