[WIP]: Allow column.editable to accept a function

packages/react-bootstrap-table2-example/examples/cell-edit/column-editable-as-callback.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ editable: num => num > 2101
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ editable: num => num > 2101
+}];
+
+const cellEdit = {
+ mode: 'click'
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click'
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -43,6 +43,7 @@ import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table';
 import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table';
 import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table';
 import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table';
+import ColumnEditableAsCallback from 'examples/cell-edit/column-editable-as-callback';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -94,4 +95,5 @@ storiesOf('Cell Editing', module)
  .add('Row Level Editable', () => <RowLevelEditableTable />)
  .add('Column Level Editable', () => <ColumnLevelEditableTable />)
  .add('Rich Hook Functions', () => <CellEditHooks />)
- .add('Validation', () => <CellEditValidator />);
+ .add('Validation', () => <CellEditValidator />)
+ .add('Editable as callback', () => <ColumnEditableAsCallback />);

packages/react-bootstrap-table2/src/cell.js

@@ -60,6 +60,14 @@ class Cell extends Component {
  ? classes(content, row, rowIndex, columnIndex)
  : classes;
 
+ const setEditMode = () => {
+ if (editMode === Const.CLICK_TO_CELL_EDIT) {
+ cellAttrs.onClick = this.handleEditingCell;
+ } else {
+ cellAttrs.onDoubleClick = this.handleEditingCell;
+ }
+ };
+
  if (style) {
  cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
  }
@@ -85,12 +93,12 @@ class Cell extends Component {
  if (cellClasses) cellAttrs.className = cellClasses;
 
  if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
-
  if (editable && editMode !== Const.UNABLE_TO_CELL_EDIT) {
- if (editMode === Const.CLICK_TO_CELL_EDIT) { // click to edit
- cellAttrs.onClick = this.handleEditingCell;
- } else { // dbclick to edit
- cellAttrs.onDoubleClick = this.handleEditingCell;
+ const checkEditableType = _.isFunction(editable);
+ if (checkEditableType && editable(content, row, column)) {
+ setEditMode();
+ } else if (!checkEditableType) {
+ setEditMode();
  }
  }
  return (