Working with tables component

Hello everyone,

I'm seeking assistance with a specific task. I have two table components, namely TableA and TableB. TableA is populated with a list of products. I am looking for guidance on how to dynamically add a row to TableB, including the values from the selected row in TableA, each time I click on a row in TableA.

Any assistance or guidance you can provide would be greatly appreciated.

Thank you!

I see your using a custom action. In this case you could try storing the selected rows in a variable (temp state) using an Event Handler within your Action. You'll have to define your variable in the code editor. I set the initial value to []. This method could lead to duplicates in TableB. In order to handle that you may have to execute a JS query instead of directly calling variable1.SetIn().
Screenshot 2024-01-13 at 10.45.42 AM

You could also use the multiple row selection feature and reference the built-in
{{ tableA.selectedRows }} property as the data source for TableB
Screenshot 2024-01-13 at 10.51.26 AM

Hello, @matth , thanks for your help, based on your answer, i was able to add new rows on table B using the following function:

function addRowToTable() {
const clickedRow = tblitems.selectedSourceRow;
const updatedDatasource = [...tbllista.data, clickedRow];
tbllista.data = updatedDatasource;
return updatedDatasource;
}

return addRowToTable();

Now i'm trying to remove selected elements from tableB (tbllista).

@Winston_Altamirano

Hey @Christiam_Emilio! Are you resolved here or are you still trying to "remove selected elements from tableB (tbllista)"? If you're still blocked on removing elements, I'd be happy to help!


How many elements are being removed at once (1 or 1+)? How is the user selecting elements to be removed (clicking rows on the table, selected ids from a multiselect, etc.)? And what data source are you using?

Hi, @victoria , yes i was able to remove the elements using an action on tbllista
at the end i used an array as datasource of the table tbllista, i got the selected element id and i remove every element of array and refreshed the table:

let temp = VarDS.value;
temp.splice(tbllista.selectedDataIndex , 1);
VarDS.setValue(temp);

thanks for your follow

Awesome! Happy to hear it and thank you for sharing your solution with the forums :slight_smile:

1 Like