Development/redefine cell callback (#56)

docs/columns.md

@@ -2,23 +2,26 @@
 
 Available properties in a column object:
 
+#### Required
 * [dataField (**required**)](#dataField)
 * [text (**required**)](#text)
+
+#### Optional
 * [hidden](#hidden)
 * [formatter](#formatter)
-* [headerFormatter](#headerFormatter)
 * [formatExtraData](#formatExtraData)
+* [headerFormatter](#headerFormatter)
 * [classes](#classes)
 * [style](#style)
 * [title](#title)
 * [events](#events)
 * [align](#align)
 * [attrs](#attrs)
+* [headerClasses](#headerClasses)
+* [headerStyle](#headerStyle)
 * [headerTitle](#headerTitle)
 * [headerEvents](#headerEvents)
 * [headerAlign](#headerAlign)
-* [headerClasses](#headerClasses)
-* [headerStyle](#headerStyle)
 * [headerAttrs](#headerAttrs)
 
 Following is a most simplest and basic usage:
@@ -91,36 +94,79 @@ It's availabe to have custom class on table column:
  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: 
+In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return: 
 
-* `cell`
-* `row`
-* `colIndex`
+
+```js
+{
+ classes: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element class.
 
 ## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
-It's availabe to have customized class on table header column:
+It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
 
 ```js
 {
  // omit...
  headerClasses: 'id-custom-cell'
 }
 ```
-In addition, similar to [`column.classes`](#classes), `headerClasses` also accept a callback function which have more power to custom the css class on header column. This callback function take two arguments and a string is expect to return: 
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
 
-* `column`
-* `colIndex`
+```js
+{
+ headerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerClasses.
 
 ## <a name='style'>column.style - [Object | Function]</a>
-It's availabe to have custom class on table column:
+It's availabe to have custom style 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`.
+
+In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return: 
+
+
+```js
+{
+ style: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element style.
+
 
 ## <a name='headerStyle'>column.headerStyle - [Object | Function]</a>
 It's availabe to have customized inline-style on table header column:
@@ -131,42 +177,104 @@ It's availabe to have customized inline-style on table header column:
  headerStyle: { backgroundColor: 'green' }
 }
 ```
-`headerStyle` like [`column.headerClasses`](#headerClasses), it accept a callback function as well and have same arguments: `column` and `colIndex`.
+
+Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
+
+```js
+{
+ headerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element headerStyle.
+
 
 ## <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:
+`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 and take `cell content` as default value. Additionally, you could customize title via a callback. It takes `4` arguments and a `String` is expect to return: 
+
 
 ```js
 {
  // omit...
- title: (cell, row, colIndex) => {
- // return custom title here
- }
+ title: function callback(cell, row, rowIndex, colIndex) { ... }
+ // return custom title here
 }
 ```
 
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element title.
+
 ## <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:
+`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
 
 ```js
 {
  // omit...
- headerTitle: (column, colIndex) => {
- // column is an object and perform itself
- // return custom title here
- }
+ headerTitle: true
+}
+```
+
+It's also availabe to custom via a callback function:
+```js
+{
+ headerTitle: function callback(column, colIndex) { ... }
 }
 ```
 
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerTitle.
+
 ## <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:
+You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. 
 
-* `cell`
-* `row`
-* `colIndex`
+Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return: 
+
+```js
+{
+ // omit...
+ align: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element text alignment.
 
 ## <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:
+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. 
+
+```js
+{
+ // omit...
+ headerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
 
 ```js
 {
@@ -177,6 +285,14 @@ It's almost same as [`column.align`](#align), but it's for the [CSS text-align](
  }
 }
 ```
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerAlign.
+
 
 ## <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:
@@ -193,17 +309,44 @@ You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattribut
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 
+```js
+{
+ // omit...
+ headerEvents: {
+ onClick: e => { ... }
+ }
+}
+```
+
 ## <a name='attrs'>column.attrs - [Object | Function]</a>
-Via `attrs` property, You can costomize table column [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) which allow user to configure the elements or adjust their behavior. It takes `Object` and `callback function` is also acceptable.
+Via `attrs` property, You can customize table column [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) which allow user to configure the elements or adjust their behavior.
 
 ```js
 {
  // omit...
- attrs: (cell, row, colIndex) => ({
- // return customized HTML attribute here
- })
+ attrs: {
+ title: 'bar',
+ 'data-test': 'foo'
+ }
 }
 ```
+Not only `Object`, `callback function` is also acceptable. It takes `4` arguments and an `Object` is expect to return: 
+
+```js
+{
+ attrs: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element HTML attributes.
 
 #### * Caution
 
@@ -218,7 +361,18 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
 ```
 
 ## <a name='headerAttrs'>column.headerAttrs - [Object | Function]</a>
-`headerAttrs` is similiar to [`column.attrs`](#attrs) but it's for header column.
+`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column. 
+```js
+{
+ // omit...
+ headerAttrs: {
+ title: 'bar',
+ 'data-test': 'foo'
+ }
+}
+```
+
+Additionally, customize the header attributes by a `2-arguments` callback function:
 
 ```js
 {
@@ -228,3 +382,14 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
  })
 }
 ```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element headerAttrs.
+
+#### * Caution
+Same as [column.attrs](#attrs), it has lower priority and will be overwrited when other props related to HTML attributes were given.

packages/react-bootstrap-table2-example/examples/columns/column-align-table.js

@@ -14,8 +14,8 @@ const columns = [{
 }, {
  dataField: 'name',
  text: 'Product Name',
- align: (cell, row, colIndex) => {
- if (row.id % 2 === 0) return 'right';
+ align: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'right';
  return 'left';
  }
 }, {
@@ -31,8 +31,8 @@ const columns = [{
 }, {
  dataField: 'name',
  text: 'Product Name',
- align: (cell, row, colIndex) => {
- if (row.id % 2 === 0) return 'right';
+ align: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'right';
  return 'left';
  }
 }, {

packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js

@@ -14,7 +14,7 @@ const columns = [{
 }, {
  dataField: 'name',
  text: 'Product Name',
- attrs: (cell, row, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
+ attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': `customized data ${rowIndex}` })
 }, {
  dataField: 'price',
  text: 'Product Price'
@@ -28,7 +28,7 @@ const columns = [{
 }, {
  dataField: 'name',
  text: 'Product Name',
- attrs: (cell, row, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
+ attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': \`customized data \${rowIndex}\` })
 }, {
  dataField: 'price',
  text: 'Product Price'