import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.createRandomData(50000),
skip: 0
};
this.pageChange = this.pageChange.bind(this);
}
pageChange(event) {
this.setState({
orders: this.state.orders,
skip: event.page.skip
});
}
/* Generating example data */
createRandomData(count) {
const firstNames = [ 'Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Nige' ],
lastNames = [ 'Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White' ],
cities = [ 'Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'Philadelphia', 'New York', 'Seattle', 'London', 'Boston' ],
titles = [ 'Accountant', 'Vice President, Sales', 'Sales Representative', 'Technical Support', 'Sales Manager', 'Web Designer',
'Software Developer' ];
return Array(count).fill({}).map((_, idx) => ({
id: idx + 1,
firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
city: cities[Math.floor(Math.random() * cities.length)],
title: titles[Math.floor(Math.random() * titles.length)]
}));
}
render() {
return (
<Grid
style={{ height: '440px' }}
rowHeight={40}
data={this.state.data.slice(this.state.skip, this.state.skip + 20)}
pageSize={20}
total={this.state.data.length}
skip={this.state.skip}
scrollable={'virtual'}
onPageChange={this.pageChange}
>
<Column field="id" title="ID" width="70px" />
<Column field="firstName" title="First Name" />
<Column field="lastName" title="Last Name" />
<Column field="city" title="City" width="120px" />
<Column field="title" title="Title" width="200px" />
</Grid>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
System.config({
"meta": {
"*.json": {
"loader": "systemjs-json-plugin"
},
"*.jsx": {
"babelOptions": {
"react": true
}
}
},
"packages": {
"pako": {
"defaultExtension": "js",
"main": "./index.js"
},
"app": {
"main": "./main.jsx"
},
"@progress/kendo-react-animation": {
"main": "dist/cdn/js/kendo-react-animation.js",
"defaultExtension": "js"
},
"@progress/kendo-react-buttons": {
"main": "dist/cdn/js/kendo-react-buttons.js",
"defaultExtension": "js"
},
"@progress/kendo-react-charts": {
"main": "dist/cdn/js/kendo-react-charts.js",
"defaultExtension": "js"
},
"@progress/kendo-react-popup": {
"main": "dist/cdn/js/kendo-react-popup.js",
"defaultExtension": "js"
},
"@progress/kendo-react-dropdowns": {
"main": "dist/cdn/js/kendo-react-dropdowns.js",
"defaultExtension": "js"
},
"@progress/kendo-react-inputs": {
"main": "dist/cdn/js/kendo-react-inputs.js",
"defaultExtension": "js"
},
"@progress/kendo-react-intl": {
"main": "dist/cdn/js/kendo-react-intl.js",
"defaultExtension": "js"
},
"@progress/kendo-data-query": {
"main": "dist/cdn/js/kendo-data-query.js",
"defaultExtension": "js"
},
"@progress/kendo-file-saver": {
"main": "dist/npm/main.js",
"defaultExtension": "js"
},
"@progress/kendo-react-conversational-ui": {
"main": "dist/cdn/js/kendo-react-conversational-ui.js",
"defaultExtension": "js"
},
"@progress/kendo-react-dateinputs": {
"main": "dist/cdn/js/kendo-react-dateinputs.js",
"defaultExtension": "js"
},
"@progress/kendo-react-grid": {
"main": "dist/cdn/js/kendo-react-grid.js",
"defaultExtension": "js"
},
"@progress/kendo-react-pdf": {
"main": "dist/cdn/js/kendo-react-pdf.js",
"defaultExtension": "js"
},
"@progress/kendo-react-excel-export": {
"main": "dist/cdn/js/kendo-react-excel-export.js",
"defaultExtension": "js"
},
"@progress/kendo-react-layout": {
"main": "dist/cdn/js/kendo-react-layout.js",
"defaultExtension": "js"
},
"@progress/kendo-react-ripple": {
"main": "dist/cdn/js/kendo-react-ripple.js",
"defaultExtension": "js"
},
"@progress/kendo-date-math": {
"main": "dist/cdn/js/kendo-date-math.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-dateinputs": {
"main": "dist/cdn/js/kendo-angular-dateinputs.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-buttons": {
"main": "dist/cdn/js/kendo-angular-buttons.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-inputs": {
"main": "dist/cdn/js/kendo-angular-inputs.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-intl": {
"main": "dist/cdn/js/kendo-angular-intl.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-l10n": {
"main": "dist/cdn/js/kendo-angular-l10n.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-popup": {
"main": "dist/cdn/js/kendo-angular-popup.js",
"defaultExtension": "js"
}
},
"bundles": {
"https://www.telerik.com/kendo-react-ui/npm/node_modules/@progress/kendo-drawing/dist/systemjs/kendo-drawing.js": [
"@progress/kendo-drawing",
"@progress/kendo-drawing/*"
]
},
"map": {
"app": "app",
"systemjs-json-plugin": "https://unpkg.com/systemjs-plugin-json@0.3.0",
"react": "https://unpkg.com/react@16.0.0/umd/react.production.min.js",
"react-dom": "https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js",
"react-dom/server": "https://unpkg.com/react-dom@16.0.0/umd/react-dom-server.browser.production.min.js",
"redux": "https://unpkg.com/redux@3.7.2/dist/redux.min.js",
"react-redux": "https://unpkg.com/react-redux@5.0.6/dist/react-redux.min.js",
"react-router": "https://unpkg.com/react-router@4.2.0/umd/react-router.min.js",
"react-router-dom": "https://unpkg.com/react-router-dom@4.2.2/umd/react-router-dom.min.js",
"react-transition-group": "https://unpkg.com/react-transition-group@2.2.1/dist/react-transition-group.min.js",
"prop-types": "https://unpkg.com/prop-types@15.6.0/prop-types.js",
"tslib": "https://unpkg.com/tslib@1.7.1",
"hammerjs": "https://unpkg.com/hammerjs@2.0.8",
"pako": "https://unpkg.com/pako@1.0.5",
"cldr-data": "https://www.telerik.com/kendo-react-ui/npm/node_modules/cldr-data",
"api-ai-javascript": "https://unpkg.com/api-ai-javascript@2.0.0-beta.21/index.js",
"adaptivecards": "https://unpkg.com/adaptivecards@1.0.0/lib/adaptivecards.js",
"botframework-directlinejs": "https://unpkg.com/botframework-directlinejs@0.9.15/directLine.js",
"marked": "https://unpkg.com/marked@0.3.19/lib/marked.js",
"@telerik": "https://www.telerik.com/kendo-react-ui/npm/node_modules/@telerik",
"@progress": "https://www.telerik.com/kendo-react-ui/npm/node_modules/@progress",
"plugin-babel": "https://unpkg.com/systemjs-plugin-babel@0.0.25/plugin-babel.js",
"systemjs-babel-build": "https://unpkg.com/systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js"
},
"transpiler": "plugin-babel"
});
<!DOCTYPE html>
<html>
<head>
<title>React QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.telerik.com/kendo-react-ui/npm/node_modules//@progress/kendo-theme-default/dist/all.css" crossorigin="anonymous" />
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- Example-specific styles -->
<style>
body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }
my-app { display: block; width: 100%; min-height: 80px; box-sizing: border-box; padding: 30px; }
my-app > .k-icon.k-i-loading { font-size: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.example-wrapper { min-height: 280px; align-content: flex-start; }
.example-wrapper p, .example-col p { margin: 0 0 10px; }
.example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }
.example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }
.example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
.event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: #fff; }
.event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }
.event-log li:last-child { margin-bottom: -1px;}
</style>
</head>
<!-- 3. Display the application -->
<body>
<my-app>
<span class="k-icon k-i-loading" style="color: #ff6358"></span>
</my-app>
</body>
</html>