Introduction

A HTML table.

Helium View Reference

Plain HTML

Output widget

<div class="widget-container">
   <div class="table-container ui-corner-all">
      <span class="caption">Manage Data Table</span>
      <div class="global-search">
         <a href="#" title="Add search criteria" tabindex="-1" class="search-add">
         <img src="/web-client/images/app/icon-addsearchfilter.png" alt="Add Search Filter" width="15" height="15">
         </a>
         <div class="search-group">
            <input type="text" placeholder="Search" class="search-box">
            <img src="/web-client/images/app/icon-clearsearchfilter.png" alt="Clear Filter" width="16" height="16" class="clear-search">
         </div>
      </div>
      <div class="advanced-search" style="display: none;">
         <div class="advanced-search-type">
            <select>
               <option value="MATCH">Match</option>
               <option value="DO_NOT_MATCH">Do not match</option>
            </select>
            <select>
               <option value="ANY">any</option>
               <option value="ALL">all</option>
            </select>
            <span>of the criteria</span>
            <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
            <span class="ui-button-text">Update results</span></button>
         </div>
      </div>
      <table id="w1" class="widget data table">
         <thead class="ui-state-default">
            <tr>
               <th colspan="1" class="action"></th>
               <th>
                  <div><span class="ui-icon ui-icon-carat-1-s"> </span><span>Manage Data Index</span></div>
               </th>
               <th>
                  <div><span class="ui-icon ui-icon-carat-2-n-s"> </span><span>Data Type Description</span></div>
               </th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td class="action"><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View</span></button></td>
               <td>1</td>
               <td>BoolObj</td>
            </tr>
            <tr>
               <td class="action"><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View</span></button></td>
               <td>2</td>
               <td>Person</td>
            </tr>
         </tbody>
         <tfoot class="ui-state-default">
            <tr>
               <td colspan="3">
                  <div class="paging"></div>
                  <a href="/web-api/services/app/datatablewidget/id/1?hsid=8f1cb73b-6a0a-4140-9b9e-4c0f1f706f77" title="Download CSV export" tabindex="-1" class="csv-download">
                  <img src="/web-client/images/app/icon-downloadcsv.png" alt="Download CSV Export" width="15" height="15">
                  </a>
                  <img src="/web-client/images/app/ajax-roller.gif" alt="Loading..." width="16" height="16" class="progress">
                  <span class="pageof">Page 1 of 1</span>
               </td>
            </tr>
         </tfoot>
      </table>
   </div>
</div>

JavaScript / jQuery

Output widget - Programmatically

Not implemented yet.

Browser not supported