add #604 example

Author: AllenFang

examples/js/column-format/demo.js

@@ -3,6 +3,7 @@ import React from 'react';
 import HtmlColumnFormatTable from './html-column-format-table';
 import ReactColumnFormatTable from './react-column-format-table';
 import ExtraDataColumnFormatTable from './extra-data-column-format-table';
+import GetRowIndexTable from './get-row-index-table';
 
 class Demo extends React.Component {
   render() {
@@ -35,6 +36,16 @@ class Demo extends React.Component {
 							</div>
 						</div>
 					</div>
+          <div className='col-md-offset-1 col-md-8'>
+						<div className='panel panel-default'>
+							<div className='panel-heading'>Get Row Index Example</div>
+              <h5><b>Use the <code>fourth</code> argument to get the row index</b>. Check the browser console</h5>
+							<div className='panel-body'>
+								<h5>Source in /examples/js/column-format/get-row-index-table.js</h5>
+								<GetRowIndexTable />
+							</div>
+						</div>
+					</div>
 				</div>
     );
   }

examples/js/column-format/get-row-index-table.js

@@ -0,0 +1,49 @@
+/* eslint max-len: 0 */
+/* eslint no-unused-vars: 0*/
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const jobs = [];
+
+function addProducts(quantity) {
+  const startId = jobs.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    jobs.push({
+      id: id,
+      name: 'Application_Name_ ' + id,
+      active: i % 2 === 0 ? true : false
+    });
+  }
+}
+
+addProducts(5);
+
+
+class ActiveFormatter extends React.Component {
+  render() {
+    return (
+      <input type='checkbox' checked={ this.props.active }/>
+    );
+  }
+}
+
+function activeFormatter(cell, row, enumObject, index) {
+  console.log(`The row index: ${index}`);
+  return (
+    <ActiveFormatter active={ cell } />
+  );
+}
+
+export default class GetRowIndexTable extends React.Component {
+  render() {
+    return (
+      <BootstrapTable data={ jobs }>
+          <TableHeaderColumn dataField='id' isKey={ true }>Job ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Job Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='active' dataFormat={ activeFormatter }>Active</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}