Update examples

Author: cheton

examples/Section.styl

@@ -4,6 +4,7 @@
     position: relative;
     z-index: 1;
     transition: height .3s ease;
+    overflow-y: auto;
 }
 .section:last-child {
     margin-bottom: 20px;

examples/index.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Navbar from './Navbar';
 import Bordered from './tables/Bordered';
-import AutoFitOrJustified from './tables/AutoFitOrJustified';
+import AutoFit from './tables/AutoFit';
+import Justified from './tables/Justified';
 import Displays from './tables/Displays';
 import FixedColumns from './tables/FixedColumns';
 import Pagination from './tables/Pagination';
@@ -21,7 +22,8 @@ const App = (props) => {
             <div className="container-fluid" style={{ padding: '20px 20px 0' }}>
                 <div className="row">
                     <Bordered />
-                    <AutoFitOrJustified />
+                    <AutoFit />
+                    <Justified />
                     <Displays />
                     <FixedColumns />
                     <Pagination />

examples/tables/AutoFitOrJustified.jsx renamed to examples/tables/AutoFit.jsx

@@ -52,10 +52,9 @@ export default class extends Component {
 
         return (
             <div className="col-md-12">
-                <Section className="row-sm-20">
-                    <h3>AutoFit and Justified</h3>
+                <Section className="row-sm-10">
+                    <h3>AutoFit</h3>
                     <div className={styles.sectionGroup}>
-                        <h5>AutoFit</h5>
                         <Table
                             bordered={true}
                             hoverable={false}
@@ -65,17 +64,6 @@ export default class extends Component {
                             data={data}
                         />
                     </div>
-                    <div className={styles.sectionGroup}>
-                        <h5>Justified</h5>
-                        <Table
-                            bordered={false}
-                            hoverable={false}
-                            justified={true}
-                            rowKey={record => record.id}
-                            columns={columns}
-                            data={data}
-                        />
-                    </div>
                 </Section>
             </div>
         );

examples/tables/Justified.jsx

@@ -0,0 +1,67 @@
+import 'trendmicro-ui/dist/css/trendmicro-ui.css';
+import React, { Component } from 'react';
+import Table from '../../src';
+import Section from '../Section';
+import styles from '../index.styl';
+
+const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.';
+//Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+export default class extends Component {
+    columns = [
+        {
+            title: 'Event Type',
+            render: (value, row, index) => {
+                return row.eventType;
+            }
+        },
+        {
+            title: 'Affected Devices',
+            render: (value, row, index) => {
+                return row.affectedDevices;
+            }
+        },
+        {
+            title: 'Detections',
+            render: (value, row, index) => {
+                return row.detections;
+            }
+        },
+        {
+            title: 'Description',
+            dataKey: 'description'
+        }
+    ];
+
+    data = [
+        { id: 1, eventType: 'Virus/Malware', affectedDevices: 20, detections: 634, description: ipsum },
+        { id: 2, eventType: 'Spyware/Grayware', affectedDevices: 20, detections: 634, description: ipsum },
+        { id: 3, eventType: 'URL Filtering', affectedDevices: 15, detections: 598, description: ipsum },
+        { id: 4, eventType: 'Web Reputation', affectedDevices: 15, detections: 598, description: ipsum },
+        { id: 5, eventType: 'Network Virus', affectedDevices: 15, detections: 497, description: ipsum },
+        { id: 6, eventType: 'Application Control', affectedDevices: 0, detections: 0, description: ipsum, width: '40%' }
+    ];
+
+    render() {
+        const columns = this.columns;
+        const data = this.data;
+
+        return (
+            <div className="col-md-12">
+                <Section className="row-sm-10">
+                    <h3>Justified</h3>
+                    <div className={styles.sectionGroup}>
+                        <Table
+                            bordered={false}
+                            hoverable={false}
+                            justified={true}
+                            rowKey={record => record.id}
+                            columns={columns}
+                            data={data}
+                        />
+                    </div>
+                </Section>
+            </div>
+        );
+    }
+}