From 166affc4c19641dedf61bc6f690b6148839ee1c5 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 14 Oct 2018 14:41:29 +0800
Subject: [PATCH]  add story for #598

---
 .../examples/basic/tabindex-column.js         | 54 +++++++++++++++++++
 .../stories/index.js                          |  4 +-
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js

diff --git a/packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js b/packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js
new file mode 100644
index 0000000..144cdce
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ { mode: 'checkbox' } }
+  tabIndexCell
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ { mode: 'checkbox' } }
+      tabIndexCell
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 3dbcede..519542e 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -14,6 +14,7 @@ import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 import LargeTable from 'examples/basic/large-table';
 import ExposedAPITable from 'examples/basic/exposed-function';
+import TabIndexCellTable from 'examples/basic/tabindex-column';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
@@ -195,7 +196,8 @@ storiesOf('Basic Table', module)
   .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />)
   .add('Large Table', () => <LargeTable />)
-  .add('Exposed API', () => <ExposedAPITable />);
+  .add('Exposed API', () => <ExposedAPITable />)
+  .add('Enable tabIndex on Cell', () => <TabIndexCellTable />);
 
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))