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

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