Skip to content

Commit

Permalink
0.8.1 docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanlanciaux
ryanlanciaux committed Feb 19, 2017
1 parent 123ed01 commit e016db0
Show file tree
Hide file tree
Showing 10 changed files with 9,088 additions and 12,543 deletions.
123 changes: 119 additions & 4 deletions customization.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@

<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
Expand Down Expand Up @@ -97,6 +97,22 @@ <h3 id="column-metadata">Column Metadata</h3>
<dd><strong>bool</strong> - Determines whether or not the user can sort this column (defaults to <code>true</code>, so specify <code>false</code> to disable sort)</dd>
</dl>

<dl>
<dt>customCompareFn</dt>
<dd><strong>function</strong></dd>
<dd><strong>with 1 argument</strong> specifies a function that defines the sort order of the column data. Passed to <a href="https://lodash.com/docs#sortBy">_.sortBy</a> method, invoked with 1 argument.</dd>
<dd><strong>with 2 arguments</strong> specifies a function that defines the sort order of the column data. Passed to standard JS <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a> method, invoked ith 2 arguments. Useful, for example, wih naturalSort(a, b) from <a href="https://www.npmjs.com/package/javascript-natural-sort">javascript-natural-sort</a></dd>
</dl>

<dl>
<dt>multiSort</dt>
<dd><strong>object</strong> - allows to specify multiple sorting when sorting current column. Specified columns will be sorted after current</dd>
<code>multiSort: {
columns: [&#39;name&#39;],
orders: [&#39;asc&#39;]
}</code>
</dl>

<dl>
<dt>order</dt>
<dd><strong>int</strong> - The order that this column should appear in Griddle.</dd>
Expand All @@ -112,6 +128,11 @@ <h3 id="column-metadata">Column Metadata</h3>
<dd><strong>string</strong> - The css class name to apply to this column.</dd>
</dl>

<dl>
<dt>titleStyles</dt>
<dd><strong>object</strong> - collection of styles applied to column header</dd>
</dl>

<dl>
<dt>displayName</dt>
<dd><strong>string</strong> - The display name for the column. This is used when the name in the column heading and settings should be different from the data passed in to the Griddle component.</dd>
Expand Down Expand Up @@ -416,6 +437,96 @@ <h5 id="example-">Example:</h5>
</script>


<hr />

<h3 id="custom-sorting">Custom sorting</h3>
<h5 id="example-">Example:</h5>
<p>In this example we are going to sort <code>Employee Name</code> column by last name, followed by first name:</p>
<pre><code>var exampleMetadata = [
{
<span class="string">"columnName"</span>: <span class="string">"id"</span>,
<span class="string">"order"</span>: <span class="number">1</span>,
<span class="string">"locked"</span>: false,
<span class="string">"visible"</span>: false,
<span class="string">"displayName"</span>: <span class="string">"ID"</span>
},
{
<span class="string">"columnName"</span>: <span class="string">"name"</span>,
<span class="string">"order"</span>: <span class="number">9</span>,
<span class="string">"locked"</span>: false,
<span class="string">"visible"</span>: true,
<span class="string">"displayName"</span>: <span class="string">"Employee Name"</span>,
<span class="string">"compare"</span>: <span class="keyword">function</span>(name) {
var a = name.split(<span class="string">" "</span>);
<span class="keyword">return</span> a[<span class="number">1</span>] + <span class="string">" "</span> + a[<span class="number">0</span>];
}
},
<span class="keyword">...</span>
]</code></pre>
<p>Then, like in first example, but specify initialSort column:</p>
<pre><code>React.render(
<span class="xml"><span class="tag">&lt;<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span> <span class="attribute">columnMetadata</span>=<span class="value">{exampleMetadata}</span> <span class="attribute">showFilter</span>=<span class="value">{true}</span>
<span class="attribute">showSettings</span>=<span class="value">{true}</span> <span class="attribute">columns</span>=<span class="value">{["name",</span> "<span class="attribute">city</span>", "<span class="attribute">state</span>", "<span class="attribute">country</span>"]} <span class="attribute">initialSort</span>=<span class="value">"name"</span>/&gt;</span>,
document.getElementById('griddle-metadata')</span></code></pre>
<div id="griddle-sorting"></div>

<script type="text/jsx">
var exampleMetadata = [
{
"columnName": "id",
"order": 1,
"locked": false,
"visible": false,
"displayName": "ID"
},
{
"columnName": "name",
"order": 9,
"locked": false,
"visible": true,
"displayName": "Employee Name",
"compare": function(name) {
var a = name.split(" ");
return a[1] + " " + a[0];
}
},
{
"columnName": "city",
"order": 8,
"locked": false,
},
{
"columnName": "state",
"order": 7,
"locked": false,
"visible": true
},
{
"columnName": "country",
"order": 6,
"locked": false,
"visible": true
},
{
"columnName": "company",
"order": 5,
"locked": false,
"visible": true
},
{
"columnName": "favoriteNumber",
"order": 4,
"locked": false,
"visible": true,
"displayName": "Favorite Number"
}
];

ReactDOM.render(
<Griddle results={fakeData} columnMetadata={exampleMetadata} tableClassName="table" showFilter={true} showSettings={true} columns={["name", "city", "state", "country"]} initialSort="name"/>, document.getElementById('griddle-sorting')
);
</script>

<hr />

<h3 id="row-metadata">Row Metadata</h3>
Expand Down Expand Up @@ -601,8 +712,7 @@ <h3 id="custom-filtering-and-filter-component">Custom Filtering and Filter Compo
<p>Griddle supports custom filtering and custom filter components. In order to use a custom filter function set the property <code>useCustomFilterer</code> to true and pass in a function to the <code>customFilterer</code> property. To use a custom filter component set <code>useCustomFilterComponent</code> to true and pass a component to <code>customFilterComponent</code>.</p>
<h5 id="example-">Example:</h5>
<p>This example shows how to make a custom filter component with a custom filter function that does a case-insensitive search through the items. The component must call <code>this.props.changeFilter(val)</code> when the filter should be updated. In the example below we pass a string but any variable type can be used as long as the filter function is expecting it, for example an advanced query could be passed in using an object. The filter function signature takes the items to be filtered and the query to filter them by.</p>
<pre><code class="lang-javascript"> <span class="keyword">var</span> _ = require(<span class="string">'underscore'</span>),
squish = require(<span class="string">'object-squish'</span>);
<pre><code class="lang-javascript"> squish = require(<span class="string">'object-squish'</span>);

<span class="keyword">var</span> customFilterFunction = <span class="keyword">function</span>(items, query) {
<span class="keyword">return</span> _.filter(items, (item) =&gt; {
Expand Down Expand Up @@ -658,6 +768,11 @@ <h3 id="custom-paging-component">Custom Paging Component</h3>
<dd><strong>object</strong> - The custom pagination component. default: {}</dd>
</dl>

<dl>
<dt>customPagerComponentOptions</dt>
<dd><strong>object</strong> - Any options to be passed to the custom pagination component. default: {}</dd>
</dl>

<h5 id="example">Example</h5>
<pre><code class="lang-javascript"><span class="keyword">var</span> OtherPager = React.createClass({
getDefaultProps: <span class="keyword">function</span>(){
Expand Down
4 changes: 2 additions & 2 deletions externalData.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@

<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,8 @@ <h4>From Source</h4>
</div>
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>

<!-- Griddle doesn't need jQuery at all -- just for the freezeframe library-->
Expand Down
4 changes: 2 additions & 2 deletions infiniteScroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@

<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
Expand Down
28 changes: 26 additions & 2 deletions properties.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@

<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
Expand Down Expand Up @@ -526,6 +526,30 @@ <h2 id="properties">Properties</h2>
"description": "A function that should be called when a row has been clicked. The 'gridRow' and event will be passed in as arguments.",
"type": "function",
"default": "null"
},
{
"property": "onRowMouseEnter",
"description": "A function that should be called when a mouse entered a row. The 'gridRow' and event will be passed in as arguments.",
"type": "function",
"default": "null"
},
{
"property": "onRowMouseLeave",
"description": "A function that should be called when a mouse left a row. The 'gridRow' and event will be passed in as arguments.",
"type": "function",
"default": "null"
},
{
"property": "onRowWillMount",
"description": "A function that should be called before a row was mounted. The 'gridRow' will be passed in as argument.",
"type": "function",
"default": "null"
},
{
"property": "onRowWillUnmount",
"description": "A function that should be called before a row was unmounted. The 'gridRow' will be passed in as argument.",
"type": "function",
"default": "null"
}
];
var DefinitionItem = React.createClass({
Expand Down
4 changes: 2 additions & 2 deletions quickstart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@

<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
Expand Down
Loading

0 comments on commit e016db0

Please sign in to comment.