Add "all" option to select filter component in bootstrap-table in embedded javascript

Question

I have a data-table where we're using Bootstrap 4 and bootstrap-table. I've added the bootstrap-table plugin Filter Control so that I may have some options for sorting.

In a column for active users, I have a simple "yes" or "no" value. The data is stored all in a Postgres DB. Is there a simple way to add an all <option> to the <select> that is auto-generated by bootstrap-table?

Here's an excerpt of the script:

<table id="table" class=table table-hover" data-toggle="table" data-pagination="true" data-page-size="10" data-sortable="true" data-filter-conrol="true">
  <thead>
    <tr>
      //... other non-relevant th elements
      <th id="active_users" data-field="user_stats" data-sortable="true" data-filter-control="select" data-filter-default="yes">Active?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      //...other non-relevant td elements
      <td class="table-row user-table-data"><%=userJson.registeruser[i].is_active%></td>
    </tr>
  </tbody>
</table>

The options currently available are:

• blank
• yes
• no

How do I go about editing that bootstrap-table option to change from blank into a custom value all? Is this possible?

Answer 1

It should be possible with a combination of the column options filterData to set custom select entries) and the option filterCustomSearch to create a custom search function.

On the custom search function you check if the selected value is "all", then you can just return the whole data.