* implement row single and multiple selection

* radio button for single, checkbox for multiple
* update component if status was changing

* implement header cell for row selection

* render checkbox for multiple, nothing for single
* default css for th[data-th-row-selection]
* update component if status was changing

* transform cursor to pointer when hover button radio and checkbox

* story for single and multiple rows selection

* remove props required field and turn off eslint

* [test] adapt with other component

* props resolver for cell selection

* if row selection was disabled, return mode 'ROW_SELECT_DISABLED'

* refactor row selection cell

* rename to selection-cell
* remove unnecessary props
* better coding style

* props resolver for header cell selection

* refactor row selection for header cell

* rename to selection-header-cell
* remove unnecessary props
* better coding style
* new logic for handleSelectAllRows

* tunning for multi selection logic

* allow user to customize select all result
* remove cursor point
* remove uncessary utils

* tunning for function naming

* mock data for resolved props including both body and header

* judge cell-editable and row-selectable with mode

* [test] unit test for props-resolver

* move position of test case of cellEdit
* add test for resolveCellSelectionProps
* add test for resolveHeaderCellSelectionProps
* accept row keys for mock-component

* [test] add test for body

* [test] add test for header

* [test] add test for row

* [test] add test for selection-cell

* fix typo

* [test] add test for selection-header-cell

* add test for checkbox in selection-header-cell

* [test] add test for bootstrap-table

* test for handleRowSelect

* test for handleAllRowsSelect

* remove uncessary prop

* remove unnecessary dafault mode for selectRow

* add description for props shape
* remove uncessary declaration of inputType
* add isRequred for selectRow.mode

* [test] verify the correctness of params when clicking on selection cell

* [test] modification for test wording and unmatched data type

* handle logic of row selection inside the store

* ignore the situation of pagination
* correct the tests

* [test] add test for store/base.js

* Document for row selection

* modication for defects

* simplify proptypes to basic data type
* row selection document in README
* refactor all function test with sinon

* refactor all mock function to sinon.stub() instead jest.fn()

* fix conflict
This commit is contained in:
chunming
2017-10-11 10:28:53 -05:00
committed by Allen
parent 30d2645e4a
commit 877259158e
26 changed files with 1353 additions and 46 deletions
+6 -2
View File
@@ -14,6 +14,7 @@
* [hover](#hover)
* [condensed](#condensed)
* [cellEdit](#cellEdit)
* [selectRow](#selectRow)
### <a name='keyField'>keyField(**required**) - [String]</a>
`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
@@ -36,7 +37,7 @@ Same as `.table-hover` class for adding a hover effect (grey background color) o
### <a name='condensed'>condensed - [Bool]</a>
Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half
### <a name='cellEdit'>cellEdit - [Bool]</a>
### <a name='cellEdit'>cellEdit - [Object]</a>
Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
> Note: The `keyField` column can't be edited
@@ -63,4 +64,7 @@ Default is `false`, enable it will be able to save the cell automatically when b
`cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
#### <a name='cellEdit.timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
### <a name='selectRow'>selectRow - [Object]</a>
Pass prop `selectRow` to enable row selection. For more detail, please navigate to [row selection document](./row-selection.md).
+48
View File
@@ -0,0 +1,48 @@
# 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
* [mode (required)](#mode)
#### Optional
## <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`
#### examples
```js
const selectRowProp = {
mode: 'radio' // single row selection
};
<BootstrapTableful
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRowProp }
/>
```
```js
const selectRowProp = {
mode: 'checkbox' // multiple row selection
};
<BootstrapTableful
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRowProp }
/>
```