-
Notifications
You must be signed in to change notification settings - Fork 782
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Select editor with records #243
Conversation
@gvenill, thanks, I'll check this out |
@gvenill, I've checked this PR and select editor has been supported in 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 :) |
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:
|
@gvenill, very sorry I misunderstand this PR ;( I'll take a look again after my vocation. |
Hello, @gvenill there is another way to achieve what you want: you can use it today the following way:
This way you'll have a select editor with the wanted values (the one stored in If anyway you prefer to use your implemetation I would use what already exists instead of adding props to TableHeaderColumn. Thanks |
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>
.... |
I'll improve it soon. |
HI All, it fixed on |
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" } } } |
@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. |
@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 :) |
@petersobolev, that's ok, I'll handle #1319 in this week an mention there if I done~ |
Hello @petersobolev, fixed on |
Added the possibility to use an array of records in the select editor and data rendering from the columns classifiers.