Skip to content

Commit

Permalink
[doc] mention sortable
Browse files Browse the repository at this point in the history
  • Loading branch information
Tony L. Kerz authored and Tony L. Kerz committed Jan 9, 2016
1 parent 3d598bc commit 9aae88a
Showing 1 changed file with 16 additions and 10 deletions.
26 changes: 16 additions & 10 deletions docs/src/markdown/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Use the `columns` property to set the default columns in a Griddle grid. Please

###Column Metadata###

The column meta data property is used to specify column properties that are not part of the result data object. For instance, if you want to specify a displayName that is different than the property name in the result data, the `columnMetadata` property is where this would be defined.
The column meta data property is used to specify column properties that are not part of the result data object. For instance, if you want to specify a displayName that is different than the property name in the result data, the `columnMetadata` property is where this would be defined.

Griddle parses and evaluates the following columnMetadata object properties:

Expand All @@ -25,6 +25,11 @@ Griddle parses and evaluates the following columnMetadata object properties:
<dd><strong>string (required)</strong> - this is the name of the column as it appears in the results passed into Griddle.</dd>
</dl>

<dl>
<dt>sortable</dt>
<dd><strong>bool</strong> - Determines whether or not the user can sort this column (defaults to `true`, so specify `false` to disable sort)</dd>
</dl>

<dl>
<dt>order</dt>
<dd><strong>int</strong> - The order that this column should appear in Griddle.</dd>
Expand All @@ -49,15 +54,15 @@ Griddle parses and evaluates the following columnMetadata object properties:
<dd><strong>React Component</strong> - The component that should be rendered instead of the standard column data. This component will still be rendered inside of a `TD` element. (more information below in the [Custom Columns section](#customColumns).)</dd>
</dl>

However, you are also able to pass other properties in as columnMetadata.
However, you are also able to pass other properties in as columnMetadata.

[columnMetadata can be accessed on the `metadata` property of a Custom Column component.](#custom-columns)

#####Example:#####

Assume we want to reverse the columns so name would be last, followed by followed by city, state, company, country and favorite number. Also we want the name column heading to read `Employee Name` instead of name.
Assume we want to reverse the columns so name would be last, followed by followed by city, state, company, country and favorite number. Also we want the name column heading to read `Employee Name` instead of name.

Our metadata object would look something like
Our metadata object would look something like

```
{
Expand Down Expand Up @@ -96,16 +101,17 @@ Our metadata object would look something like
"order": 4,
"locked": false,
"visible": true,
"displayName": "Favorite Number"
"displayName": "Favorite Number",
"sortable": false
}
```

We would then load Griddle as follows:
We would then load Griddle as follows:

```
React.render(
<Griddle results={fakeData} columnMetadata={exampleMetadata} showFilter={true}
showSettings={true} columns={["name", "city", "state", "country"]}/>,
<Griddle results={fakeData} columnMetadata={exampleMetadata} showFilter={true}
showSettings={true} columns={["name", "city", "state", "country"]}/>,
document.getElementById('griddle-metadata')
```

Expand Down Expand Up @@ -221,7 +227,7 @@ var rowMetadata = {
return "default-row";
}
};

return (
<div className="griddle-container">
<Griddle results={this.state.rows} rowMetadata={rowMetadata} />
Expand Down Expand Up @@ -397,7 +403,7 @@ var OtherPager = React.createClass({
Then initialize your component as follows:

```
<Griddle results={fakeData} tableClassName="table" useCustomRowComponent="true"
<Griddle results={fakeData} tableClassName="table" useCustomRowComponent="true"
customRowComponent={OtherComponent} useCustomPagerComponent="true" customPagerComponent={OtherPager} />
```

Expand Down

0 comments on commit 9aae88a

Please sign in to comment.