Added sample react-table in component, routes, navigation of CoreUI-Template.

Author: jacobkuriala

package.json

@@ -26,6 +26,7 @@
     "react-dom": "^16.3.2",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
+    "react-table": "^6.8.2",
     "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
   },

src/_nav.js

@@ -9,6 +9,25 @@ export default {
         text: 'NEW',
       },
     },
+    {
+      title: true,
+      name: 'Testing React-Table',
+      wrapper: {            // optional wrapper object
+        element: '',        // required valid HTML5 element tag
+        attributes: {}        // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
+      },
+      class: ''             // optional class names space delimited list for title item ex: "text-center"
+    },
+    {
+      name: 'CoreUI Table',
+      url: '/exampletables',
+      icon: 'fa fa-table',
+    },
+    {
+      name: 'Test1',
+      url: '/reacttable',
+      icon: 'fa fa-table',
+    },
     {
       title: true,
       name: 'Theme',

src/routes.js

@@ -31,6 +31,7 @@ import {
   Tooltips,
   Typography,
   Widgets,
+  ReactTableExample
 } from './views';
 import Full from './containers/Full';
 
@@ -74,6 +75,8 @@ const routes = [
   { path: '/notifications/modals', name: 'Modals', component: Modals },
   { path: '/widgets', name: 'Widgets', component: Widgets },
   { path: '/charts', name: 'Charts', component: Charts },
+  { path: '/exampletables', name: 'Sample Core UI Tables', component: Tables },
+  { path: '/reacttable', name: 'React Table', component: ReactTableExample }
 ];
 
 export default routes;

src/views/ReactTableExample/ReactTableExample.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
+
+class ReactTableExample extends Component {
+  render() {
+    const data = [{
+      name: 'Tanner Linsley',
+      age: 26,
+      friend: {
+        name: 'Jason Maurer',
+        age: 23,
+      }
+    }];
+
+    const columns = [{
+      Header: 'Name',
+      accessor: 'name' // String-based value accessors!
+    }, {
+      Header: 'Age',
+      accessor: 'age',
+      Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
+    }, {
+      id: 'friendName', // Required because our accessor is not a string
+      Header: 'Friend Name',
+      accessor: d => d.friend.name // Custom value accessors!
+    }, {
+      Header: props => <span>Friend Age</span>, // Custom header components!
+      accessor: 'friend.age'
+    }];
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12">
+            <div className="table-responsive">
+              <ReactTable
+                data={data}
+                columns={columns}
+              />
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+    );
+  }
+}
+
+export default ReactTableExample;

src/views/ReactTableExample/ReactTableExample.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTable from './ReactTableExample';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<ReactTable />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/views/ReactTableExample/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ReactTableExample",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ReactTableExample.js"
+}

src/views/index.js

@@ -26,6 +26,7 @@ import { Alerts, Badges, Modals } from './Notifications';
 import { Login, Page404, Page500, Register } from './Pages';
 import { Colors, Typography } from './Theme';
 import Widgets from './Widgets';
+import ReactTableExample from './ReactTableExample';
 
 export {
   Badges,
@@ -64,5 +65,6 @@ export {
   Cards,
   Breadcrumbs,
   Paginations,
+  ReactTableExample,
 };