Skip to content

Instantly share code, notes, and snippets.

@grommetux

grommetux/grommet_index_hello_world.html

Last active December 29, 2017 06:46
Show Gist options
  • Save grommetux/4b73162123b70103b763735c3ef58015 to your computer and use it in GitHub Desktop.
Save grommetux/4b73162123b70103b763735c3ef58015 to your computer and use it in GitHub Desktop.
Download ZIP
a template for grommet-index
Raw
grommet_index_hello_world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grommet Index Hello World!</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700' rel='stylesheet' type='text/css'>
<link href='https://rawgit.com/grommet/grommet/stable/grommet.min.css' rel='stylesheet' type='text/css'>
<link href='https://rawgit.com/grommet/grommet-index/stable/grommet-index.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://rawgit.com/grommet/grommet/stable/grommet.min.js"></script>
<script src="https://rawgit.com/grommet/grommet-index/stable/grommet-index.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var query = new GrommetIndex.Query('');
var attributes = [
{
"label": "Status",
"name": "status",
"status": true,
"filter": {
"all": true,
"values": [
{"label": "Critical", "value": "critical"},
{"label": "Warning", "value": "warning"},
{"label": "OK", "value": "ok"},
{"label": "Unknown", "value": "unknown"}
]
}
},
{"label": "Name", "name": "name", "sort": {"direction": "asc"}},
{
"label": "State",
"name": "state",
"filter": {
"all": true,
"values": [{"value": "running"}, {"value": "completed"}]
},
"secondary": true
},
{
"label": "Modified",
"name": "modified",
"sort": {
"direction": "desc",
"sections": [
{"label": "Today", "value": 1459276913490},
{"label": "Yesterday", "value": 1459276913490},
{"label": "Earlier"}
]
},
"hidden": true
}
];
var result = {
"count": 5,
"items": [
{"uri": "/1", "name": "First", "status": "ok", "state": "completed"},
{"uri": "/2", "name": "Second", "status": "ok", "state": "completed"},
{"uri": "/3", "name": "Third", "status": "warning", "state": "completed"},
{"uri": "/4", "name": "Fourth", "status": "critical", "state": "completed"},
{"uri": "/5", "name": "Fifth", "status": "unknown", "state": "running"}
],
"start": 0,
"total": 10,
"unfilteredTotal": 20
};
var App = React.createClass({
getInitialState: function () {
return {
query: query,
filter: {},
sort: 'name:asc'
};
},
_onQuery: function (query) {
this.setState({ query: query });
},
_onFilter: function (filter) {
this.setState({ filter: filter });
},
_onSort: function (sort) {
this.setState({ sort: sort });
},
render: function () {
return (
<Grommet.App>
<section>
<GrommetIndex.Index label="Items" attributes={attributes}
data={result} sort="name:asc" fixed={false}
query={this.state.query} onQuery={this._onQuery}
filter={this.state.filter} onFilter={this._onFilter}
sort={this.state.sort} onSort={this._onSort} />
</section>
</Grommet.App>
);
}
});
var element = document.getElementById('content');
ReactDOM.render(React.createElement(App), element);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment