Implement column title (#22)

fix #21

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

@@ -3,8 +3,64 @@ import ReactDom from 'react-dom';
 
 import { BootstrapTable } from 'react-bootstrap-table2';
 
-const data = [1, 2, 3, 4];
+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,
+      nest: {
+        address: 'Address 1',
+        postcal: '0922-1234'
+      }
+    });
+  }
+}
+
+addProducts(5);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  style: {
+    backgroundColor: 'red'
+  },
+  headerTitle: (column, colIndex) => {
+    console.log(column);
+    console.log(colIndex);
+    return 'yes~~~ oh';
+  },
+  classes: 'my-xxx'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  headerTitle: true,
+  formatter: (cell, row) =>
+    (<h3>{ cell }::: ${ row.price }</h3>)
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  style: (cell, row, colIndex) => {
+    console.log(cell);
+    console.log(row);
+    console.log(colIndex);
+    return {
+      backgroundColor: 'blue'
+    };
+  }
+}, {
+  dataField: 'nest.address',
+  text: 'Address'
+}, {
+  dataField: 'nest.postcal',
+  text: 'Postal'
+}];
+
 
 ReactDom.render(
-  <BootstrapTable data={ data } />,
+  <BootstrapTable keyField="id" data={ products } columns={ columns } />,
   document.getElementById('example'));