-
- Check out these examples
-
-
-
+
+ );
+}
+
+Examples.propTypes = {
+ match: PropTypes.shape({
+ url: PropTypes.string
+ })
+};
+
+export default Examples;
diff --git a/packages/react-data-grid-examples/src/components/Home.js b/packages/react-data-grid-examples/src/components/Home.js
new file mode 100644
index 0000000000..35aad423d5
--- /dev/null
+++ b/packages/react-data-grid-examples/src/components/Home.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import ExampleList from './ExampleList';
+
+function Home() {
+ return (
+
+
+
+
+
+
+
+
+
+ {routes}
+
+
+ React Data Grid Examples
+
+
+
+
+
+ );
+}
+
+export default Home;
diff --git a/packages/react-data-grid-examples/src/components/Navbar.js b/packages/react-data-grid-examples/src/components/Navbar.js
index 15e3b084f3..d014d4f7f3 100644
--- a/packages/react-data-grid-examples/src/components/Navbar.js
+++ b/packages/react-data-grid-examples/src/components/Navbar.js
@@ -1,5 +1,6 @@
import React from 'react';
-import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
import ExampleList from './ExampleList';
class Navbar extends React.Component {
@@ -8,37 +9,40 @@ class Navbar extends React.Component {
+
+
+
+
+
+
+
+
+
+
+
+
+ Lightning Fast Rendering
+
+ Combines the performance power of React as well as partial rendering techniques in order to smoothly scroll though hundreds of thousands of rows.
+
+
+
+ Rich Editing and Formatting
+
+ View and edit cells using a wide range of formatters and editors. If these don't suit your needs, you can easily create and plugin your own
+
+
+
+ Configurable & Customizable
+
+ Quickly configure and customise features such as grid and column properties, row and cell renderers. As the Grid is a React component it is easy to extend and add custom functionality.
+
+
+
+ Packed full of Excel Features
+
+ Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing, sorting, filtering and many more features on the way.
+
+
+
+
+
+
+
+
+
+ Check out these examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quick Start
+Installation
+Using Common JS
+React Data Grid is available in the npm repository. You can install it from the command line using the following commands
+npm install react --save
+npm install react-data-grid --save
+Once downloaded, require both React and React Data Grid and you should be good to go
+
+
+ import React from 'react';+
import ReactDataGrid from 'react-data-grid';
If you want to use extra features such as built in editors, formatters, toolbars and other plugins, you need to require the addons module as well
+
+
+ import ReactDataGridPlugins from 'react-data-grid/addons';+
+
Using Distribution Scripts
+If you prefer not to use a module system, you can reference the distribution scripts directly in your html pages. First you need to download the scripts. This can be done in 3 ways, either download directly from github source, using npm as above
+
+
+
+ And include react-data-grid.ui-plugins.js to use advanced features. Plugins will be availble on the ReactDataGridPlugins namespace
+ <script src="//fb.me/react-0.14.6.js"></script>+
<script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"></script>
+
+
+ <script type="text/javascript" src="react-data-grid/dist/react-data-grid.ui-plugins.js"></script>"+
-
-
- Home +
- + Home +
-
Documentation
-
-
- Getting Started -
- API Reference -
- Component Documentation +
- Getting Started +
- API Reference +
- Component Docs
-
Examples
-
+
{ exampleName }
-{ exampleDescription }
+{ exampleDescription }
-
-
-);
-
-ReactRouter.run(routes, function (Handler) {
- ReactDOM.render(React Data Grid - Excel-like grid component built with React
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/react-data-grid-examples/src/documentation.js b/packages/react-data-grid-examples/src/documentation.js
deleted file mode 100644
index 6bd6441d8c..0000000000
--- a/packages/react-data-grid-examples/src/documentation.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var ReactRouter = require('react-router');
-
-var gettingStarted = require('./scripts/documentation01-gettingstarted');
-var apiReference = require('./scripts/documentation02-apireference');
-var componentsDocs = require('./scripts/documentation03-components');
-
-var { Route, RouteHandler } = ReactRouter;
-
-class App extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-var routes = (
- Documentation
-
-
- {allRoutes}
-
-);
-
-ReactRouter.run(routes, function(Handler) {
- ReactDOM.render(ReactData Grid - Excel-like grid component built with React
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+), document.getElementById('root'));
diff --git a/packages/react-data-grid-examples/src/scripts/documentation03-components.js b/packages/react-data-grid-examples/src/scripts/documentation03-components.js
index 2f00f64b3d..1f34cd4e1b 100644
--- a/packages/react-data-grid-examples/src/scripts/documentation03-components.js
+++ b/packages/react-data-grid-examples/src/scripts/documentation03-components.js
@@ -57,7 +57,7 @@ class ComponentDocs extends React.Component {
const className = key === this.state.selectedDocumentIndex ? 'active' : '';
const doc = generatedDocs[key];
docsToRender.push(
- -
+
-
{doc.name}
);
}
diff --git a/packages/react-data-grid-examples/src/shared.js b/packages/react-data-grid-examples/src/shared.js
deleted file mode 100644
index b91a0b2b91..0000000000
--- a/packages/react-data-grid-examples/src/shared.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import ReactDom from 'react-dom';
-import Navbar from './components/Navbar';
-import ExampleScripts from './scripts';
-
-ReactDom.render(
-
-
-
-
-
-
-
-
diff --git a/packages/react-data-grid-examples/src/examples.js b/packages/react-data-grid-examples/src/examples.js
deleted file mode 100644
index 7a7899adc1..0000000000
--- a/packages/react-data-grid-examples/src/examples.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactRouter, {Route, RouteHandler} from 'react-router';
-import ExampleList from './components/ExampleList';
-import ExampleScripts from './scripts';
-
-window.React = React;
-
-class App extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-let allRoutes = ExampleScripts.map(e => {
- let routeHandler = e.module;
- return React Data Grid Examples
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lightning Fast Rendering
-
- Combines the performance power of React as well as partial rendering techniques in order to smoothly scroll though hundreds of thousands of rows.
-
-
-
- Rich Editing and Formatting
- View and edit cells using a wide range of formatters and editors. If these don't suit your needs, you can easily create and plugin your own
-
-
-
-
- Configurable & Customizable
-
- Quickly configure and customise features such as grid and column properties, row and cell renderers. As the Grid is a React component it is easy to extend and add custom functionality.
-
-
-
- Packed full of Excel Features
-
- Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing, sorting, filtering and many more features on the way.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/packages/react-data-grid-examples/src/index.js b/packages/react-data-grid-examples/src/index.js
index 0785acc799..edf7e83008 100644
--- a/packages/react-data-grid-examples/src/index.js
+++ b/packages/react-data-grid-examples/src/index.js
@@ -1,8 +1,11 @@
import React from 'react';
-import ReactDom from 'react-dom';
-import ExampleList from './components/ExampleList';
-import ExampleScripts from './scripts';
+import ReactDOM from 'react-dom';
+import { HashRouter as Router } from 'react-router-dom';
-window.React = React;
+import App from './components/App';
-ReactDom.render(
-
-
-
-
-
-
- Quick Start
-Installation
-Using Common JS
-React Data Grid is available in the npm repository. You can install it from the command line using the following commands
-npm install react --save
-npm install react-data-grid --save
-Once downloaded, require both React and React Data Grid and you should be good to go
-
-
- import React from 'react'; import ReactDataGrid from 'react-data-grid';-
If you want to use extra features such as built in editors, formatters, toolbars and other plugins, you need to require the addons module as well
-
-
- import ReactDataGridPlugins from 'react-data-grid/addons';-
-
Using Distribution Scripts
-If you prefer not to use a module system, you can reference the distribution scripts directly in your html pages. First you need to download the scripts. This can be done in 3 ways, either download directly from github source, using npm as above
-
-
-
- And include react-data-grid.ui-plugins.js to use advanced features. Plugins will be availble on the ReactDataGridPlugins namespace
- <script src="//fb.me/react-0.14.6.js"></script>-
<script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"></script>
-
-
- <script type="text/javascript" src="react-data-grid/dist/react-data-grid.ui-plugins.js"></script>"-