<commit_before>##External Data##

Often times it is not practical to load all of a grid's data in one request. Griddle supports loading external data through creation of a wrapper component or writing a callback function (the wrapper component is the recommended route). 

####Wrapper Component (recommended)####

Griddle comes with a handful of properties that must be set when working with external data.

<dl>
	<dt>useExternal</dt>
	<dd><strong>bool</strong> - Griddle will run expecting results to be coming from an external source. This affects paging, filtering, sorting, etc. (i.e. Griddle will not sort the local data set but will tell the wrapper component to get the sorted data from the source). Default: false
</dl>

<dl>
	<dt>externalSetPage</dt>
	<dd><strong>function</strong> - The function that will be used to set the page. Default: null</dd>
</dl>
<dl>
	<dt>externalChangeSort</dt>
	<dd><strong>function</strong> - The function that will be used to change the sort. Default: null</dd>
</dl>
<dl>
	<dt>externalSetFilter</dt>
	<dd><strong>function</strong> - The function that will be used to change the filter. Default: null</dd>
</dl>
<dl>
	<dt>externalSetPageSize</dt>
	<dd><strong>function</strong> - The function that will be used to change the number of results per page. Default: null</dd>
</dl>
<dl>
	<dt>externalMaxPage</dt>
	<dd><strong>int</strong> - The max number of pages that can be displayed for the result-set. Default: null</dd>
</dl>
<dl>
	<dt>externalCurrentPage</dt>
	<dd><strong>int</strong> - The page that is currently displayed from the result-set. Default: null</dd>
</dl>
<dl>
	<dt>externalSortColumn</dt>
	<dd><strong>string</strong> - The column name that determines the sort of the result-set Default: null</dd>
</dl>
<dl>
	<dt>externalSortAscending</dt>
	<dd><strong>bool</strong> - Specifies the sort direction for the current sort column. Default: true</dd>
</dl>

<hr />

#####Example Wrapper Component#####
Below is a skeleton wrapper component for dealing with external results in Griddle. This wrapper does not need to be used but it could serve as a decent starting point. 

```
var ExternalComponent = React.createClass({
    getInitialState: function(){
      var initial = { "results": [],
          "currentPage": 0,
          "maxPages": 0,
          "externalResultsPerPage": 5,
          "externalSortColumn":null,
          "externalSortAscending":true
      };

      return initial;
    },
    //general lifecycle methods
    componentWillMount: function(){
    },
    componentDidMount: function(){
	},
	//what page is currently viewed
    setPage: function(index){
    },
    //this will handle how the data is sorted
    sortData: function(sort, sortAscending, data){
	},
	//this changes whether data is sorted in ascending or descending order
    changeSortDirection: function(sort, sortAscending){
    },
    //this method handles the filtering of the data
    setFilter: function(filter){
    },
    //this method handles determining the page size
    setPageSize: function(size){
    },
    render: function(){
      return <Griddle useExternal={true} externalSetPage={this.setPage}
        externalChangeSort={this.changeSort} externalSetFilter={this.setFilter}<commit_msg>Fixes #78<commit_after>##External Data##

Often times it is not practical to load all of a grid's data in one request. Griddle supports loading external data through creation of a wrapper component or writing a callback function (the wrapper component is the recommended route). 

####Wrapper Component (recommended)####

Griddle comes with a handful of properties that must be set when working with external data.

<dl>
	<dt>useExternal</dt>
	<dd><strong>bool</strong> - Griddle will run expecting results to be coming from an external source. This affects paging, filtering, sorting, etc. (i.e. Griddle will not sort the local data set but will tell the wrapper component to get the sorted data from the source). Default: false
</dl>

<dl>
	<dt>externalSetPage</dt>
	<dd><strong>function</strong> - The function that will be used to set the page. Default: null</dd>
</dl>
<dl>
	<dt>externalChangeSort</dt>
	<dd><strong>function</strong> - The function that will be used to change the sort. Default: null</dd>
</dl>
<dl>
	<dt>externalSetFilter</dt>
	<dd><strong>function</strong> - The function that will be used to change the filter. Default: null</dd>
</dl>
<dl>
	<dt>externalSetPageSize</dt>
	<dd><strong>function</strong> - The function that will be used to change the number of results per page. Default: null</dd>
</dl>
<dl>
	<dt>externalMaxPage</dt>
	<dd><strong>int</strong> - The max number of pages that can be displayed for the result-set. Default: null</dd>
</dl>
<dl>
	<dt>externalCurrentPage</dt>
	<dd><strong>int</strong> - The page that is currently displayed from the result-set. Default: null</dd>
</dl>
<dl>
	<dt>externalSortColumn</dt>
	<dd><strong>string</strong> - The column name that determines the sort of the result-set Default: null</dd>
</dl>
<dl>
	<dt>externalSortAscending</dt>
	<dd><strong>bool</strong> - Specifies the sort direction for the current sort column. Default: true</dd>
</dl>

<hr />

#####Example Wrapper Component#####
Below is a skeleton wrapper component for dealing with external results in Griddle. This wrapper does not need to be used but it could serve as a decent starting point. 

```
var ExternalComponent = React.createClass({
    getInitialState: function(){
      var initial = { "results": [],
          "currentPage": 0,
          "maxPages": 0,
          "externalResultsPerPage": 5,
          "externalSortColumn":null,
          "externalSortAscending":true
      };

      return initial;
    },
    //general lifecycle methods
    componentWillMount: function(){
    },
    componentDidMount: function(){
	},
	//what page is currently viewed
    setPage: function(index){
    },
    //this will handle how the data is sorted
    sortData: function(sort, sortAscending, data){
	},
	//this changes whether data is sorted in ascending or descending order
    changeSort: function(sort, sortAscending){
    },
    //this method handles the filtering of the data
    setFilter: function(filter){
    },
    //this method handles determining the page size
    setPageSize: function(size){
    },
    render: function(){
      return <Griddle useExternal={true} externalSetPage={this.setPage}
        externalChangeSort={this.changeSort} externalSetFilter={this.setFilter}
{'fraction_non_alphanumeric': 0.11533117183881426, 'fraction_numerical': 0.0012351397251814111, 'mean_word_length': 3.952599388379205, 'pattern_counts': {'":': 12, '<': 149, '<?xml version=': 0, '>': 147, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5980798', 'n_tokens_mistral': 1866, 'n_tokens_neox': 1817, 'n_words': 716}