react-bootstrap-table2
react-bootstrap-table2 copied to clipboard
react-bootstrap-table
When will the add a row and delete a row functionality be implemented
I really like your grid. It looks nice and easy to use and customize. Nice job! But it is missing the functionalities of adding and deleting a row and I can't use it unless these functionality is available. What is your timeline for getting it implemented?
hello @jbp17 currently, after the react-bootstrap-table2-tookkit supported, I think we will have add/delete row soon. But I can not tell you the timing due to sometime I am busy. but I will implement it ASAP. thank 👍
@jbp17 We implemented them ourselves in the grid, using column formatter to conditionally display an edit field, etc. Works nicely.
@waynebrantley can you show how you added a delete and add button to add/delete rows?
Here is an example delete button. This is the column definition for the delete column.
{
dataField: "databasePkey",
text: "Remove",
formatter: (cellContent: string, row: IMyColumnDefinition) => {
if (row.canRemove)
return <button className="btn btn-danger btn-xs" onClick={() => this.handleDelete(row.databasePkey)}>Delete</button>
return null
},
},
The handler for handleDelete does an api call to backend to delete row...that call is a promise and after it completes it makes an api call to backend to get new grid data. It of course could have just removed it directly from the grid state or whatever.
what is string and IMyColumnDefinition and row.databasePkey here. { dataField: "databasePkey", text: "Remove", formatter: (cellContent: string, row: IMyColumnDefinition) => { if (row.canRemove) return <button className="btn btn-danger btn-xs" onClick={() => this.handleDelete(row.databasePkey)}>Delete return null }, },
@waynebrantley Thank you for sharing your solution. What I actually mean to say is when will the functionality of updating the entire row be added. Right now, the user can click or double-click any cell and modify the content of it. It is a very nice and convenient feature. But it might cause accidentally change of the data very easily. Some end-user might not like that. They might prefer to an update button at the beginning or end of the row. When clicking on the button, the row changes to an update state. The user can update any cell in the same row. When he/she is satisfied with the change, it will click the Save button. The row will return to a state that is not editable.
I was so excited to use this library then ran into the same issue: if it can't edit a row at once and insert and delete then it has become useless to me. I agree with @waynebrantley .
@jbp17 Yes, we do the same thing - we have an edit button on the row, and we create a form outside the grid....which is great because rarely is it 'simple' enough to edit in the grid directly..
@waynebrantley and @AllenFang I have a problem when deleting the last element in a page.
The paginator breaks down because is not taking into account the change, this page should dissapear due to lacks of elements in it, but instead it throws an error:
Please could you help me?
Credits to @waynebrantley . I simplified it for others who need it in Javascript and more verbose example. The example assumes, that your objects have a property called id that identifies the object.
const dealColumns = [
{
dataField: "firstname",
text: "First Name",
},
// all your columns and data
{
dataField: "id",
text: "Remove",
editable: false,
formatter: (cellContent, row) => {
return (
<button
className="btn btn-danger btn-xs"
onClick={() => handleDelete(row.id)}
>
Delete
</button>
);
},
},
];
const handleDelete = (rowId) => {
console.log(rowId);
};
I'm just getting started with using this package. Adding and deleting rows is definitely something I need. Has this been officially implemented?
