Cell data manipulation

AppStudio
1

Hi,
Does anyone know how AppStudio determines the selected column in a Table when values are duplicated, and what is the supported method for obtaining the exact row and column index of the selected cell? Using a function for example on OnCellClick.
I’m reading a table in from a 2d array, and it displays as expected. The problem is several column values are repeated, and if i try oncellclick on the second duplicate, it only returns the column index of the first.
The ultimate goal is have the user tap on a cell, edit it in the popup and then on ok, the rapid data in the array is updated to the new value.
I know the array can only be updated, from a master CSV file once per (Cycle / Init), and then do ‘something’ else in rapid to resave the csv, from the updated string array.
Thanks in advance.

2

The following approach can be used to obtain the exact Row Index and Column Index of the clicked cell in AppStudio, without modifying the original Table component source code.

1. onMounted – Register a Click Event Listener, Note: Both rowIndex and columnIndex are zero-based.

setTimeout(() => {

    const container = Instance.Table_5.find('.tc-table');

    if (!container) {
        Logger.e("Table container not found");
        return;
    }

    Instance.Table_5._myClickHandler = (e) => {

        const cell = e.target.closest(
            '[data-row-index][data-column-index]'
        );

        if (!cell) return;

        const rowIndex = Number(cell.dataset.rowIndex);
        const columnIndex = Number(cell.dataset.columnIndex);

        Instance.Table_5._clickedRowIndex = rowIndex;
        Instance.Table_5._clickedColumnIndex = columnIndex;

        Logger.i("Row Index", rowIndex);
        Logger.i("Column Index", columnIndex);
    };

    // Use Capture Phase to capture the click before
    // the Table's native click event handler.
    container.addEventListener(
        'click',
        Instance.Table_5._myClickHandler,
        true
    );

}, 1000);

2. onCellClick – Retrieve the Selected Coordinates

Logger.i("Row", Instance.Table_5._clickedRowIndex);
Logger.i("Column", Instance.Table_5._clickedColumnIndex);
Logger.i("Value", this.selectedCell);

  1. Use setTimeout: The onMounted event does not necessarily mean that the Table DOM has been fully mounted. Therefore, a delay is used before registering the click listener. If 1000 ms is insufficient, increase the delay accordingly.

  2. Use Instance.Table_5: Access the component through Instance.Table_5 instead of relying on this, avoiding potential issues with JavaScript execution context and this binding.

    image
    image967×463 38.9 KB

  3. Use Capture Phase: Setting the third argument of addEventListener to true ensures that our listener captures the click event before the Table’s native bubbling-phase event handler.

  4. Use dataset: The row and column coordinates are retrieved directly from the cell’s DOM attributes: