react-bootstrap-table2/docs/basic-celledit.md

id	title	sidebar_label
basic-celledit	Cell Edit	Cell Edit

react-bootstrap-table2 separate the cell edit code base to react-bootstrap-table2-editor, so there's a little bit different when you use cell edit than react-bootstrap-table. In the following, we are going to show you how to enable the cell edit

Live Demo For Cell Edit

---

Install

$ npm install react-bootstrap-table2-editor --save

How

We have two ways to trigger a editable cell as editing cell:

• click
• dbclick

That's look into how we enable the cell edit on tabe:

import cellEditFactory from 'react-bootstrap-table2-editor';

// omit

<BootstrapTable
  keyField="id"
  data={ products }
  columns={ columns }
  cellEdit={ cellEditFactory({ mode: 'click' }) }
/>

How user save their new editings? We offer two ways:

• Press ENTER(default)
• Blur from current editing cell(Need to enable the cellEdit.blurToSave)

Editable Cell

react-bootstrap-table2 support you to configure the cell editable on three level:

• Row Level (cellEdit.nonEditableRows)
• Column Level (Configure column.editable as bool value)
• Cell Level (Configure column.editable as a callback function)

Customize Style/Class

Currently, we only support the editing cell style/class customization, in the future, we will offer more customizations.

Editing Cell

• Customize the editing cell style via column.editCellStyle
• Customize the editing cell classname via column.editCellStyle

Validation

column.validator will help you to work on it!