fix #34

* add basic stories

* add google-prettify

* add google-code-prettify-theme

* add code example for each story

* add column stories

* add header column stories

packages/react-bootstrap-table2-example/examples/basic/borderless-table.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { BootstrapTable } from 'react-bootstrap-table2';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i += 1) {
+    const id = startId + i;
+    products.push({
+      id,
+      name: `Item name ${id}`,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      bordered={ false }
+    />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  bordered={ false }
+/>
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/basic/index.js

@@ -11,11 +11,7 @@ function addProducts(quantity) {
     products.push({
       id,
       name: `Item name ${id}`,
-      price: 2100 + i,
-      nest: {
-        address: 'Address 1',
-        postcal: '0922-1234'
-      }
+      price: 2100 + i
     });
   }
 }
@@ -24,30 +20,31 @@ addProducts(5);
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID',
-  style: {
-    backgroundColor: 'red'
-  },
-  headerTitle: (column, colIndex) => 'yes~~~ oh', // eslint-disable-line no-unused-vars
-  classes: 'my-xxx'
+  text: 'Product ID'
 }, {
   dataField: 'name',
-  text: 'Product Name',
-  headerTitle: true,
-  formatter: (cell, row) =>
-    (<h3>{ cell }::: ${ row.price }</h3>)
+  text: 'Product Name'
 }, {
   dataField: 'price',
-  text: 'Product Price',
-  style: (cell, row, colIndex) => ({ // eslint-disable-line no-unused-vars
-    backgroundColor: 'blue'
-  })
-}, {
-  dataField: 'nest.address',
-  text: 'Address'
-}, {
-  dataField: 'nest.postcal',
-  text: 'Postal'
+  text: 'Product Price'
 }];
 
-export default () => <BootstrapTable keyField="id" data={ products } columns={ columns } />;
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { BootstrapTable } from 'react-bootstrap-table2';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i += 1) {
+    const id = startId + i;
+    products.push({
+      id,
+      name: `Item name ${id}`,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      striped
+      hover
+      condensed
+    />
+    <pre className="prettyprint lang-html"><code className="language-html">{`
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  striped
+  hover
+  condensed
+/>
+    `}
+    </code></pre>
+  </div>
+);