react-bootstrap-table-ng-editor

react-bootstrap-table-ng separate the cell edit code base to react-bootstrap-table-ng-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

API&Props Definition

Install

$ npm install react-bootstrap-table-ng-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-table-ng-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-table-ng 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)

Validation

column.validator will help you to work on it!

Customize Style/Class

Editing Cell

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

Editor

• Customize the editor style via column.editorStyle
• Customize the editor classname via column.editoClasses

Rich Editors

react-bootstrap-table-ng have following predefined editor:

• Text(Default)
• Dropdown
• Date
• Textarea
• Checkbox

In a nutshell, you just only give a column.editor and define the type:

import { Type } from 'react-bootstrap-table-ng-editor';
const columns = [
  ..., {
    dataField: 'done',
    text: 'Done',
    editor: {
      type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
      ... // The rest properties will be rendered into the editor's DOM element
    }
  }
]

In the following, we go though all the predefined editors:

Dropdown Editor

Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either editor.options or editor.getOptions should be required prop.

editor.options

This is most simple case for assign the dropdown options data directly.

import { Type } from 'react-bootstrap-table-ng-editor';
const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    options: [{
      value: 'A',
      label: 'A'
    }, {
      value: 'B',
      label: 'B'
    }, {
      value: 'C',
      label: 'C'
    }, {
      value: 'D',
      label: 'D'
    }, {
      value: 'E',
      label: 'E'
    }]
  }
}];

editor.getOptions

It is much flexible which accept a function and you can assign the dropdown options dynamically.

There are two case for getOptions:

• Synchronous: Just return the options array in getOptions callback function
• Asynchronous: Call setOptions function argument when you get the options from remote.

// Synchronous

const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    getOptions: (setOptions, { row, column }) => [.....]
  }
}];

// Asynchronous

const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    getOptions: (setOptions, { row, column }) => {
      setTimeout(() => setOptions([...]), 1500);
    }
  }
}];

here is an online example.

Date Editor

Date editor is use <input type="date">, the configuration is very simple:

const columns = [
  ..., {
  dataField: 'inStockDate',
  text: 'Stock Date',
  formatter: (cell) => {
    let dateObj = cell;
    if (typeof cell !== 'object') {
      dateObj = new Date(cell);
    }
    return `${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${('0' + dateObj.getUTCDate()).slice(-2)}/${dateObj.getUTCFullYear()}`;
  },
  editor: {
    type: Type.DATE
  }
}];

Textarea Editor

Textarea editor is use <input type="textarea">, user can press ENTER to change line and in the react-bootstrap-table-ng, user allow to save result via press SHIFT + ENTER.

const columns = [
  ..., {
  dataField: 'comment',
  text: 'Product Comments',
  editor: {
    type: Type.TEXTAREA
  }
}];

Checkbox Editor

Checkbox editor allow you to have a pair value choice, the editor.value is required value to represent the actual value for check and uncheck.

const columns = [
  ..., {
  dataField: 'comment',
  text: 'Product Comments',
  editor: {
    type: Type.CHECKBOX,
    value: 'Y:N'
  }
}];

Customize Editor

If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via column.editorRenderer. It accept a function and pass following arguments when function called:

• editorProps: Some useful attributes you can use on DOM editor, like class, style etc.
• value: Current cell value
• row: Current row data
• column: Current column definition
• rowIndex: Current row index
• columnIndex: Current column index

Note when implement a custom React editor component, this component should have a getValue function which return current value on editor

Note when you want to save value, you can call editorProps.onUpdate function

Following is a short example:

interface QualityRangerProps {
  value?: number;
  onUpdate: (value: number) => void;
  didMount?: () => void;
}

const QualityRanger = ({ value = 0, onUpdate, didMount, ...rest }: QualityRangerProps) => {
  const rangeRef = React.useRef<HTMLInputElement>(null);
  const id = React.useId();

  React.useEffect(() => {
    if (rangeRef.current) {
      rangeRef.current.focus();
    }
  }, []);

  const getValue = () => {
    return parseInt(rangeRef.current?.value || '0', 10);
  };

  return (
    <>
      <input
        {...rest}
        name="quality"
        id={id}
        key="range"
        ref={rangeRef}
        type="range"
        min="0"
        max="100"
      />
      <button
        key="submit"
        className="btn btn-default"
        onClick={() => onUpdate(getValue())}
      >
        done
      </button>
    </>
  );
};

const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quality',
  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
    <QualityRanger { ...editorProps } value={ value } />
  )
}];