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/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+ <link rel="stylesheet" type="text/css" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow.min.css"></link> 

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>
+);

packages/react-bootstrap-table2-example/examples/columns/column-align-table.js

@@ -0,0 +1,62 @@
+/* eslint no-unused-vars: 0 */
+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',
+  align: 'center'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  align: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) return 'right';
+    return 'left';
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  align: 'center'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  align: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) return 'right';
+    return 'left';
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-class-table.js

@@ -0,0 +1,62 @@
+/* eslint no-unused-vars: 0 */
+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',
+  classes: 'demo-key-row'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  classes: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) return 'demo-row-even';
+    return 'demo-row-odd';
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  classes: 'demo-key-row'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  classes: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) return 'demo-row-even';
+    return 'demo-row-odd';
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-event-table.js

@@ -0,0 +1,60 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+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',
+  events: {
+    onClick: () => alert('Click on Product ID field')
+  }
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <h3>Try to Click on Product ID columns</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  events: {
+    onClick: () => alert('Click on Product ID field')
+  }
+}, {
+  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/columns/column-format-table.js

@@ -0,0 +1,84 @@
+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,
+      onSale: Math.random() >= 0.5
+    });
+  }
+}
+
+addProducts(5);
+
+function priceFormatter(cell, row) {
+  if (row.onSale) {
+    return (
+      <span><strong style={ { color: 'red' } }>$ { cell } NTD(Sales!!)</strong></span>
+    );
+  }
+
+  return (
+    <span>$ { cell } NTD</span>
+  );
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  formatter: priceFormatter
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+function priceFormatter(cell, row) {
+  if (row.onSale) {
+    return (
+      <span>
+        <strong style={ { color: 'red' } }>$ { cell } NTD(Sales!!)</strong>
+      </span>
+    );
+  }
+
+  return (
+    <span>$ { cell } NTD</span>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  formatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js

@@ -0,0 +1,78 @@
+/* eslint no-console: 0 */
+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}`,
+      rank: Math.random() < 0.5 ? 'down' : 'up'
+    });
+  }
+}
+
+addProducts(5);
+
+function rankFormatter(cell, row, rowIndex, formatExtraData) {
+  return (
+    <i className={ formatExtraData[cell] } />
+  );
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'rank',
+  text: 'Rank',
+  formatter: rankFormatter,
+  formatExtraData: {
+    up: 'glyphicon glyphicon-chevron-up',
+    down: 'glyphicon glyphicon-chevron-down'
+  }
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      bordered={ false }
+    />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+function rankFormatter(cell, row, rowIndex, formatExtraData) {
+  return (
+    <i className={ formatExtraData[cell] } />
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'rank',
+  text: 'Rank',
+  formatter: rankFormatter,
+  formatExtraData: {
+    up: 'glyphicon glyphicon-chevron-up',
+    down: 'glyphicon glyphicon-chevron-down'
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-style-table.js

@@ -0,0 +1,80 @@
+/* eslint no-unused-vars: 0 */
+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',
+  style: {
+    fontWeight: 'bold',
+    fontSize: '18px'
+  }
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  style: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) {
+      return {
+        backgroundColor: '#bbe'
+      };
+    }
+    return {
+      backgroundColor: '#fea'
+    };
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  style: {
+    fontWeight: 'bold',
+    fontSize: '18px'
+  }
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  style: (cell, row, colIndex) => {
+    if (row.id % 2 === 0) {
+      return {
+        backgroundColor: '#bbe'
+      };
+    }
+    return {
+      backgroundColor: '#fea'
+    };
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-title-table.js

@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+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',
+  title: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  title: (cell, row, colIndex) => `this is custom title for ${cell}`
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  title: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  title: (cell, row, colIndex) => \`this is custom title for \${cell}\`
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js

@@ -0,0 +1,66 @@
+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: `User Name ${id}`,
+      phone: 21009831 + i,
+      address: {
+        city: 'New York',
+        postCode: '1111-4512'
+      }
+    });
+  }
+}
+
+addProducts(5);
+
+const columns = [{
+  dataField: 'id',
+  text: 'User ID'
+}, {
+  dataField: 'name',
+  text: 'User Name'
+}, {
+  dataField: 'phone',
+  text: 'Phone'
+}, {
+  dataField: 'address.city',
+  text: 'City'
+}, {
+  dataField: 'address.postCode',
+  text: 'PostCode'
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`const columns = [{
+  dataField: 'id',
+  text: 'User ID'
+}, {
+  dataField: 'name',
+  text: 'User Name'
+}, {
+  dataField: 'phone',
+  text: 'Phone'
+}, {
+  dataField: 'address.city',
+  text: 'City'
+}, {
+  dataField: 'address.postCode',
+  text: 'PostCode'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js

@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+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',
+  headerAlign: 'center'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  headerAlign: (column, colIndex) => 'right'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  headerAlign: 'center'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  headerAlign: (column, colIndex) => 'right'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js

@@ -0,0 +1,60 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+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',
+  headerEvents: {
+    onClick: () => alert('Click on Product ID header column')
+  }
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <h3>Try to Click on Product ID header column</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  events: {
+    onClick: () => alert('Click on Product ID header column')
+  }
+}, {
+  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/header-columns/column-format-table.js

@@ -0,0 +1,71 @@
+/* eslint no-unused-vars: 0 */
+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,
+      onSale: Math.random() >= 0.5
+    });
+  }
+}
+
+addProducts(5);
+
+function priceFormatter(column, colIndex) {
+  return (
+    <h5><strong>$$ { column.text } $$</strong></h5>
+  );
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  headerFormatter: priceFormatter
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+function priceFormatter(column, colIndex) {
+  return (
+    <h5><strong>$$ { column.text } $$</strong></h5>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  headerFormatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js

@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+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',
+  headerTitle: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  headerTitle: (column, colIndex) => `this is custom title for ${column.text}`
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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',
+  headerTitle: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  headerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -2,15 +2,56 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
+// welcome
 import Welcome from 'examples/welcome';
+// basic
 import BasicTable from 'examples/basic';
+import BorderlessTable from 'examples/basic/borderless-table';
+import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
+
+// work on columns
+import NestedDataTable from 'examples/columns/nested-data-table';
+import ColumnFormatTable from 'examples/columns/column-format-table';
+import ColumnFormatExtraDataTable from 'examples/columns/column-format-with-extra-data-table';
+import ColumnClassTable from 'examples/columns/column-class-table';
+import ColumnStyleTable from 'examples/columns/column-style-table';
+import ColumnAlignTable from 'examples/columns/column-align-table';
+import ColumnTitleTable from 'examples/columns/column-title-table';
+import ColumnEventTable from 'examples/columns/column-event-table';
+
+// work on header columns
+import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
+import HeaderColumnAlignTable from 'examples/header-columns/column-align-table';
+import HeaderColumnTitleTable from 'examples/header-columns/column-title-table';
+import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'stories/stylesheet/storybook.scss';
 
+// import { action } from '@storybook/addon-actions';
+
+// action('hello');
 storiesOf('Welcome', module)
   .add('react bootstrap table 2 ', () => <Welcome />);
 
 storiesOf('Basic Table', module)
-  .add('default', () => <BasicTable />);
+  .add('basic table', () => <BasicTable />)
+  .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
+  .add('borderless table', () => <BorderlessTable />);
+
+storiesOf('Work on Columns', module)
+  .add('Display Nested Data', () => <NestedDataTable />)
+  .add('Column Formatter', () => <ColumnFormatTable />)
+  .add('Column Formatter with Custom Data', () => <ColumnFormatExtraDataTable />)
+  .add('Column Align', () => <ColumnAlignTable />)
+  .add('Column Title', () => <ColumnTitleTable />)
+  .add('Column Event', () => <ColumnEventTable />)
+  .add('Customize Column Class', () => <ColumnClassTable />)
+  .add('Customize Column Style', () => <ColumnStyleTable />);
+
+storiesOf('Work on Header Columns', module)
+  .add('Column Formatter', () => <HeaderColumnFormatTable />)
+  .add('Column Align', () => <HeaderColumnAlignTable />)
+  .add('Column Title', () => <HeaderColumnTitleTable />)
+  .add('Column Event', () => <HeaderColumnEventTable />);

packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss

@@ -0,0 +1,12 @@
+.demo-key-row {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.demo-row-even {
+  background-color: #bbe
+}
+
+.demo-row-odd {
+  background-color: #fea
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -3,3 +3,4 @@
 @import "base/misc";
 
 @import "welcome/index";
+@import "columns/index";

packages/react-bootstrap-table2-example/stories/stylesheet/tomorrow.min.css

@@ -0,0 +1,2 @@
+/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
+.prettyprint{background:#fff;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}