mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-11 19:50:17 +00:00
README.md
This commit is contained in:
AllenFang
@@ -1,25 +1,12 @@
|
||||
# react-bootstrap-table2
|
||||
Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
|
||||
|
||||
## The problems/features I want to solve
|
||||
* Performance
|
||||
* Fully compatiable with bootstrap 3 and 4(`react-bootstrap-table@4.0.0` already done)
|
||||
* Clean Code and Testing
|
||||
* Decrease the size of bundled file
|
||||
* **Split module/functionality from core module, make core module more lightweight**
|
||||
* Use [`storybook`](https://github.com/storybooks/storybook) to build examples
|
||||
* Support the aggregation(summary) view
|
||||
* Support the table footer
|
||||
* Support column/row span on header and body
|
||||
* Support sticky header
|
||||
* Support table section([react-bootstrap-table#721](https://github.com/AllenFang/react-bootstrap-table/pull/721))
|
||||
* Handle events well
|
||||
* Fix unalign issues
|
||||
* Make **stateless** table more easy to use(`react-bootstrap-table` alread have `remote` mode but have some bugs)
|
||||
* Customizable table
|
||||
* Support the nested data([react-bootstrap-table#50](https://github.com/AllenFang/react-bootstrap-table/issues/50◊))
|
||||
* Consider to support column resize
|
||||
* Consider to make animation on `react-bootstrap-table2` more easy
|
||||
## Development
|
||||
Please check [development guide](./docs/development.md).
|
||||
|
||||
## Usage
|
||||
See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
|
||||
|
||||
## Roadmap
|
||||
See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
|
||||
|
||||
## The feature may lost on react-bootstrap-table
|
||||
* Have a great chance that I don't support the vertical scrollbar on table
|
||||
+5
-5
@@ -59,20 +59,20 @@ A special case for remote pagination:
|
||||
remote={ { pagination: true, filter: false, sort: false } }
|
||||
```
|
||||
|
||||
In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort`) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
|
||||
There is a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
|
||||
|
||||
### <a name='loading'>loading - [Bool]</a>
|
||||
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
|
||||
When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
|
||||
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
|
||||
|
||||
### <a name='overlay'>overlay - [Function]</a>
|
||||
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you:
|
||||
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
|
||||
|
||||
```sh
|
||||
$ npm install react-bootstrap-table-overlay
|
||||
$ npm install react-bootstrap-table2-overlay
|
||||
```
|
||||
```js
|
||||
import overlayFactory from 'react-bootstrap-table-overlay';
|
||||
import overlayFactory from 'react-bootstrap-table2-overlay';
|
||||
|
||||
<BootstrapTable
|
||||
data={ data }
|
||||
|
||||
+2
-2
@@ -67,8 +67,8 @@ const cellEdit = {
|
||||
```
|
||||
|
||||
### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
|
||||
This prop is not often used. Only used when you keep the error message in your application state and also handle the cell editing on remote mode.
|
||||
This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote mode.
|
||||
|
||||
### <a name='onErrorMessageDisappear'>cellEdit.onErrorMessageDisappear - [Function]</a>
|
||||
This callback function will be called when error message discard.
|
||||
This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.
|
||||
|
||||
|
||||
+36
-15
@@ -73,7 +73,7 @@ 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)
|
||||
`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
|
||||
|
||||
## <a name='hidden'>column.hidden - [Bool]</a>
|
||||
`hidden` allow you to hide column when `true` given.
|
||||
@@ -89,9 +89,9 @@ dataField: 'address.city'
|
||||
## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
|
||||
`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
|
||||
|
||||
* `column`: column object itself
|
||||
* `colIndex`
|
||||
* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
|
||||
* `column`: current column object itself
|
||||
* `colIndex`: index of current column
|
||||
* `components`: an object which contain all of other react element, like sort caret or filter etc.
|
||||
|
||||
The third argument: `components` have following specified properties:
|
||||
```js
|
||||
@@ -131,7 +131,7 @@ 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 `4` 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 expected to return::
|
||||
|
||||
|
||||
```js
|
||||
@@ -148,7 +148,7 @@ In addition, `classes` also accept a callback function which have more power to
|
||||
|
||||
**Return value**
|
||||
|
||||
A new `String` will be the result of element class.
|
||||
A new `String` will be the result as element class.
|
||||
|
||||
## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
|
||||
It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
|
||||
@@ -185,7 +185,7 @@ It's availabe to have custom style on table column:
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
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
|
||||
@@ -215,7 +215,7 @@ It's availabe to have customized inline-style on table header column:
|
||||
}
|
||||
```
|
||||
|
||||
Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
|
||||
Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -233,7 +233,7 @@ 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 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:
|
||||
`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
|
||||
@@ -282,7 +282,7 @@ 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.
|
||||
|
||||
Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return:
|
||||
Besides, `align` also accept a callback function for dynamically setting text align. It takes **4** arguments and a `String` is expect to return:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -385,14 +385,14 @@ Not only `Object`, `callback function` is also acceptable. It takes `4` argument
|
||||
|
||||
A new `Object` will be the result of element HTML attributes.
|
||||
|
||||
#### * Caution
|
||||
> Caution:
|
||||
|
||||
If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
|
||||
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
|
||||
|
||||
```js
|
||||
{
|
||||
// omit...
|
||||
title: true, // it will be chosen.
|
||||
title: true, // get higher priority
|
||||
attrs: { title: 'test' }
|
||||
}
|
||||
```
|
||||
@@ -409,7 +409,7 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
|
||||
}
|
||||
```
|
||||
|
||||
Additionally, customize the header attributes by a `2-arguments` callback function:
|
||||
Additionally, customize the header attributes by a **2** arguments callback function:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -556,4 +556,25 @@ import { textFilter } from 'react-bootstrap-table2-filter';
|
||||
}
|
||||
```
|
||||
|
||||
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
|
||||
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
|
||||
|
||||
## <a name='filterValue'>column.filterValue - [Function]</a>
|
||||
Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filterd:
|
||||
|
||||
**Parameters**
|
||||
* `cell`: The value of current cell.
|
||||
* `row`: The value of current row.
|
||||
|
||||
**Return value**
|
||||
|
||||
A final `String` value you want to be filtered.
|
||||
|
||||
```js
|
||||
// omit...
|
||||
{
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
filter: textFilter(),
|
||||
filterValue: (cell, row) => owners[cell]
|
||||
}
|
||||
```
|
||||
+18
-22
@@ -2,13 +2,10 @@
|
||||
# Row selection
|
||||
`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first.
|
||||
|
||||
|
||||
## Available properties
|
||||
|
||||
The following are available properties in `selectRow`:
|
||||
|
||||
#### Required
|
||||
## Required
|
||||
* [mode (**required**)](#mode)
|
||||
|
||||
## Optional
|
||||
* [style](#style)
|
||||
* [classes)](#classes)
|
||||
* [bgColor](#bgColor)
|
||||
@@ -19,15 +16,13 @@ The following are available properties in `selectRow`:
|
||||
* [onSelectAll](#onSelectAll)
|
||||
* [hideSelectColumn](#hideSelectColumn)
|
||||
|
||||
#### Optional
|
||||
|
||||
## <a name="mode">selectRow.mode - [String]</a>
|
||||
### <a name="mode">selectRow.mode - [String]</a>
|
||||
|
||||
Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead.
|
||||
|
||||
#### values
|
||||
* `radio`
|
||||
* `checkbox`
|
||||
* **radio**
|
||||
* **checkbox**
|
||||
|
||||
#### examples
|
||||
|
||||
@@ -35,6 +30,7 @@ Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `ra
|
||||
const selectRow = {
|
||||
mode: 'radio' // single row selection
|
||||
};
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
@@ -56,7 +52,7 @@ const selectRow = {
|
||||
/>
|
||||
```
|
||||
|
||||
## <a name='style'>selectRow.style - [Object | Function]</a>
|
||||
### <a name='style'>selectRow.style - [Object | Function]</a>
|
||||
`selectRow.style` allow you to have custom style on selected rows:
|
||||
|
||||
```js
|
||||
@@ -75,7 +71,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='classes'>selectRow.classes - [String | Function]</a>
|
||||
### <a name='classes'>selectRow.classes - [String | Function]</a>
|
||||
`selectRow.classes` allow you to add css class on selected rows:
|
||||
|
||||
```js
|
||||
@@ -94,7 +90,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
|
||||
### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
|
||||
The backgroud color when row is selected
|
||||
|
||||
```js
|
||||
@@ -115,7 +111,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
|
||||
### <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
|
||||
This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
|
||||
|
||||
```js
|
||||
@@ -125,8 +121,8 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
|
||||
Able to select row when clicking on row.
|
||||
### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
|
||||
Allow user to select row by clicking on the row.
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
@@ -135,10 +131,10 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
|
||||
> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
|
||||
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
|
||||
|
||||
## <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
|
||||
### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
|
||||
Able to click to edit cell and select row
|
||||
|
||||
```js
|
||||
@@ -149,7 +145,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='onSelect'>selectRow.onSelect - [Function]</a>
|
||||
### <a name='onSelect'>selectRow.onSelect - [Function]</a>
|
||||
This callback function will be called when a row is select/unselect and pass following three arguments:
|
||||
`row`, `isSelect` and `rowIndex`.
|
||||
|
||||
@@ -162,7 +158,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
|
||||
### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
|
||||
This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
|
||||
|
||||
```js
|
||||
@@ -174,7 +170,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
|
||||
### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
|
||||
Default is `false`, if you don't want to have a selection column, give this prop as `true`
|
||||
|
||||
```js
|
||||
|
||||
Reference in New Issue
Block a user