How to dynamically insert a row into a table

I’m building a component consisting of 2 tables, side-by-side, with left and right arrows. You select a row in the left table, press the right-arrow button, and that row should appear in the right table. You remove rows from the right table and put them back into the left table using the left arrow. So, i’m trying to figure out to insert the selected row from the left table into the right table when the right arrow is pressed. I have an Interaction setup for the right-arrow button to simply run this script:

var selectedIndex = this.context.appActions.dataSlots[‘ds_SlotAvailableCounterpartiesSelectedIndex’];
if ( selectedIndex != -1 ) {
var items = this.context.appActions.getDataSheet(‘counterpartySelection’).items;
if ( items.length >= selectedIndex ) {
var row = items[selectedIndex];
var targetItems = this.context.appActions.getDataSheet(‘counterpartyPicks’).items;
row.key = targetItems.length;

When I run it, I click the right-arrow button and see nothing in the right hand table (the one displaying datasheet called counterpartyPicks). However, if I look in the Chrome React component inspector, I do see that row in the ‘data’ table for the ReactTable component of the right-hand table. It’s just not appearing visibly in the table. Any thoughts on how to make this work?



Update: I did this in a drawer. If I close the drawer and re-open, I can see what I inserted. I need it to refresh the table immediately after inserting.

The problem is that the display doesn’t update automatically when changing data directly. You should use the data sheet methods in App.js which also refresh the display:

this.context.appActions.addToDataSheet(sheetId, newRow)
this.context.appActions.updateInDataSheet(sheetId, row)
this.context.appActions.removeFromDataSheet(sheetId, row)

Brilliant! Thanks Juha.