Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
React 16 React Router 4 Use a single page for docs/examples/home page instead of using separate html files
- Loading branch information
1 parent
82a0020
commit 656f3cb
Showing
12 changed files
with
315 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # EditorConfig helps developers define and maintain consistent | ||
| # coding styles between different editors and IDEs | ||
| # http://editorconfig.org | ||
|
|
||
| root = true | ||
|
|
||
| [*] | ||
|
|
||
| # Change these settings to your own preference | ||
| indent_style = space | ||
| indent_size = 2 | ||
|
|
||
| # We recommend you to keep these unchanged | ||
| end_of_line = lf | ||
| charset = utf-8 | ||
| trim_trailing_whitespace = true | ||
| insert_final_newline = true | ||
|
|
||
| [*.md] | ||
| trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import { Route } from 'react-router-dom'; | ||
|
|
||
| import ExampleScripts from '../scripts'; | ||
| import Navbar from './Navbar'; | ||
| import Home from './Home'; | ||
| import Examples from './Examples'; | ||
| import Documentation from './Documentation'; | ||
|
|
||
| class App extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Navbar exampleLinks={ExampleScripts} /> | ||
| <Route exact path="/" component={Home} /> | ||
| <Route path="/examples" component={Examples} /> | ||
| <Route path="/documentation" component={Documentation} /> | ||
| </div > | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
32 changes: 32 additions & 0 deletions
32
packages/react-data-grid-examples/src/components/Documentation.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import { Link, Route, Redirect } from 'react-router-dom'; | ||
|
|
||
| import GettingStarted from '../scripts/documentation01-gettingstarted'; | ||
| import ApiReference from '../scripts/documentation02-apireference'; | ||
| import ComponentsDocs from '../scripts/documentation03-components'; | ||
|
|
||
| function Documentation() { | ||
| return ( | ||
| <div className="container-fluid top-space"> | ||
| <div className="row"> | ||
| <div className="col-md-2 top-space" role="complementary"> | ||
| <nav id="sidebar" className="bs-docs-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" data-offset-top="0" data-offset-bottom="200"> | ||
| <ul className="nav bs-docs-sidenav"> | ||
| <li><Link to="/documentation/gettingstarted">Getting Started</Link></li> | ||
| <li><Link to="/documentation/apireference">API Reference</Link></li> | ||
| <li><Link to="/documentation/componentsdocs">Component Docs</Link></li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| <div className="col-md-10"> | ||
| <Route path="/documentation/gettingstarted" component={GettingStarted} /> | ||
| <Route path="/documentation/apireference" component={ApiReference} /> | ||
| <Route path="/documentation/componentsDocs" component={ComponentsDocs} /> | ||
| <Route exact path="/documentation" render={() => <Redirect to="/documentation/gettingstarted" />} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Documentation; |
5 changes: 2 additions & 3 deletions
5
packages/react-data-grid-examples/src/components/ExampleList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/react-data-grid-examples/src/components/Examples.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import { Route, Redirect } from 'react-router-dom'; | ||
|
|
||
| import ExampleScripts from '../scripts'; | ||
| import ExampleList from './ExampleList'; | ||
|
|
||
| function Examples() { | ||
| const routes = ExampleScripts.map(s => <Route path={`/examples/${s.hashLocation}`} component={s.module} />); | ||
| routes.push(<Route exact path="/examples" render={() => <Redirect to="/examples/all-features" />} />); | ||
|
|
||
| return ( | ||
| <div className="container-fluid top-space"> | ||
| <div className="row"> | ||
| <div className="col-md-2 top-space" role="complementary"> | ||
| <nav id="sidebar" className="bs-docs-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" data-offset-top="0" data-offset-bottom="200"> | ||
| <div id="grid-examples-div"> | ||
| <ExampleList className="nav bs-docs-sidenav" links={ExampleScripts} /> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| <div className="col-md-10"> | ||
| <div> | ||
| <h1 className="page-header">React Data Grid Examples</h1> | ||
| {routes} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Examples; |
138 changes: 138 additions & 0 deletions
138
packages/react-data-grid-examples/src/components/Home.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| function Home() { | ||
| return ( | ||
| <div> | ||
| <header id="head"> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="main-logo"></div> | ||
| <h1 className="lead">React Data Grid </h1> | ||
| <p className="tagline">Excel-like grid component built with React</p> | ||
| <p> | ||
| <Link className="btn btn-default btn-lg" to="/examples">DEMO</Link> | ||
| <a className="btn btn-action btn-lg" href="https://github.com/adazzle/react-data-grid">DOWNLOAD NOW</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div className="jumbotron"> | ||
| <div className="container"> | ||
| <div className="row" id="demo"> | ||
| <div className="col-md-3 col-sm-6 highlight"> | ||
| <div className="h-caption"><h4><i className="fa fa-flash fa-5"></i>Lightning Fast Rendering</h4></div> | ||
| <div className="h-body text-center"> | ||
| <p>Combines the performance power of React as well as partial rendering techniques in order to smoothly scroll though hundreds of thousands of rows.</p> | ||
| </div> | ||
| </div> | ||
| <div className="col-md-3 col-sm-6 highlight"> | ||
| <div className="h-caption"><h4><i className="fa fa-edit fa-5"></i>Rich Editing and Formatting</h4></div> | ||
| <div className="h-body text-center"> | ||
| <p>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</p> | ||
| </div> | ||
| </div> | ||
| <div className="col-md-3 col-sm-6 highlight"> | ||
| <div className="h-caption"><h4><i className="fa fa-cogs fa-5"></i>Configurable & Customizable</h4></div> | ||
| <div className="h-body text-center"> | ||
| <p>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.</p> | ||
| </div> | ||
| </div> | ||
| <div className="col-md-3 col-sm-6 highlight"> | ||
| <div className="h-caption"><h4><i className="fa fa-file-excel-o fa-5"></i>Packed full of Excel Features</h4></div> | ||
| <div className="h-body text-center"> | ||
| <p>Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing, sorting, filtering and many more features on the way.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="container-fluid"> | ||
| <div className="row"> | ||
| <div className="main-grid"> | ||
| <div className="grid-examples"> | ||
| <h3>Check out these examples</h3> | ||
| <div id="grid-examples-div"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="jumbotron top-space"> | ||
| <div className="docs-section"> | ||
| <h2>Quick Start </h2> | ||
| <h3 id="js-installation">Installation</h3> | ||
| <h4>Using Common JS</h4> | ||
| <p>React Data Grid is available in the npm repository. You can install it from the command line using the following commands</p> | ||
| <p><kbd>npm install react --save</kbd></p> | ||
| <p><kbd>npm install react-data-grid --save</kbd></p> | ||
| <p>Once downloaded, require both React and React Data Grid and you should be good to go</p> | ||
| <div className="code-block js"> | ||
| <pre>import React from 'react'; <br />import ReactDataGrid from 'react-data-grid';</pre> | ||
| </div> | ||
| <p>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</p> | ||
| <div className="code-block js"> | ||
| <pre>import ReactDataGridPlugins from 'react-data-grid/addons';</pre> | ||
| </div> | ||
| <br /> | ||
| <h4>Using Distribution Scripts</h4> | ||
| <p>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</p> | ||
| <div className="code-block js"> | ||
| <pre><script src="//fb.me/react-0.14.6.js"></script><br /><script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"></script></pre> | ||
| </div> | ||
|
|
||
| And include react-data-grid.ui-plugins.js to use advanced features. Plugins will be availble on the ReactDataGridPlugins namespace | ||
| <div className="code-block js"> | ||
| <pre><script type="text/javascript" src="react-data-grid/dist/react-data-grid.ui-plugins.js"></script>"</pre> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <footer id="footer" className="top-space"> | ||
|
|
||
| <div className="footer1"> | ||
| <div className="container"> | ||
| <div className="row"> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="footer2"> | ||
| <div className="container"> | ||
| <div className="row"> | ||
|
|
||
| <div className="col-md-6 widget"> | ||
| <div className="widget-body"> | ||
| <p className="simplenav"> | ||
|
|
||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="col-md-6 widget"> | ||
| <div className="widget-body"> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </footer> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.