mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-10-05 09:37:33 +00:00
fix #60
* 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:
+38
-1
@@ -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
@@ -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`.
|
||||
Reference in New Issue
Block a user