Smart Table Angularjs external search box

Question

Good morning, i have a smart table on my angualrJS spa but i need to place the search fields outside the table for ui design purposes. Can it be done? Here a sample code of my table

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">        
  <thead>
    <tr>
      <th>Tipo</th>
      <th>Da</th>
      <th>A</th>
      <th>Data</th>
      <th>Durata</th>
      <th>Costo</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th><input st-search="'destination'" /></th>
      <th><input st-search="'answerTime'" /></th>
      <th><input st-search="'duration'" /></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in displayedCollection">
      <td></td>
      <td></td>
      <td>{{row.destination}}</td>
      <td>{{row.answerTime | date : 'short'}}</td>
      <td>{{row.duration | number}}</td>
      <td>{{row.cost | currency : '€'}}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" class="text-center">
        <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
      </td>
    </tr>
  </tfoot>
</table>

i need to place the st-search field (or something similar) outside the tags.

here the sample, on top default, and on bottom desired

https://i.sstatic.net/eRvwM.jpg

Answer 1

You may try to wrap the table in a wrapper like this:

<div st-table="displayedCollection" st-safe-src="rowCollection">

   <input st-search="'destination'" />
   <input st-search="'answerTime'" />
   <input st-search="'duration'" />

   <table class="table table-striped">
      <thead>
         <tr>
            <th>Tipo</th>
            <th>Da</th>
            <th>A</th>
            <th>Data</th>
            <th>Durata</th>
            <th>Costo</th>
         </tr>
      </thead>
      <tbody>
         <tr ng-repeat="row in displayedCollection">
            <td></td>
            <td></td>
            <td>{{row.destination}}</td>
            <td>{{row.answerTime | date : 'short'}}</td>
            <td>{{row.duration | number}}</td>
            <td>{{row.cost | currency : '€'}}</td>
          </tr>
      </tbody> 
    </table>
 </div>

For me, this worked perfect.