Filter Report (Run as HTML)
Imports: 9

This is based on the Default Report, but if you generate it as HTML, it will allow you to toggle, filter, and sort multiple columns, and export the data to CSV. There's also a (default hidden) column with household names on primary contacts, for churches needing to do bulk mailings by household.

Preview

Report Preview


<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
​
    <style>
        #toolbar { margin: 0; }
      	tr.person > td { 
          padding: 0.25em; }
      	tr:nth-child(even) { background-color: #edf2f7; }
      	thead { 
          border-bottom: 1px solid #bec9d3; }
				th { padding: .5em; }
      	.avatar { 
          width: 50px;
        	height: 50px;
					border-radius: 25px 25px 25px 25px;
          -moz-border-radius: 25px 25px 25px 25px;
          -webkit-border-radius: 25px 25px 25px 25px;
        }
      	.container {
          width: 100%;
          padding-top: 15px;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>
        {{ list.name }}
        <br>
        <small>
          {{ organization.name }}
        </small>
      </h2>
      <div class="clearfix"></div>
      
      <div id="toolbar" class="select" style="display: none;">
        <select class="form-control">
          <option value="">Export Basic</option>
          <option value="all">Export All</option>
          <option value="selected">Export Selected</option>
        </select>
      </div>
      
      <table id="table"
        style="width: 100%"
        data-show-export="true"
        data-search="true"
        data-show-multi-sort="true"
        data-show-columns="true"
        data-filter-control="true"
        data-show-search-clear-button="true"
        data-show-toggle="true">
      <thead>
        <tr>
          <th style="text-align: left" data-sortable="true" data-filter-control="input" data-visible="false">Household Name (for prim. contacts)</th>
          {% for column in list.columns %%}
            <th style="text-align: left" data-sortable="true" data-filter-control="input">{{column.name}}</th>
          {% endfor %}
        </tr>
      </thead>
        <tbody>
        {% for result in results %}
          <tr class="person">
            <td>
              {% if result.person.households[0].primary_contact.id == result.person.id and result.person.households[0].active_adults | size > 1 %}
                  {{ result.person.households[0].name }}
                  {% else %}
                    {% unless result.person.households[0].active_adults.size > 1 or result.person.child %}
                      {{ result.person.name }}
                    {% endunless %}
              {% endif %}
            </td>
            {% for column in list.columns %%}
              <td>
                {% assign detail = column | column_detail column, result %}
                {% if column.identifier == "people.photo" %}
                  <img class="avatar" src="{{ detail }}?g=50x50%23" />
                {% elsif detail.filename %}
                    <a href="{{detail.url}}" target="_blank">{{detail.filename}}</a>
                {% else %}
                  {{ detail }}
                {% endif %}
              </td>
            {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
  </body>
  
  <script>
    var $table = $('#table')
​
    $(function() {
      $('#toolbar').find('select').change(function () {
        $table.bootstrapTable('destroy').bootstrapTable({
          exportDataType: $(this).val(),
          exportTypes: ['csv', 'excel', 'txt', 'xml', 'json', ]
        })
      }).trigger('change')
    })
  </script>
  
  
</html>