Editing fields marked as non-editable when adding a new row

[lightheaded]

When adding a new row, fields that are marked non-editable are automatically greyed out. I cannot find a way to configure the fields shown on adding a new record. It would seem like common sense that I might not want to let users edit certain fields, but when adding a new row, they should be able to enter the values in those immutable fields.

[AllenFang]

@lightheaded, could you show me the code? is all fields are non-editable?

[lightheaded]

It's pretty much the example table code

<BootstrapTable data={products} striped={true} hover={true} pagination={true} selectRow={selectRowProp} cellEdit={cellEditProp}
                    insertRow={true} deleteRow={true} search={true} columnFilter={true} options={options}>
      <TableHeaderColumn dataField='id' isKey={true} hidden={true} editable={false}>id</TableHeaderColumn>
      <TableHeaderColumn dataField='phone_number' width='150px' editable={true}>Phone Number</TableHeaderColumn>
      <TableHeaderColumn dataField='reason' editable={true}>Reason</TableHeaderColumn>
      <TableHeaderColumn dataField='created_at' width='200px' editable={false}>Added</TableHeaderColumn>
    </BootstrapTable>

and the props:

var selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  className: 'info'
};

var cellEditProp = {
  mode: 'click',
  blurToSave: true,
  afterSaveCell: onAfterSaveCell
};

var options = {
  sizePerPage: 15,
  sizePerPageList: [15,50,500],
  sortName: 'created_at',
  sortOrder: 'desc',
  afterDeleteRow: onAfterDeleteRow,
  afterInsertRow: onAfterInsertRow
};

Now when I click "New", a popup appears that has two greyed-out fields - id and created_at. As ID is required, it is not possible to submit the form, although I don't want to submit the ID.

[AllenFang]

would you give the cellEditProp and the other props :)

[AllenFang]

oh. I see it. you set ``editable={false}on thecreated_at` and `id` both columns. so you can not insert new value.

[AllenFang]

btw, if you dont want id field be insert, you can set autoValue={true} on id field to tell react-bootstrap-table to generate a dummy rowkey

[lightheaded]

I edited my post to include the props as well. Sorry about that :)

I do need the id field for updating the values, but the autoValue will come in handy when adding a new row (as id is currently my key column and the id is assigned by the backend, which causes delays). However with the editable=false, I would not like the created_at field to be edited, nor I want it to be filled out by user when adding a new row. I would like it to either be filled out automatically or be filled by backend without the react-bootstrap-table ever knowing about that field on insertion. Is that possible?

[AllenFang]

@lightheaded, did you mean you want to insert row without popup modal? sorry for my poor english:)
btw editable = false will make edit cell and insert can't be fill value both. maybe I can provide another configuration for you to make some column can't be edited but can fill value when insertion

[lightheaded]

No I do like the popup, but I would like to configure the editability (update record) and insertion (new record) to be separately manageable. That would be great :)

[AllenFang]

ok, but there are a lots of issues and high priority features to do, so this will take some time, maybe can't be done in near future. If you urgent to need this feature, the workaround is just using cell edit only, and you customize a popup modal for insertion

Thanks :)