Merge pull request #1 from AllenFang/master

merge to my fork

README.md

@@ -13,57 +13,60 @@ In addition, reactbsTable support these features:
 * pagination
 * row selection
 * column filter
-* cell edit
+* cell edit with multi type editor
 * Insert & Delete Row
+* row and column style customize
 * Search
 
 You can see the [home page](http://allenfang.github.io/react-bootstrap-table/index.html). and example is on [here](http://allenfang.github.io/react-bootstrap-table/example.html).
 
-### Release Notes
-v0.8.2 support hidden column.
-
-v0.8.0 Update data on the fly.
-
-v0.7.2 react-bootstrap-table supported search on table.
-
-v0.7.1 react-bootstrap-table supported column filter on table.
-
-v0.6.0, react-bootstrap-table supported insert and delete row on table.
-
-After v0.5.4, the <code>isKey</code> attribute is required by <code>TableHeaderColumn</code> for specifying which column is unique. You can see the example in th Usage section or [here](http://allenfang.github.io/react-bootstrap-table/start.html)
+### See react-bootstrap-table examples
+```
+$ git clone https://github.com/AllenFang/react-bootstrap-table.git
+$ cd react-bootstrap-table
+$ npm install
+$ gulp example-server #after start, open browser and go to http://localhost:3004/example-list.html
+```
 
 ### Development
-reactbsTable dependencies on react 0.13.x and Bootstrap 3
-
-reactbsTable written by ES6 and use gulp and browserify to build
+react-bootstrap-table dependencies on react 0.13.x and Bootstrap 3 written by ES6 and use gulp and browserify to build
 
 Use following command to prepare development
 ```
 $ git clone https://github.com/AllenFang/react-bootstrap-table.git
 $ cd react-bootstrap-table
 $ npm install
 ```
-Use gulp to build the reactbsTable
+Use gulp to build the react-bootstrap-table
 ```
 $ gulp dev  #for development
 $ gulp prod #for production
 ```
 
 ### Usage
-Download reactbsTable first.
+Download react-bootstrap-table first.
 ```
 npm install react-bootstrap-table --save
 ```
-Use reactbsTable in your react app
+Use react-bootstrap-table in your react app
 
-You can import reactbsTable in module(CommonJS/AMD)
+You can import react-bootstrap-table in two way, as following:
+#### module(CommonJS/AMD)
 ```
 import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';  // in ECMAScript 6
 // or
 var ReactBSTable = require("react-bootstrap-table");  
 var BootstrapTable = ReactBSTable.BootstrapTable;
 var TableHeaderColumn = ReactBSTable.TableHeaderColumn;
 ```
+#### Browser global(window object)
+```
+<script src="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" />
+<script>
+  var ReactBsTable = window.BootstrapTable;
+<script/>
+```
+
 Finally, you need import the css file to your app
 ```
 <link rel="stylesheet" href="./css/react-bootstrap-table.min.css">
@@ -134,6 +137,7 @@ Use ```deleteRow``` to enable the delete row on table.</br>
 Use ```columnFilter``` to enable the column filter on table.</br>
 Use ```search``` to enable the search on table.</br>
 Use ```searchPlaceholder``` to change the placeholder text in the search field.</br>
+Use  ```trClassName``` to set tr row class,accept string or function. if use function,will pass rowData and rowIndex params.</br>
 Use ```selectRow``` to enable the row selection on table, this attribute accept an object which contain these properties.</br>
 - ```mode```(required): radio/checkbox, to specify the selection is single or multiple.</br>
 - ```clickToSelect```(optional): if true, click on row will trigger row selection, default is false.</br>
@@ -165,7 +169,17 @@ Use ```dataAlign``` to set align in column. Available value is left, center, rig
 Use ```dataSort``` to enable the sorting in column. Default value is false(disabled).</br>
 Use ```dataFormat``` to customize this column.Must give it as a function.</br>
 Use ```hidden``` to enable hidden column.</br>
-Use ```className``` to add custom css class for table column</br>
+Use ```className``` to add custom css class for table header column,accept string or function. if use function,will pass cellData,rowData,rowIndex,columnIndex for params</br>
+Use ```columnClassName``` to add custom css class for table body column, accept string or function. If use function will pass fieldValue,row,rowIdx,colIdx</br>
+Use  ```editable ``` to specify column editable,accept boolean or input type string or config object or function, default is true. This attribute only works on cellEdit be setted in <BootstrapTable> certainly. if use function,will pass cellData,rowData,rowIndex,columnIndex for params, and expect return the config object or input type string</br>
+editable config object include these properties:</br>
+- ```type ```(required): indicate input type. support type is:select,textarea,text and password...
+- ```style ```(optional):input style,react foramt
+- ```className ```(optional):input class
+- ```datas ```(required): only required on type is select, array of data for option in select
+-  ```cols ```(optional):only use on type is textarea, number for textarea cols
+-   ```rows ```(optional):only use on type is textarea, number for textarea rows
+
 Use ```sortFunc``` to customize your sort function.</br>
 
 #### About TableDataSet

css/react-bootstrap-table.css

@@ -1,8 +1,11 @@
+/*editor error animate*/
+@import "../node_modules/toastr/build/toastr.min.css";
+
 .react-bs-table{
   margin-bottom: 37px;
 }
 .react-bs-table .table-header{
-  height: 37px;
+  height: 42px;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: rgb(221, 221, 221);
@@ -44,3 +47,103 @@
 .react-bs-container .tool-bar{
   margin-bottom: 5px
 }
+/*inline editor default style*/
+.react-bs-table .form-control.editor{
+  width:100%;
+  top:0;
+  left:0;
+  height: 100%;
+  position: absolute;
+}
+
+.react-bs-table  .textarea-save-btn{
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  top: -21px;
+}
+/*error tip style*/
+.animated {
+  animation-fill-mode: both;
+}
+
+.animated.bounceIn,
+.animated.bounceOut{
+  animation-duration: .75s;
+}
+.animated.shake{
+  animation-duration:.3s;
+}
+@keyframes shake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,  50%,  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  30%, 70%{
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  animation-name: shake;
+}
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  animation-name: bounceIn;
+}
+
+@keyframes bounceOut {
+  20% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  animation-name: bounceOut;
+}