Fix #778 Enhancement/switch between examples

examples/Router/ExamplesGrid.js

@@ -0,0 +1,63 @@
+import {Link} from "react-router-dom";
+import {Card, CardContent, Grid, Typography} from "@material-ui/core";
+import React from "react";
+import examples from "../examples";
+import {withStyles} from "@material-ui/core/styles/index";
+
+const styles = {
+    container: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 16,
+    },
+    card: {
+        '&:hover': {
+            background: 'lightgrey',
+            fontWeight: 500,
+        }
+    },
+    cardContent: {
+        '&:last-child': {
+            padding: 8,
+        }
+    },
+    link: {
+        textDecoration: 'none',
+    },
+    label: {
+        fontWeight: 'inherit'
+    }
+};
+
+function ExamplesGrid(props) {
+    const {classes} = props;
+
+    // Sort Examples alphabetically
+    const examplesSorted = {};
+    Object.keys(examples).sort().forEach(function (key) {
+        examplesSorted[key] = examples[key];
+    });
+
+    const examplesSortedKeys = Object.keys(examplesSorted);
+
+    return <React.Fragment>
+        <Typography variant="h5" align="center">Choose an Example</Typography>
+        <Typography variant="subtitle2" align="center">({examplesSortedKeys.length}) Examples</Typography>
+        <Grid container className={classes.container} spacing={16}>
+            {examplesSortedKeys.map((label, index) => (
+                <Grid key={index} item md={2}>
+                    <Link className={classes.link} to={`/${label.replace(/\s+/g, '-').toLowerCase()}`}>
+                        <Card className={classes.card}>
+                            <CardContent className={classes.cardContent}>
+                                <Typography variant="subtitle1" className={classes.label} align="center">{label}</Typography>
+                            </CardContent>
+                        </Card>
+                    </Link>
+                </Grid>
+            ))}
+        </Grid>
+    </React.Fragment>;
+}
+
+export default withStyles(styles)(ExamplesGrid);

examples/Router/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter as Router, Route, Switch} from 'react-router-dom';
+import {withStyles} from "@material-ui/core/styles/index";
+import ExamplesGrid from "./ExamplesGrid";
+import examples from "../examples";
+
+const styles = {
+    root: {
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    contentWrapper: {
+        width: '100%',
+    },
+};
+
+function Examples(props) {
+    const {classes} = props;
+    return <main className={classes.root}>
+        <div className={classes.contentWrapper}>
+            <Router hashType="noslash">
+                <Switch>
+                    <Route path="/" exact render={() => <ExamplesGrid examples={examples}/>}/>
+                    {Object.keys(examples).map((label, index) => (
+                        <Route key={index} path={`/${label.replace(/\s+/g, '-').toLowerCase()}`} exact component={examples[label]}/>
+                    ))}
+                </Switch>
+            </Router>
+        </div>
+    </main>;
+}
+
+const StyledExamples = withStyles(styles)(Examples);
+
+ReactDOM.render(<StyledExamples/>, document.getElementById('app-root'));

examples/array-value-columns/index.js

@@ -104,4 +104,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/column-filters/index.js

@@ -101,4 +101,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/column-options-update/index.js

@@ -154,4 +154,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/component/index.js

@@ -136,4 +136,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/csv-export/index.js

@@ -135,4 +135,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/custom-action-columns/index.js

@@ -181,4 +181,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-columns/index.js

@@ -95,4 +95,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-filter/index.js

@@ -1,6 +1,5 @@
 import { FormGroup, FormLabel, TextField } from '@material-ui/core';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import MUIDataTable from '../../src';
 
 class Example extends React.Component {
@@ -150,4 +149,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/customize-footer/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import CustomFooter from "./CustomFooter";
 
@@ -67,4 +66,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-rows/index.js

@@ -93,4 +93,4 @@ function Example() {
   );
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-search-render/index.js

@@ -67,4 +67,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/customize-search/index.js

@@ -104,4 +104,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/customize-sorting/index.js

@@ -34,4 +34,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-styling/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -134,6 +133,4 @@ class Example extends React.Component {
   }
 }
 
-const ExampleWithStyles = withStyles(customStyles, {name: "Example"})(Example);
-
-ReactDOM.render(<ExampleWithStyles/>, document.getElementById("app-root"));
+export default withStyles(customStyles, {name: "ExampleCard.js"})(Example);

examples/customize-toolbar/index.js

@@ -62,4 +62,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/customize-toolbarselect/index.js

@@ -55,4 +55,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/data-as-objects/index.js

@@ -79,4 +79,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/examples.js

@@ -0,0 +1,66 @@
+import ArrayValueColumns from "./array-value-columns";
+import ColumnFilters from "./column-filters";
+import ColumnOptionsUpdate from "./column-options-update";
+import Component from "./component";
+import CSVExport from "./csv-export";
+import CustomActionColumns from "./custom-action-columns";
+import CustomizeColumns from "./customize-columns";
+import CustomizeFilter from "./customize-filter";
+import CustomizeFooter from "./customize-footer";
+import CustomizeRows from "./customize-rows";
+import CustomizeSearch from "./customize-search";
+import CustomizeSearchRender from "./customize-search-render";
+import CustomizeSorting from "./customize-sorting";
+import CustomizeStyling from "./customize-styling";
+import CustomizeToolbar from "./customize-toolbar";
+import CustomizeToolbarSelect from "./customize-toolbarselect";
+import DataAsObjects from "./data-as-objects";
+import ExpandableRows from "./expandable-rows";
+import FixedHeader from "./fixed-header";
+import HideColumnsPrint from "./hide-columns-print";
+import OnDownload from "./on-download";
+import OnTableInit from "./on-table-init";
+import ResizableColumns from "./resizable-columns";
+import SelectableRows from "./selectable-rows";
+import ServerSideOptions from "./serverside-options";
+import ServerSidePagination from "./serverside-pagination";
+import Simple from "./simple";
+import SimpleNoToolbar from "./simple-no-toolbar";
+import TextLocalization from "./text-localization";
+import Themes from "./themes";
+
+/**
+ * Here you can add any extra examples with the Card label as the key, and the component to render as the value
+ */
+export default {
+    'Array Value Columns': ArrayValueColumns,
+    'Column Filters': ColumnFilters,
+    'Column Option Update': ColumnOptionsUpdate,
+    'Component': Component,
+    'CSV Export': CSVExport,
+    'Custom ActionColumns': CustomActionColumns,
+    'Customize columns': CustomizeColumns,
+    'Customize Filter': CustomizeFilter,
+    'Customize Footer': CustomizeFooter,
+    'Customize Rows': CustomizeRows,
+    'Customize Search': CustomizeSearch,
+    'Customize Search Render': CustomizeSearchRender,
+    'Customize Sorting': CustomizeSorting,
+    'Customize Styling': CustomizeStyling,
+    'Customize Toolbar': CustomizeToolbar,
+    'Customize Toolbar Select': CustomizeToolbarSelect,
+    'Data As Objects': DataAsObjects,
+    'expandableRows': ExpandableRows,
+    'fixedHeader': FixedHeader,
+    'Hide Columns Print': HideColumnsPrint,
+    'OnDownload': OnDownload,
+    'OnTableInit': OnTableInit,
+    'resizableColumns': ResizableColumns,
+    'selectableRows': SelectableRows,
+    'serverSide Options': ServerSideOptions,
+    'serverSide Pagination': ServerSidePagination,
+    'Simple': Simple,
+    'Simple No Toolbar': SimpleNoToolbar,
+    'Text Localization': TextLocalization,
+    'Themes': Themes,
+};

examples/expandable-rows/index.js

@@ -102,4 +102,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/fixed-header/index.js

@@ -89,4 +89,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/hide-columns-print/index.js

@@ -91,4 +91,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/on-download/index.js

@@ -118,4 +118,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/on-table-init/index.js

@@ -79,4 +79,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;

examples/resizable-columns/index.js

@@ -67,4 +67,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/selectable-rows/index.js

@@ -105,4 +105,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/serverside-options/index.js

@@ -65,4 +65,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/serverside-pagination/index.js

@@ -103,4 +103,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/simple-no-toolbar/index.js

@@ -30,4 +30,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/simple/index.js

@@ -30,4 +30,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;

examples/text-localization/index.js

@@ -69,4 +69,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;