New Dashboard missing a much loved feature?

Dashboard
1

New Dashboard missing a much loved feature? How to show the row clicked? CSS to change the row background color for example?

Also, old Dashboard when row clicked resulting message included a row number which was handy as a reference, so for any Array of 'off' screen data, where the table only showed a subset of said data. Yeah, I can add a function node to find the row in the array via findIndex() for example but having table provide it was quite elegant.

2

Google A.I., yeah I know... but figured maybe? Come back with this example... it does one thing... deletes the row you click on! LOL How much of this do I understand? Ah... I at least got the UI Table id right... because the table changed on row click [cough].

<style>
.highlighted-row {
    background-color: #e0e0e0 !important;
    color: black !important;
    font-weight: bold;
}

</style>
<script>(function(scope) {
    scope.$watch('msg.eb49cd13304dcf6d', function(msg) {
        if (msg && msg.payload) {
            // Remove existing highlight from all rows
            const allRows=document.querySelectorAll('.v-data-table__wrapper tbody tr');

            allRows.forEach(row=> {
                row.classList.remove('highlighted-row');
            });

            // Iterate over the rows and find the one matching the clicked data
            allRows.forEach(row=> {
                // This is a generic way to check if row data matches the clicked data. 
                // You might need a specific unique identifier (e.g., ID column)
                // for a more robust solution, but this often works.
                let rowDataMatch=true;
                const cells=row.querySelectorAll('td');
                const clickedDataKeys=Object.keys(msg.payload);

                if (cells.length===clickedDataKeys.length) {
                    for (let i=0; i < cells.length; i++) {
                        const key=clickedDataKeys[i];

                        if (cells[i].innerText !=msg.payload[key]) {
                            rowDataMatch=false;
                            break;
                        }
                    }
                }
                else {
                    // Fallback for potential column mismatch or complex data types
                    // Maybe check a specific key if available
                    // console.log("Column count mismatch, trying less robust check");
                    try {
                            if(row.innerText.includes(msg.payload[clickedDataKeys[0]])) {
                                rowDataMatch=true;
                            }
                            else {
                                rowDataMatch=false;
                            }
                        }
                        catch (e) {
                            
                        }
                    }
                    if (rowDataMatch) {
                        row.classList.add('highlighted-row');
                    }
                });
            }
        });
    })(scope);
</script>
3

I haven't used the table much, but if you want more sophisticated features then others have recommended node-red-dashboard-2-table-tabulator (node) - Node-RED.

4

Oh... will give that shot

1 Like
5

I'm here if you need help for this

3 Likes