From 8a8c2d49643335baafaadb58ec0eb71745c8c249 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Sat, 10 Mar 2018 18:54:59 +0800
Subject: [PATCH] [example] add demo for customized classes and id table

---
 .../examples/basic/customized-id-classes.js   | 48 +++++++++++++++++++
 .../stories/index.js                          |  2 +
 .../stories/stylesheet/base-table/_index.scss |  7 +++
 .../stories/stylesheet/storybook.scss         |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
 create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss

diff --git a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
new file mode 100644
index 0000000..d14c606
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
@@ -0,0 +1,48 @@
+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 id="bar" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <h4> Customized table ID </h4>
+    <BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized table className </h4>
+    <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
+
+    <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 b7444a7..c16dc53 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
 import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
 import NoDataTable from 'examples/basic/no-data-table';
+import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 
 // work on columns
@@ -121,6 +122,7 @@ storiesOf('Basic Table', module)
   .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
   .add('borderless table', () => <BorderlessTable />)
   .add('Indication For Empty Table', () => <NoDataTable />)
+  .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />);
 
 storiesOf('Work on Columns', module)
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss
new file mode 100644
index 0000000..34353eb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss
@@ -0,0 +1,7 @@
+table.foo {
+  background-color: $grey-500;
+}
+
+table#bar {
+  background-color: $light-blue;
+}
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
index cf0a024..c38e02c 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
@@ -3,6 +3,7 @@
 @import "base/github-corner";
 @import "base/code-block";
 
+@import "base-table/index";
 @import "welcome/index";
 @import "columns/index";
 @import "cell-edit/index";