fix #11

* create document

* CONTRIBUTING

* refine contributing docs

* patch for some propTypes definition missing

CONTRIBUTING.md

@@ -1,17 +1,21 @@
-# Contributing to react-bootstrap-table2
+# Issues
+Before open issue, please make sure your problem/request is open or not. When open issue, please give following information if you can:
 
+* Example code or repo(Please keep it simple and minimal)
+* Reproduce steps
+* `react-bootstrap-table2` version
 
-## Commands
+Anyway, it's welcome to open issue to ask questions or feature request.
 
-### Testing
-In order to run the tests
+# Pull Requests
+Check [here](./docs/development.md) for getting start development.
 
-`yarn test`
+* When you want to implement a new feature, please let us know(via issues).
+* Please run test before opening PR and also remember to write test code.
+* If you PR is trying to fix bug, please describe the bug when PR open.
 
-testing with `watch mode`
+# For the member of react-bootstrap-table2 org
 
-`yarn test:watch`
-
-see the coverage report
-
-`yarn test:coverage`
+* Please convert ticket to issue when ticket move to `Ready` from `Backlog` in project
+* Please write document if any new API/feature/props changed or added
+* Please add story example if any new feature implement

docs/README.md

@@ -0,0 +1,21 @@
+# Documents
+
+## Props on BootstrapTable
+
+### <a name='keyField'>keyField(**required**) - [String]</a>
+`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
+
+### <a name='data'>data(**required**) - [Array]</a>
+Assign your table data via `data` prop. It only accept an Array object.
+
+### <a name='columns'>columns(**required**) - [Object]</a>
+`columns` props accept an Array object, please see [columns definition](./columns.md) for more detail.
+
+### <a name='striped'>striped - [Bool]</a>
+Same as `.table-striped` class for adding zebra-stripes to a table
+### <a name='bordered'>bordered - [Bool]</a>
+Same as `.table-bordered` class for adding borders on all sides of the table and cells
+### <a name='hover'>hover - [Bool]</a>
+Same as `.table-hover` class for adding a hover effect (grey background color) on table rows
+### <a name='condensed'>condensed - [Bool]</a>
+Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half

docs/columns.md

@@ -0,0 +1,161 @@
+# Definition of columns props on BootstrapTable
+
+Available properties in a column object:
+
+* [dataField (**required**)](#dataField)
+* [text (**required**)](#text)
+* [formatter](#formatter)
+* [headerFormatter](#headerFormatter)
+* [formatExtraData](#formatExtraData)
+* [classes](#classes)
+* [style](#style)
+* [title](#title)
+* [events](#events)
+* [align](#align)
+* [headerTitle](#headerTitle)
+* [headerEvents](#headerEvents)
+* [headerAlign](#headerAlign)
+
+Following is a most simplest and basic usage:
+
+```js
+const rows = [ { id: 1, name: '...', price: '102' } ];
+const columns = [ {
+    dataField: id, 
+    text: Production ID
+  }, {
+    dataField: name,
+    text: Production Name
+  }, {
+    dataField: price,
+    text: Production Price
+  }
+];
+```
+
+Let's introduce the definition of column object
+
+## <a name='dataField'>column.dataField (**required**) - [String]</a>
+Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example:
+
+```js
+const row = {
+  id: 'A001',
+  address: {
+    postal: '1234-12335',
+    city: 'Chicago'
+  }
+}
+```
+You can use `dataField` with dot(`.`) to describe nested object:
+
+```js
+dataField: 'address.postal'
+dataField: 'address.city'
+```
+
+## <a name='text'>column.text (**required**) - [String]</a>
+`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
+
+## <a name='formatter'>column.formatter - [Function]</a>
+`formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
+
+* `cell`
+* `row`
+* `rowIndex`
+* [`formatExtraData`](#formatExtraData)
+
+## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
+`headerFormatter` allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+* `column`: column object itself
+* `colIndex`
+
+## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
+It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
+
+## <a name='classes'>column.classes - [String | Function]</a>
+It's availabe to have custom class on table column:
+
+```js
+{
+  // omit...
+  classes: 'id-custom-cell'
+}
+```
+In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take three arguments and a string is expect to return: 
+
+* `cell`
+* `row`
+* `colIndex`
+
+## <a name='style'>column.style - [Object | Function]</a>
+It's availabe to have custom class on table column:
+
+```js
+{
+  // omit...
+  style: { backgroundColor: 'green' }
+}
+```
+`style` like [`column.classes`](#classes), it accept a callback function too and have same arguments: `cell`, `row` and `colIndex`.
+
+## <a name='title'>column.title - [Bool | Function]</a>
+`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column. In addition, you can custom the title via a callback function:
+
+```js
+{
+  // omit...
+  title: (cell, row, colIndex) => {
+    // return custom title here
+  }
+}
+```
+
+## <a name='headerTitle'>column.headerTitle - [Bool | Function]</a>
+`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), it's also availabe to custom via a callback function:
+
+```js
+{
+  // omit...
+  headerTitle: (column, colIndex) => {
+    // column is an object and perform itself
+    // return custom title here
+  }
+}
+```
+
+## <a name='align'>column.align - [String | Function]</a>
+You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. However, `align` also accept a callback function for customizable reason and this function take fore arguments:
+
+* `cell`
+* `row`
+* `colIndex`
+
+## <a name='headerAlign'>column.headerAlign - [String | Function]</a>
+It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column. Also, you can custom the align by a callback function:
+
+```js
+{
+  // omit...
+  headerAlign: (column, colIndex) => {
+    // column is an object and perform itself
+    // return custom title here
+  }
+}
+```
+
+## <a name='events'>column.events - [Object]</a>
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
+
+```js
+{
+  // omit...
+  events: {
+    onClick: e => { ... }
+  }
+}
+```
+
+## <a name='headerEvents'>column.headerEvents - [Object]</a>
+`headerEvents` same as [`column.events`](#events) but this is for header column.

docs/development.md

@@ -0,0 +1,28 @@
+## Development Guide
+
+### Setup
+```bash
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+$ cd react-bootstrap-table
+$ npm install
+$ lerna bootstrap  # ./node_modules/.bin/lerna bootstrap
+```
+### Development
+```bash
+$ npm start
+```
+
+### Launch StoryBook
+We use [storybook](https://storybook.js.org/) to list our examples and it also have hot reload from source code. Sometime, it is also a good entry point to develop.
+
+```bash
+$ cd packages/react-bootstrap-table2-example
+$ npm run storybook
+```
+
+### Testing
+```bash
+$ npm test
+$ npm run test:watch  # for watch mode
+$ npm run test:coverage  # generate coverage report
+```

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -48,7 +48,10 @@ BootstrapTable.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
-  striped: PropTypes.bool
+  striped: PropTypes.bool,
+  bordered: PropTypes.bool,
+  hover: PropTypes.bool,
+  condensed: PropTypes.bool
 };
 
 BootstrapTable.defaultProps = {