Custom modal to Edit/Delete/Add record

[thamanchand]

Hi,
Thanks for amazing lib. I have a requirement to display table using react-jsonschema-form with Add/Edit/Delete functionalities using custom (insert, edit, delete) modals. UI looks something like this

For building table i am using react-jsonschema-form-extra. For Add action I added

<BootstrapTable
          {...this.tableConf}
          ref="table"
          insertRow
          options={options}
        >

For Delete and Edit actions on each row I added

rightActions: [
        {
          action: "delete",
          className: "col-md-1",
          columnClassName: "col-md-1",
          editColumnClassName: "col-md-1",
          icon: "glyphicon glyphicon-minus",
          displayName: "action"
        },
        {
          action: "edit",
          className: "col-md-1",
          columnClassName: "col-md-1",
          editColumnClassName: "col-md-1",
          icon: "glyphicon glyphicon-pencil",
          displayName: "action"
        }
      ],

It would be nice if i can add edit, delete action icons on same column.

I added edit action header in actionHeaderFactory.js

else if (action === 'edit') {
    return (cell, row, enumObject, rowIndex, formData, onChange) => {
      console.log("edited data", rowIndex, formData, row)
       // call edit modal with rowIndex, formData,  
      //onChange()
     //
    }

tableConFactory.js

  if (keyField === POSITION_KEY) {
    //formData = addPosition(formData);
  }

  let tableConf = Object.assign(
    { data: formData },
    deepCopy(DEFAULT_TABLE_CONF),
    table,
    //{ keyField }
  );

table/index.js

{columns.map((column, i) => {
            return column.action === "delete" || column.action === "edit" ? (
              <TableHeaderColumn key={i} {...column} hiddenOnInsert>
                {column.displayName}
              </TableHeaderColumn>
            ) : column.dataField === "id" ? (
              <TableHeaderColumn key={i} {...column} isKey={true} hidden={true} hiddenOnInsert>
                {column.displayName}
              </TableHeaderColumn>
            ) : (
              <TableHeaderColumn key={i} {...column}>
                {column.displayName}
              </TableHeaderColumn>
            );
          })}

Issues:

• _position key is added which made it hard to insert new record, as it complains _position can't be empty. Therefore, i disable addPosition and keyField from tableConfFactory.
• I can't figure out how to format fields such as textarea, dropdown, date in CustomInsertModal.
• If i use react-bootstrap-table default InsertModal with <TableHeaderColumn key={i} {...column} isKey={true} hidden={true} hiddenOnInsert> to add new item then I get Failed prop type: Invalid prop validateState of type string supplied to InsertModal, expected object.
• If i use react-bootstrap-table default InsertModal with <TableHeaderColumn key={i} {...column} isKey={true} hidden={true}> and give ID manually then new item is added to table. But I can't delete this item.

Here is a codesandbox

@mavarazy

Any pointers or helps will be appreciated!

[sneu012]

Adding items using insertRow from react-bootstrap-table should have been addressed by this commit.

Please reopen the issue if not resolved.