Have ideas to improve npm?Join in the discussion! »

    react-bootstrap-table2-editor

    1.4.0 • Public • Published

    react-bootstrap-table2-editor

    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

    API&Props Definitation


    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:

    Editable Cell

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

    Validation

    column.validator will help you to work on it!

    Customize Style/Class

    Editing Cell

    Editor

    Rich Editors

    react-bootstrap-table2 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-table2-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-table2-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.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).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-table2, 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:

    class QualityRanger extends React.Component {
      static propTypes = {
        value: PropTypes.number,
        onUpdate: PropTypes.func.isRequired
      }
      static defaultProps = {
        value: 0
      }
      getValue() {
        return parseInt(this.range.value, 10);
      }
      render() {
        const { value, onUpdate, ...rest } = this.props;
        return [
          <input
            { ...rest }
            key="range"
            ref={ node => this.range = node }
            type="range"
            min="0"
            max="100"
          />,
          <button
            key="submit"
            className="btn btn-default"
            onClick={ () => onUpdate(this.getValue()) }
          >
            done
          </button>
        ];
      }
    }
     
    const columns = [
      ..., {
      dataField: 'quality',
      text: 'Product Quality',
      editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
        <QualityRanger { ...editorProps } value={ value } />
      )
    }];

    Install

    npm i react-bootstrap-table2-editor

    DownloadsWeekly Downloads

    12,600

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar