Select editor with records

[gvenill]

Added the possibility to use an array of records in the select editor and data rendering from the columns classifiers.

[AllenFang]

@gvenill, thanks, I'll check this out

[AllenFang]

@gvenill, I've checked this PR and select editor has been supported in react-bootstrap-table,
you can set up a select edit type as following:

var jobTypes = ['A','B','C','D'];
//...
render(){
    return (
      <BootstrapTable data={jobs} cellEdit={cellEditProp}>
          <TableHeaderColumn dataField="id" isKey={true}>Job ID</TableHeaderColumn>
          <TableHeaderColumn dataField="name" editable={{type:'textarea'}}>Job Name</TableHeaderColumn>
          <TableHeaderColumn dataField="type" editable={{type:'select', options:{values:jobTypes}}}>Job Type</TableHeaderColumn>
          <TableHeaderColumn dataField="active" editable={{type:'checkbox', options:{values:'Y:N'}}}>Active</TableHeaderColumn>
      </BootstrapTable>
    );
  }

Anyway, thanks your contribution, feel free to discuss :)
Thanks again!!

[gvenill]

This pr was not about adding a select editor. The idea was to make select editor able to consume array of objects. Using your exapmle it will be something like:

var jobTypes = [
    { id: 1, type: 'A'},
    { id: 2, type: 'B'},
    { id: 3, type: 'C'},
    { id: 4, type: 'D'}
];
//...
render(){
    return (
      <BootstrapTable data={jobs} cellEdit={cellEditProp}>
          <TableHeaderColumn dataField="id" isKey={true}>Job ID</TableHeaderColumn>
          <TableHeaderColumn dataField="name" editable={{type:'textarea'}}>Job Name</TableHeaderColumn>
          <TableHeaderColumn
              dataField="type"
              displayField="type"
              valueField="id"
              classifier={jobTypes}
              editable={{type:'select', options:{}}}>
              Job Type
           </TableHeaderColumn>
          <TableHeaderColumn dataField="active" editable={{type:'checkbox', options:{values:'Y:N'}}}>Active</TableHeaderColumn>
      </BootstrapTable>
    );
  }

[AllenFang]

@gvenill, very sorry I misunderstand this PR ;( I'll take a look again after my vocation.
Thanks 👍

[dana2208]

Hello,

@gvenill there is another way to achieve what you want: you can use it today the following way:
editable={{type:'select', options:{values: [1, 2, 3, 4]}}}
and use in the same TableHeaderColumn the dataFormat property (and optionally formatExtraData):
<TableHeaderColumn editable={{type:'select', options:{values: [1, 2, 3, 4]}}} dataFormat={getFormattedValue} formatExtraData={jobType} />

getFormattedValue(cell, row, myArray) {
//look in myArray (jobType in this case) where id === cell and return the type value.
}

This way you'll have a select editor with the wanted values (the one stored in id) but displayed values are the one in type.

If anyway you prefer to use your implemetation I would use what already exists instead of adding props to TableHeaderColumn.
The options property of editable props should be used, and its values property should accept either an array as in the previous implementation or an object in the following structure:
var jobTypes = {
1: 'A',
2: 'B',
3: 'C',
4: 'D'
};
This would be more readable and clear this is related to the editable feature.
Now your API is more complicated with 3 new properties displayField, valueField and classifier that are not part of the editable property.

Thanks

[petersobolev]

I'm using react-bootstrap-table in my project (with react+redux+graphql+react-bootstrap+redux-form). Best solution I've found, thanks!

But I also need possibility to insert select with data from array of objects. I've been disappointed why I can't use pairs "id-title" because it is typical application for select. So, here is draft code, maybe it'll help someone... It works, but I think you need to include support array of objects in your component.

import React from 'react';

export const dynamicSelectEditor = (onUpdate, props) => (<DynamicSelectEd onUpdate={ onUpdate } {...props} />);

export class DynamicSelectEd extends React.Component {

  constructor(props) {
    super(props);
    this.updateData = this.updateData.bind(this);

//  console.log('props constructor', this.props);
  }

  focus() {
    this.refs.selectRef.focus();
  //  console.log('focus');
  }

  updateData(ev) {
//    console.log('updatedata',ev.target.value);
    this.props.onUpdate(ev.target.value);
  }

  render() {
//  console.log('props render', this.props);
    let options = [];
//    const values = [{name:"n222",value:"222"},{name:"n333",value:"333"},{name:"n444",value:"444"}];

//          const values = editable.options.values;
          const values = this.props.data;
          const optionName = this.props.optionName;
          const optionValue = this.props.optionValue;
          if (Array.isArray(values)) {

            let name, value;
            options = values.map((value, i) => {
//              name = format ? format(value) : value;
              name = values[i][optionName];
              value = values[i][optionValue];
              return (
                <option key={ 'option' + i } value={ value }>{ name }</option>
              );
            });

          }//if
//          { ...attr }

    return (

      <select ref='selectRef' defaultValue={ this.props.defaultValue } onKeyDown={ this.props.onKeyDown }
      onChange={this.updateData} >
      {options}
      </select>


    );//return

  }//render

}//DynamicSelectEd


export function dynamicSelectFormatter(cell, row, options) {

//  console.log('dynamicSelectFormatter', cell,row, options.data);

  const values = options.data;

  if (Array.isArray(values)) {

    var lookup = {};
    for (var i = 0, len = values.length; i < len; i++) {
        lookup[values[i].id] = values[i];
    }

    if (lookup[cell]!=null)
      return lookup[cell].title;
    else
      return '-';

//console.log('dynamicSelectFormatter LOOKUP', lookup);
  }//if


}//dynamicSelectFormatter

and how to use:

import { dynamicSelectEditor, DynamicSelectEd, dynamicSelectFormatter } from './DynamicSelect'
...
          <TableHeaderColumn dataField='route_id' columnTitle dataSort={true}  expandable={ false } editable={ true } dataFormat={  (cell,row) => { return dynamicSelectFormatter(cell,row,{ data: this.props.data.getRoutes.routes }); } }  customEditor={ { getElement: dynamicSelectEditor, customEditorParameters: {data: this.props.data.getRoutes.routes, optionValue: 'id', optionName: 'title'} } }> route_id</TableHeaderColumn>
....

[AllenFang]

I'll improve it soon.

[AllenFang]

HI All, it fixed on v3.3.4, check this to learn how to configure the text and value on select option. let me know if there's any concern or issues, thanks :)

[petersobolev]

It seems that in your example "text" and "value" are hard-coded, not user-defined:

editable={ { type: 'select', options: { values: jobTypes } } }

It would be nice to have possibility to configure properties for text and value. For example, my array of objects looks like:

[ {id: 1, title: 'aaa'}, {id: 2, title: 'bbb'} ]

because I got it from graphql and can't change property names to "text" and "value".

Possible format of options:

editable={ { type: 'select', options: { values: jobTypes, keyprop: "id", valueprop: "title" } } }

[AllenFang]

@petersobolev, I need sometime to implement this.

But seriously, maybe you need to learn to say thanks firstly. I usually spend most of my time on this repo and I think the issues of this repo is like a Wishing Pool, I always take you guy's requirement as first priority and try my best to do it, but sometime, I feel disappoint due to no any good wording or appreciation for me. I think I can accept it, but just tired.

I open #1319 for me to remember this enhancement.

[petersobolev]

@AllenFang I'm sorry if I was ungrateful. As I've said above - your component the best. So, it is not unusual that there are a lot of requests :)
Thank you! I understand how much time it takes.

[AllenFang]

@petersobolev, that's ok, I'll handle #1319 in this week an mention there if I done~

[AllenFang]

Hello @petersobolev, fixed on v3.3.7, check https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/edit-type-table.js#L26 thanks~