* implement cell editor

* keyField shouldn't be editable

* add additional check to avoid some bugs

* add jsdom for enzyme mount

* add some helpers class for enzyme mounting

* add testing for cellEdit

* use npm instead

* add test for TableResolver

* table-layout: fixed; to fix the columns width when content of td changed

* add stories for cell edit

* add document for cellEdit
This commit is contained in:
Allen
2017-09-20 11:18:57 -05:00
committed by GitHub
parent 2e10cb132e
commit f6eea2f659
34 changed files with 1503 additions and 108 deletions
+38 -1
View File
@@ -2,6 +2,18 @@
## Props on BootstrapTable
#### Required
* [keyField (**required**)](#keyField)
* [data (**required**)](#data)
* [columns (**required**)](#columns)
#### Optional
* [striped](#striped)
* [bordered](#bordered)
* [hover](#hover)
* [condensed](#condensed)
* [cellEdit](#cellEdit)
### <a name='keyField'>keyField(**required**) - [String]</a>
`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
@@ -18,4 +30,29 @@ Same as `.table-bordered` class for adding borders on all sides of the table and
### <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
Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half
### <a name='cellEdit'>cellEdit - [Bool]</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
Following is a `cellEdit` object:
```js
{
mode: 'click',
blurToSave: true,
onEditing: (rowId, dataField, newValue) => { ... },
beforeSaveCell: (oldValue, newValue, row, column) => { ... },
afterSaveCell: (oldValue, newValue, row, column) => { ... },
nonEditableRows: () => { ... }
}
```
#### <a name='cellEdit.mode'>cellEdit.mode - [String]</a>
`cellEdit.mode` possible value is `click` and `dbclick`. It's required value that tell `react-bootstrap-table2` how to trigger the cell editing.
#### <a name='cellEdit.blurToSave'>cellEdit.blurToSave - [Bool]</a>
Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
#### <a name='cellEdit.nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
`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`)
+7 -2
View File
@@ -25,6 +25,7 @@ Available properties in a column object:
* [headerEvents](#headerEvents)
* [headerAlign](#headerAlign)
* [headerAttrs](#headerAttrs)
* [editable](#editable)
Following is a most simplest and basic usage:
@@ -411,5 +412,9 @@ Additionally, customize the header attributes by a `2-arguments` callback functi
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.
> Caution:
> Same as [column.attrs](#attrs), it has lower priority and will be
> overwrited when other props related to HTML attributes were given.
## <a name='editable'>column.editable - [Bool]</a>
`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.