hey all, I have a table where each row renders a nested Table using a component template. I want to enforce that only one row can be selected across all nested tables.
My intent was to call .clearSelection() on all other nested tables when one nested table’s row is clicked.
But:
table3[0] is {}
table3.instances is undefined
.clearSelection() is not available
Nested tables do not seem to be instantiated as component instances. Is it possible in Table to programmatically clear selection on nested table components rendered inside a template?
If so, what is the correct way to reference each nested table instance?
This is a tricky one. Methods like clearSelection() for nested tables within an expandable row can be triggered only when rows are expanded. If a row is collapsed, and you try to clear the selection using the index of the virtualized table, it will fail.
What I would suggest is the following:
Variable + js query in case multiple rows will be expanded at the same time
Create a variable, set [] as default value
Within your parent table, add the following events:
-- On expand: {{ [...variable8.value, table2.selectedDataIndex ]}}
-- On Collapse: {{variable8.value.filter(item => item !== table2.selectedDataIndex)}}
This will track which rows in your table are expanded, which you can the use in the below query to trigger the clearSelection() method (replace table3 with the name of your nested table):
// Get the array of parent row indices containing the nested tables
const nestedTableIndices = variable8.value;
// Initialize a counter for successful unselections
let tablesUnselectedCount = 0;
// Iterate through the array of indices
nestedTableIndices.forEach(index => {
// Check if the nested component object exists at the given index
// table3[index] resolves to the actual component (the nested table)
const nestedTableComponent = table3[index];
if (nestedTableComponent) {
try {
// Call the clearSelection() method on the nested table component
nestedTableComponent.clearSelection();
// Increment the counter
tablesUnselectedCount++;
} catch (error) {
// Handle cases where the component exists but clearSelection() might fail
console.log(`Error clearing selection for nested table at table3[${index}]:`, error);
}
} else {
// Optionally warn if a component isn't found at the expected index
console.log(`Nested table component not found at table3[${index}]`);
}
});
// The final return value is the count of nested tables whose selection was cleared
return tablesUnselectedCount;
If you have a script that enables users only to have one row expanded at a time:
In this case, you can access the nested table directly when expanding the row, using something like the following in an expand event handler: table3[table2.selectedDataIndex].clearSelection();
Thsi will clear the selection of the nested tables of any row you are expanding.
I understand the issue you’re facing. I actually ran into the same problem earlier and was able to resolve it. I’ve shared a detailed explanation along with an example and screenshots in the link below, which should help clarify how to fix it:
The post walks through the root cause of the issue and demonstrates the correct approach to make it work as expected. I’d recommend going through it step by step and comparing it with your current setup.
If anything is still unclear, or if you have follow-up questions based on your specific use case, feel free to reply here or reach out.
Happy to help further!
It looks like @MiguelOrtiz and @WidleStudioLLP offered some great solutions for this. If either of these are not applicable or working, reply back on the thread here and I am sure all 3 of us can keep helping get this resolved for you.
If one of the responses resolves your request, go ahead and mark it as the resolution please
