mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-12 04:00:16 +00:00
fix #50
* 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:
+6
-2
@@ -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).
|
||||
|
||||
@@ -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 }
|
||||
/>
|
||||
```
|
||||
Reference in New Issue
Block a user