Dynamic Table With Bootstrap

To get the data table looking nice with Bootstrap there is a few things that need to happen. First we need to make sure the following in you application.js file (note the extra dataTables.bootstrap file)

#= require jquery
#= require jquery.dataTables
#= require reporta/dataTables
#= require reporta/dataTables.bootstrap

Now you can display the report like this:

<%%= filters_for(@report) %>
<%%= table_for(@report, class_name: 'table') %>
<script type="text/javascript" charset="utf-8">
  $(function() {
    new Reporta.DynamicTable('.table.dynamic', { bootstrap: true });
  });
</script>

The only difference between this and the <%= link_to 'Dynamic Table', '/dynamic_table' %> example is the extra Javascript file and passing bootstrap: true to Reporta.DynamicTable.

Example