Datatable Page Setup

Components of a Datatable page

In example code, replace foo with the appropriate variable for the datatable.

Set up a route in /openfecwebapp/routes.py

@app.route('/foo/')
def foo():
    return render_template(
        'datatable.html',
        parent='data',
        result_type='foo',
        slug='foo',
        title='foo',
        columns=constants.table_columns['foo']
    )
```

#### Set up columns for Datatable in `/openfecwebapp/constants.py`
Find the `OrderedDict` called `table_columns`, and add the appropriate column names:
```
    ('foo', ['Column One', 'Column Two', 'Column Three', 'Column Four']),
```

#### Set up filters template
Create a page in `/openfecwebapp/templates/partials/` called `foo-filter.html`. This template specifies the filters for the datatable. Other filter templates that end with `-filter.html` can be looked at for examples of how to use certain filters.

### Create a details panel template
Create a new Handlebars template in `/static/templates/[name of table].hbs`. These templates use a custom Handlebars helper to cut down on extra markup that goes like:

```
{{#panelRow "Label"}}
  {{some_data_key}}
{{/panelRow}}
```

For schedules, the details template should include all the data from the schedule as well as information about the filing committee.

#### Initialize Datatable JavaScript
Create `foo.js` in `/static/js/pages/`.
```
'use strict';

var $ = require('jquery');

var tables = require('../modules/tables');
var columns = require('../modules/columns');
var someDetailsTemplate = require('../../templates/example-template.hbs');

$(document).ready(function() {
  var $table = $('#results');
  new tables.DataTable($table, {
    autoWidth: false,
    title: 'Foo',
    path: ['foo', 'bar'],
    columns: columns.foo,
    order: [[4, 'desc']],
    useFilters: true,
    useExport: true,
    rowCallback: tables.modalRenderRow,
    callbacks: {
      afterRender: tables.modalRenderFactory(someDetailsTemplate)
    }
  });
});
```
The `path` property is the path to the API (https://api.open.fec.gov/developers/). For example to connect to /candidates/totals, the path would be `['candidates', 'totals']`. The `order` property refers to the column that the Datatable will be sorted by default. In the above sample code, it would be the fourth column in descending order.

#### Set up Datatable column data
In `/static/js/modules/columns.js`, add a new variable:
```
var foo = [
  {
    data: 'committee',
    orderable: false,
    className: 'all column--large',
    render: function (data, type, row) {
      return row.committee.name;
    }
  },
  {
    data: 'description',
    orderable: false,
    className: 'all column--large',
  },
  dateColumn({data: 'end_date', orderable: true, className: 'min-tablet hide-panel column--med'}),
  currencyColumn({data: 'contributions', className: 'min-desktop hide-panel column--number'}),
  modalTriggerColumn
];
```
Each object represents a column, in order. `Data` is the column parameter. If `data` is an object, we can drill down to the specific property with passing a function to  `render`. In the function, `row` would be object property. The size of columns are handled by class names, and `dateColumn` and `currencyColumn` are available to show column data in date or currency formats.

At the end of the file, don't forget to add the variable to `module.exports` with `foo: foo`.

Make sure changes to javascript and scss are compiled:
Run ```npm run watch``` once, to watch for changes to .js and .scss.
-Or-
Run ```npm run build``` after saving to compile the .js and .scss manually.