I have a table in my page and need to add a new row when "add" is clicked, delete selected row when "delete" is clicked, and submit table data to a backend api when "submit" is clicked. However, my current javascript code is not working and I need help as I am new to appsmith.
The issue with the provided code is that the addRow() and delRow() functions are not properly updating the table. Instead of accessing the tableData array directly, it is recommended to use the setTableData() function provided by the Table1 component. This function allows for updating the table data and refreshing the UI.
Here is an example code that can be used to add, delete, and submit data to a table:
export default {
addRow: () => {
const newRow = {
username: "New User",
name: "New Name",
email: "new@email.com"
};
const updatedData = [...Table1.tableData, newRow];
Table1.setTableData(updatedData);
},
delRow: () => {
const updatedData = [...Table1.tableData];
updatedData.splice(Table1.selectedRowIndex, 1);
Table1.setTableData(updatedData);
},
submitData: () => {
const data = Table1.tableData;
// Make API request to submit data
// ...
}
};
In this code, the addRow() function first creates a new row to add to the tableData array. Then it uses the spread operator (...) to create a new array with the updated data, and finally calls setTableData() with the new array.
Similarly, the delRow() function first creates a copy of the tableData array, removes the selected row using splice(), creates a new array with the updated data, and calls setTableData() with the new array.
The submitData() function simply retrieves the current table data and sends it to a backend REST API using a suitable method (such as fetch() or axios.post()).