From 864cfe2775caaccb3e232371caf64c5f40c73457 Mon Sep 17 00:00:00 2001
From: jensakejohansson <jens.johansson@systemverification.com>
Date: Tue, 11 Nov 2025 22:21:06 +0100
Subject: [PATCH] Support for tabel driven scenarios, and refactorization.

Signed-off-by: jensakejohansson <jens.johansson@systemverification.com>
---
 generator/generate.go              |   5 +
 generator/generate_test.go         |  24 ++
 generator/transform.go             |  87 ++++++-
 generator/transform_test.go        |   4 +-
 plugin.json                        |   2 +-
 themes/default/assets/js/main.js   | 376 ++++++++++++++++++++++-------
 themes/default/views/partials.tmpl |  44 +++-
 7 files changed, 437 insertions(+), 105 deletions(-)

diff --git a/generator/generate.go b/generator/generate.go
index 8667ec2..4749ffc 100644
--- a/generator/generate.go
+++ b/generator/generate.go
@@ -153,6 +153,11 @@ type scenario struct {
 	AfterScenarioHookFailure  *hookFailure `json:"AfterScenarioHookFailure"`
 	SkipErrors                []string     `json:"SkipErrors"`
 	TableRowIndex             int          `json:"TableRowIndex"`
+	ScenarioTableRowIndex     int          `json:"ScenarioTableRowIndex"`
+	IsSpecTableDriven         bool         `json:"IsSpecTableDriven"`
+	IsScenarioTableDriven     bool         `json:"IsScenarioTableDriven"`
+	ScenarioDataTable         *table       `json:"ScenarioDataTable"`
+	ScenarioTableRow          *table       `json:"ScenarioTableRow"`
 	PreHookMessages           []string     `json:"PreHookMessages"`
 	PostHookMessages          []string     `json:"PostHookMessages"`
 	PreHookScreenshotFiles    []string     `json:"PreHookScreenshotFiles"`
diff --git a/generator/generate_test.go b/generator/generate_test.go
index ae4b891..fc2d3b5 100644
--- a/generator/generate_test.go
+++ b/generator/generate_test.go
@@ -242,6 +242,23 @@ var wSpecCommentsWithCodeBlock = `<span><pre><code>{&#34;prop&#34;:&#34;value&#3
 var wScenarioContainerStartPassDiv = `<div class="scenario-container passed">`
 var wScenarioContainerStartFailDiv = `<div class="scenario-container failed">`
 var wScenarioContainerStartSkipDiv = `<div class="scenario-container skipped">`
+var wScenarioContainerTableDrivenHiddenDiv = `<div class="scenario-container passed hidden" data-scenario-row-index='1'>`
+var wScenarioContainerTableDrivenNestedDiv = `<div class="scenario-container passed hidden" data-scenario-row-index='1' data-tablerow='0'>`
+
+var wScenarioDataTableDiv = `
+    <table class="data-table scenario-data-table" data-spec-row-index='0'>
+      <tr>
+        <th>Browser</th><th>Status</th>
+      </tr>
+      <tbody data-rowCount=2>
+        <tr class="row-selector passed selected" data-scenario-row-index='0'>
+          <td>Chrome</td><td>Pass</td>
+        </tr>
+        <tr class="row-selector failed" data-scenario-row-index='1'>
+          <td>Firefox</td><td>Fail</td>
+        </tr>
+      </tbody>
+    </table>`
 
 var wscenarioHeaderStartDiv = `<div class="scenario-head">
   <h3 class="head borderBottom">Scenario Heading</h3>
@@ -510,6 +527,13 @@ var reportGenTests = []reportGenTest{
 	{"generate passing scenario container", "scenarioContainerStartDiv", &scenario{ExecutionStatus: pass, TableRowIndex: -1}, wScenarioContainerStartPassDiv},
 	{"generate failed scenario container", "scenarioContainerStartDiv", &scenario{ExecutionStatus: fail, TableRowIndex: -1}, wScenarioContainerStartFailDiv},
 	{"generate skipped scenario container", "scenarioContainerStartDiv", &scenario{ExecutionStatus: skip, TableRowIndex: -1}, wScenarioContainerStartSkipDiv},
+	{"generate table driven scenario container", "scenarioContainerStartDiv", &scenario{ExecutionStatus: pass, IsScenarioTableDriven: true, ScenarioTableRowIndex: 1, TableRowIndex: -1}, wScenarioContainerTableDrivenHiddenDiv},
+	{"generate nested table driven scenario container", "scenarioContainerStartDiv", &scenario{ExecutionStatus: pass, IsScenarioTableDriven: true, ScenarioTableRowIndex: 1, TableRowIndex: 0}, wScenarioContainerTableDrivenNestedDiv},
+	{"generate scenario table for table driven scenario", "scenarioTableTag", &scenario{
+		TableRowIndex:         0,
+		ScenarioDataTable:     &table{Headers: []string{"Browser", "Status"}, Rows: []*row{{Cells: []string{"Chrome", "Pass"}, Result: pass}, {Cells: []string{"Firefox", "Fail"}, Result: fail}}},
+		IsScenarioTableDriven: true,
+	}, wScenarioDataTableDiv},
 	{"generate scenario header", "scenarioHeaderStartDiv", &scenario{Heading: "Scenario Heading", ExecutionTime: "00:01:01"}, wscenarioHeaderStartDiv},
 	{"generate pass step start div", "stepStartDiv", newStep(pass), wPassStepStartDiv},
 	{"generate fail step start div", "stepStartDiv", newStep(fail), wFailStepStartDiv},
diff --git a/generator/transform.go b/generator/transform.go
index def6cdf..e8b1512 100644
--- a/generator/transform.go
+++ b/generator/transform.go
@@ -272,7 +272,35 @@ func (s bySceStatus) Swap(i, j int) {
 }
 
 func (s bySceStatus) Less(i, j int) bool {
-	return getSceState(s[i]) < getSceState(s[j])
+	// If both scenarios are scenario-table-driven with the same heading, maintain their order by row index
+	if s[i].IsScenarioTableDriven && s[j].IsScenarioTableDriven && s[i].Heading == s[j].Heading {
+		return s[i].ScenarioTableRowIndex < s[j].ScenarioTableRowIndex
+	}
+
+	stateI := s.getEffectiveState(i)
+	stateJ := s.getEffectiveState(j)
+
+	return stateI < stateJ
+}
+
+// getEffectiveState returns the worst state for a scenario, when the scenario is scenario-table-driven.
+func (s bySceStatus) getEffectiveState(index int) int {
+	scenario := s[index]
+
+	if !scenario.IsScenarioTableDriven {
+		return getSceState(scenario)
+	}
+
+	worstState := getSceState(scenario)
+	for _, otherScenario := range s {
+		if otherScenario.IsScenarioTableDriven && otherScenario.Heading == scenario.Heading {
+			state := getSceState(otherScenario)
+			if state < worstState {
+				worstState = state
+			}
+		}
+	}
+	return worstState
 }
 
 func getSceState(s *scenario) int {
@@ -366,9 +394,14 @@ func toSpec(res *gm.ProtoSpecResult, projectRoot string) *spec {
 			spec.Datatable = toTable(item.GetTable())
 			isTableScanned = true
 		case gm.ProtoItem_Scenario:
-			spec.Scenarios = append(spec.Scenarios, toScenario(item.GetScenario(), -1))
+			spec.Scenarios = append(spec.Scenarios, toScenario(item.GetScenario(), -1, nil))
 		case gm.ProtoItem_TableDrivenScenario:
-			spec.Scenarios = append(spec.Scenarios, toScenario(item.GetTableDrivenScenario().GetScenario(), int(item.GetTableDrivenScenario().GetTableRowIndex())))
+			tableDrivenScenario := item.GetTableDrivenScenario()
+			if tableDrivenScenario.GetIsScenarioTableDriven() && !tableDrivenScenario.GetIsSpecTableDriven() {
+				spec.Scenarios = append(spec.Scenarios, toScenario(tableDrivenScenario.GetScenario(), -1, tableDrivenScenario))
+			} else {
+				spec.Scenarios = append(spec.Scenarios, toScenario(tableDrivenScenario.GetScenario(), int(item.TableDrivenScenario.GetTableRowIndex()), tableDrivenScenario))
+			}
 		}
 	}
 	for _, preHookFailure := range res.GetProtoSpec().GetPreHookFailures() {
@@ -381,11 +414,12 @@ func toSpec(res *gm.ProtoSpecResult, projectRoot string) *spec {
 	if res.GetProtoSpec().GetIsTableDriven() && isTableScanned {
 		computeTableDrivenStatuses(spec)
 	}
+	computeScenarioTableStatuses(spec)
 	p, f, s := computeScenarioStatistics(spec)
 	spec.PassedScenarioCount = p
 	spec.FailedScenarioCount = f
 	spec.SkippedScenarioCount = s
-	sort.Sort(bySceStatus(spec.Scenarios))
+	sort.Stable(bySceStatus(spec.Scenarios))
 	return spec
 }
 
@@ -428,6 +462,9 @@ func hasParseErrors(errors []*gm.Error) bool {
 }
 
 func computeTableDrivenStatuses(spec *spec) {
+	if spec.Datatable == nil || len(spec.Datatable.Rows) == 0 {
+		return
+	}
 	for _, r := range spec.Datatable.Rows {
 		r.Result = skip
 	}
@@ -453,13 +490,47 @@ func SetRowFailures(failures []*hookFailure, spec *spec) {
 	}
 }
 
+func computeScenarioTableStatuses(spec *spec) {
+	// Group scenarios, key: scenario heading, value: scenarios with same table
+	scenarioTables := make(map[string][]*scenario)
+	for _, s := range spec.Scenarios {
+		if s.IsScenarioTableDriven {
+			key := s.Heading
+			scenarioTables[key] = append(scenarioTables[key], s)
+		}
+	}
+	// Update row statuses based on scenario execution results
+	for _, scenarios := range scenarioTables {
+		if len(scenarios) == 0 || scenarios[0].ScenarioDataTable == nil {
+			continue
+		}
+		table := scenarios[0].ScenarioDataTable
+		for _, s := range scenarios {
+			if s.ScenarioTableRowIndex >= 0 && s.ScenarioTableRowIndex < len(table.Rows) {
+				row := table.Rows[s.ScenarioTableRowIndex]
+				row.Result = s.ExecutionStatus
+				if s.BeforeScenarioHookFailure != nil {
+					row.Result = fail
+				}
+				if s.AfterScenarioHookFailure != nil {
+					row.Result = fail
+				}
+			}
+		}
+		// Clear table reference for all subsequent scenarios to prevent duplicate table rendering in template
+		for i := 1; i < len(scenarios); i++ {
+			scenarios[i].ScenarioDataTable = nil
+		}
+	}
+}
+
 func toScenarioSummary(s *spec) *summary {
 	var sum = summary{Failed: s.FailedScenarioCount, Passed: s.PassedScenarioCount, Skipped: s.SkippedScenarioCount}
 	sum.Total = sum.Failed + sum.Passed + sum.Skipped
 	return &sum
 }
 
-func toScenario(scn *gm.ProtoScenario, tableRowIndex int) *scenario {
+func toScenario(scn *gm.ProtoScenario, tableRowIndex int, tableDrivenScenario *gm.ProtoTableDrivenScenario) *scenario {
 	scenario := &scenario{
 		Heading:                   scn.GetScenarioHeading(),
 		ExecutionTime:             formatTime(scn.GetExecutionTime()),
@@ -475,6 +546,12 @@ func toScenario(scn *gm.ProtoScenario, tableRowIndex int) *scenario {
 		PostHookMessages:          scn.GetPostHookMessages(),
 		RetriesCount:              int(scn.RetriesCount),
 	}
+	if tableDrivenScenario.GetIsScenarioTableDriven() {
+		scenario.IsScenarioTableDriven = tableDrivenScenario.GetIsScenarioTableDriven()
+		scenario.ScenarioTableRowIndex = int(tableDrivenScenario.GetScenarioTableRowIndex())
+		scenario.ScenarioDataTable = toTable(tableDrivenScenario.GetScenarioDataTable())
+		scenario.ScenarioTableRow = toTable(tableDrivenScenario.GetScenarioTableRow())
+	}
 	for _, s := range scn.GetPreHookScreenshotFiles() {
 		scenario.PreHookScreenshotFiles = append(scenario.PreHookScreenshotFiles, s)
 		screenshotFiles = append(screenshotFiles, s)
diff --git a/generator/transform_test.go b/generator/transform_test.go
index 0b19529..77db0b9 100644
--- a/generator/transform_test.go
+++ b/generator/transform_test.go
@@ -1081,7 +1081,7 @@ func TestToScenario(t *testing.T) {
 		RetriesCount:  4,
 	}
 
-	got := toScenario(scn, -1)
+	got := toScenario(scn, -1, nil)
 	if !reflect.DeepEqual(got, want) {
 		t.Errorf("want:\n%v\ngot:\n%v\n", want, got)
 	}
@@ -1109,7 +1109,7 @@ func TestToScenarioWithHookFailures(t *testing.T) {
 		TableRowIndex:             -1,
 	}
 
-	got := toScenario(scnWithHookFailure, -1)
+	got := toScenario(scnWithHookFailure, -1, nil)
 	checkEqual(t, "", want, got)
 }
 
diff --git a/plugin.json b/plugin.json
index 74f0c35..3baf5ed 100644
--- a/plugin.json
+++ b/plugin.json
@@ -28,5 +28,5 @@
     "scope": [
         "Execution"
     ],
-    "version": "4.3.5"
+    "version": "4.4.0"
 }
\ No newline at end of file
diff --git a/themes/default/assets/js/main.js b/themes/default/assets/js/main.js
index 96c202f..f9e034e 100644
--- a/themes/default/assets/js/main.js
+++ b/themes/default/assets/js/main.js
@@ -4,8 +4,8 @@
  *  See LICENSE in the project root for license information.
  *----------------------------------------------------------------*/
 const SORTING_ORDER = {
-    DESC:'DESC',
-    ASC:'ASC',
+    DESC: 'DESC',
+    ASC: 'ASC',
 };
 
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
@@ -32,16 +32,17 @@ function describeArc(x, y, radius, startAngle, endAngle) {
 }
 
 function filterSpecList(status) {
-    $('#listOfSpecifications li.spec-name').each(function() {
+    $('#listOfSpecifications li.spec-name').each(function () {
         if ($(this).hasClass(status)) {
             $(this).show();
         } else {
             $(this).hide();
         }
     });
-    var specs = $(".spec-list a").filter(function() { return $(this).children().first().is(':visible'); })
+    var specs = $(".spec-list a").filter(function () { return $(this).children().first().is(':visible'); })
     filterSidebar(specs, $('#searchSpecifications').val().trim());
 }
+
 function updateQueryParamsForSpecsUrl(element) {
     if (!element || isSessionStorageAccessible()) {
         return;
@@ -50,8 +51,9 @@ function updateQueryParamsForSpecsUrl(element) {
     url.search = dataStore.isEmpty() ? '' : `?${dataStore}`;
     element.href = url.toString();
 }
+
 function showFirstSpecContent() {
-    let elem =  $('li.spec-name:visible:first');
+    let elem = $('li.spec-name:visible:first');
     updateQueryParamsForSpecsUrl(elem.parent()[0])
     elem.click();
     if ($('li.spec-name:visible:first').length === 0) {
@@ -62,16 +64,16 @@ function showFirstSpecContent() {
 function filterSidebar(specsCollection, searchText) {
     if (!index) return;
     tagMatches = index.Tags[searchText];
-    specsCollection.each(function() {
+    specsCollection.each(function () {
         let elem = $(this);
         updateQueryParamsForSpecsUrl(elem[0])
         var relPath = elem.attr('href').split("/");
         var fileName = relPath[relPath.length - 1];
-        var existsIn = function(arr) {
+        var existsIn = function (arr) {
             if (arr === undefined) {
                 return false;
             }
-            arr = $.grep(arr, function(a, i) {
+            arr = $.grep(arr, function (a, i) {
                 return a.indexOf(fileName) > -1;
             });
             return arr.length > 0;
@@ -86,7 +88,7 @@ function filterSidebar(specsCollection, searchText) {
 }
 
 function resetSidebar() {
-    $('#listOfSpecifications li.spec-name').each(function() {
+    $('#listOfSpecifications li.spec-name').each(function () {
         $(this).show();
     });
 }
@@ -126,9 +128,8 @@ function sortSpecsByExecutionTime(sortingOrder) {
     return $('#listOfSpecifications ul#scenarios a').sort(function (leftSpec, rightSpec) {
         var leftSpecTime = $(leftSpec).find('.spec-name span:nth-child(2)').text().split(':');
         var rightSpecTime = $(rightSpec).find('.spec-name span:nth-child(2)').text().split(':');
-
-        var leftDate = createDate.apply(null, leftSpecTime.map( time => parseInt(time)));
-        var rightDate = createDate.apply(null, rightSpecTime.map( time => parseInt(time)));
+        var leftDate = createDate.apply(null, leftSpecTime.map(time => parseInt(time)));
+        var rightDate = createDate.apply(null, rightSpecTime.map(time => parseInt(time)));
 
         if (isDescendingOrder(sortingOrder))
             return leftDate > rightDate ? -1 : 1;
@@ -145,11 +146,223 @@ function toggleSortIcons(element, sortingOrder) {
         $(element).find('.sort-icons .fa-caret-down').addClass('active');
 }
 
+const DATA_ATTRS = {
+    TABLEROW: 'tablerow',
+    SCENARIO_ROW_INDEX: 'scenario-row-index',
+    ROWINDEX: 'rowindex'
+};
+
+const SELECTORS = {
+    SCENARIO_CONTAINER: '.scenario-container',
+    SCENARIO_HEAD: '.scenario-head .head',
+    SCENARIO_DATA_TABLE: '.scenario-data-table',
+    ROW_SELECTOR: '.row-selector',
+    ERROR_CONTAINER: '.error-container',
+    SPEC_DATA_TABLE: '.data-table:not(.scenario-data-table)'
+};
+
+class TableSelectionState {
+    constructor() {
+        this.selectedSpecRow = null;
+        this.selectedScenarioRows = {};
+        this.initializeFromDOM();
+    }
+
+    initializeFromDOM() {
+        $(SELECTORS.SPEC_DATA_TABLE + ' .row-selector.selected').each((_, el) => {
+            this.selectedSpecRow = $(el).data(DATA_ATTRS.ROWINDEX);
+        });
+
+        $(SELECTORS.SCENARIO_DATA_TABLE + ' .row-selector.selected').each((_, el) => {
+            var $table = $(el).closest(SELECTORS.SCENARIO_DATA_TABLE);
+            var scenarioHeading = this.getScenarioHeadingForTable($table);
+            if (scenarioHeading) {
+                this.selectedScenarioRows[scenarioHeading] = $(el).data(DATA_ATTRS.SCENARIO_ROW_INDEX);
+            }
+        });
+    }
+
+    getScenarioHeadingForTable($table) {
+        var $firstScenario = $table.nextAll(SELECTORS.SCENARIO_CONTAINER).first();
+        return $firstScenario.length > 0 ? $firstScenario.find(SELECTORS.SCENARIO_HEAD).text().trim() : null;
+    }
+
+    setSpecRow(rowIndex) {
+        this.selectedSpecRow = rowIndex;
+    }
+
+    setScenarioRow(heading, rowIndex) {
+        this.selectedScenarioRows[heading] = rowIndex;
+    }
+
+    getTargetSpecRow() {
+        return this.selectedSpecRow !== null ? this.selectedSpecRow : 0;
+    }
+
+    getTargetScenarioRow(heading) {
+        return this.selectedScenarioRows.hasOwnProperty(heading) ? this.selectedScenarioRows[heading] : 0;
+    }
+}
+
+class ScenarioVisibilityManager {
+    constructor(tableState) {
+        this.tableState = tableState;
+    }
+
+    initialize() {
+        this.attachRowSelectionHandlers();
+        this.updateVisibility();
+    }
+
+    attachRowSelectionHandlers() {
+        $(SELECTORS.ROW_SELECTOR).click((e) => {
+            var $clickedRow = $(e.currentTarget);
+            var $table = $clickedRow.closest('table');
+            var isScenarioTable = $table.hasClass('scenario-data-table');
+            $table.find(SELECTORS.ROW_SELECTOR).removeClass('selected');
+            $clickedRow.addClass('selected');
+
+            if (isScenarioTable) {
+                var scenarioRowIndex = $clickedRow.data(DATA_ATTRS.SCENARIO_ROW_INDEX);
+                var scenarioHeading = this.tableState.getScenarioHeadingForTable($table);
+                if (scenarioHeading) {
+                    this.tableState.setScenarioRow(scenarioHeading, scenarioRowIndex);
+                }
+            } else {
+                var specRowIndex = $clickedRow.data(DATA_ATTRS.ROWINDEX);
+                this.tableState.setSpecRow(specRowIndex);
+            }
+
+            this.updateVisibility();
+        });
+    }
+
+    updateVisibility() {
+        var scenariosWithBothTables = this.detectScenariosWithBothTables();
+        this.updateScenarioContainerVisibility(scenariosWithBothTables);
+        this.updateScenarioTableVisibility();
+        this.updateErrorContainerVisibility();
+    }
+
+    detectScenariosWithBothTables() {
+        var scenariosWithBothTables = {};
+        $(SELECTORS.SCENARIO_CONTAINER).each((_, el) => {
+            var $scn = $(el);
+            var specRowIdx = $scn.data(DATA_ATTRS.TABLEROW);
+            var scenarioRowIdx = $scn.data(DATA_ATTRS.SCENARIO_ROW_INDEX);
+            var scenarioHeading = $scn.find(SELECTORS.SCENARIO_HEAD).text().trim();
+
+            if (typeof specRowIdx !== 'undefined' && typeof scenarioRowIdx !== 'undefined' && scenarioHeading) {
+                scenariosWithBothTables[scenarioHeading] = true;
+            }
+        });
+        return scenariosWithBothTables;
+    }
+
+    updateScenarioContainerVisibility(scenariosWithBothTables) {
+        $(SELECTORS.SCENARIO_CONTAINER).each((_, el) => {
+            var $scn = $(el);
+            var specRowIdx = $scn.data(DATA_ATTRS.TABLEROW);
+            var scenarioRowIdx = $scn.data(DATA_ATTRS.SCENARIO_ROW_INDEX);
+            var scenarioHeading = $scn.find(SELECTORS.SCENARIO_HEAD).text().trim();
+            var isSpecTableDriven = typeof specRowIdx !== 'undefined';
+            var isScenarioTableDriven = typeof scenarioRowIdx !== 'undefined';
+            var hasBothTables = isSpecTableDriven && isScenarioTableDriven;
+
+            if (scenariosWithBothTables[scenarioHeading] && !hasBothTables) {
+                $scn.hide();
+                return;
+            }
+
+            var showScenario = this.shouldShowScenario(
+                isSpecTableDriven,
+                isScenarioTableDriven,
+                specRowIdx,
+                scenarioRowIdx,
+                scenarioHeading
+            );
+
+            $scn.toggle(showScenario);
+        });
+    }
+
+    shouldShowScenario(isSpecTableDriven, isScenarioTableDriven, specRowIdx, scenarioRowIdx, scenarioHeading) {
+        if (!isSpecTableDriven && !isScenarioTableDriven) {
+            return true;
+        }
+
+        if (isSpecTableDriven && !isScenarioTableDriven) {
+            return specRowIdx === this.tableState.getTargetSpecRow();
+        }
+
+        if (!isSpecTableDriven && isScenarioTableDriven) {
+            return scenarioRowIdx === this.tableState.getTargetScenarioRow(scenarioHeading);
+        }
+
+        return specRowIdx === this.tableState.getTargetSpecRow() &&
+            scenarioRowIdx === this.tableState.getTargetScenarioRow(scenarioHeading);
+    }
+
+    updateScenarioTableVisibility() {
+        var tableInfo = [];
+        $(SELECTORS.SCENARIO_DATA_TABLE).each((_, table) => {
+            var $table = $(table);
+            var scenarioHeading = this.tableState.getScenarioHeadingForTable($table);
+            tableInfo.push({ $table: $table, heading: scenarioHeading });
+        });
+        tableInfo.forEach(info => {
+            var $visibleScenario = null;
+
+            if (info.heading) {
+                $(SELECTORS.SCENARIO_CONTAINER).each((_, el) => {
+                    var $scn = $(el);
+                    var heading = $scn.find(SELECTORS.SCENARIO_HEAD).text().trim();
+                    if (heading === info.heading && $scn.is(':visible')) {
+                        $visibleScenario = $scn;
+                        return false;
+                    }
+                });
+            }
+
+            if ($visibleScenario) {
+                if (info.$table.next()[0] !== $visibleScenario[0]) {
+                    info.$table.insertBefore($visibleScenario);
+                }
+                info.$table.show();
+            } else {
+                info.$table.hide();
+            }
+        });
+    }
+
+    updateErrorContainerVisibility() {
+        $(SELECTORS.ERROR_CONTAINER).each((_, el) => {
+            var $error = $(el);
+            var errorTableRowIdx = $error.data(DATA_ATTRS.TABLEROW);
+
+            // If error has no table row association, always show it
+            if (typeof errorTableRowIdx === 'undefined') {
+                $error.show();
+                return;
+            }
+
+            // If there's no spec table (selectedSpecRow is null), show all errors
+            if (this.tableState.selectedSpecRow === null) {
+                $error.show();
+                return;
+            }
+
+            // Show error only if it matches the selected row
+            $error.toggle(errorTableRowIdx === this.tableState.selectedSpecRow);
+        });
+    }
+}
+
 var initializers = {
-    "initializeFilters": function() {
+    "initializeFilters": function () {
         if (dataStore.get('FilterStatus')) {
             filterSpecList(dataStore.get('FilterStatus'));
-            $('.spec-filter').each(function() {
+            $('.spec-filter').each(function () {
                 if ($(this).data('status') === dataStore.get('FilterStatus')) {
                     $(this).addClass('active');
                 }
@@ -166,35 +379,18 @@ var initializers = {
             filterSidebar(specs, dataStore.get('SearchText'));
         }
     },
-    "attachScenarioToggle": function() {
-        $('.row-selector').click(function() {
-            $('.row-selector').each(function() { $(this).removeClass('selected'); });
-            $(this).addClass('selected');
-            var tr = $(this).data('rowindex');
-            $(".scenario-container").each(function() {
-                if (typeof $(this).data('tablerow') != 'undefined') {
-                    if ($(this).data('tablerow') === tr) { $(this).show(); } else { $(this).hide(); }
-                } else {
-                    $(this).show();
-                }
-            });
-            $(".error-container").each(function() {
-                if (typeof $(this).data('tablerow') != 'undefined') {
-                    if ($(this).data('tablerow') === tr) { $(this).show(); } else { $(this).hide(); }
-                } else {
-                    $(this).show();
-                }
-            });
-
-        });
+    "attachScenarioToggle": function () {
+        var tableState = new TableSelectionState();
+        var scenarioVisibilityManager = new ScenarioVisibilityManager(tableState);
+        scenarioVisibilityManager.initialize();
     },
-    "attachSpecFilter": function() {
-        var resetState = function() {
-            $('.spec-filter, .total-specs').each(function() {
+    "attachSpecFilter": function () {
+        var resetState = function () {
+            $('.spec-filter, .total-specs').each(function () {
                 $(this).removeClass('active');
             });
         };
-        $('.spec-filter, #pie-chart path.shadow').click(function() {
+        $('.spec-filter, #pie-chart path.shadow').click(function () {
             resetState();
             var status = $(this).data('status');
             dataStore.insertItem('FilterStatus', status);
@@ -202,71 +398,71 @@ var initializers = {
             showFirstSpecContent();
             $(this).addClass('active');
         });
-        $('.total-specs').click(function() {
+        $('.total-specs').click(function () {
             resetState();
             resetSidebar();
             dataStore.removeItem('FilterStatus');
-            var specs = $(".spec-list a").filter(function() { return $(this).children().first().is(':visible'); })
+            var specs = $(".spec-list a").filter(function () { return $(this).children().first().is(':visible'); })
             filterSidebar(specs, $('#searchSpecifications').val().trim());
             showFirstSpecContent();
             $(this).addClass('active');
         });
     },
-    "registerModals": function() {
+    "registerModals": function () {
         $('.modal-link').click(openModal);
-        $(document).keydown(function(e) {
+        $(document).keydown(function (e) {
             if (e.keyCode == 27) closeModal();
         })
         $('.close').click(closeModal)
     },
-    "registerConceptToggle": function() {
-        $('.concept').click(function() {
+    "registerConceptToggle": function () {
+        $('.concept').click(function () {
             var conceptSteps = $(this).next('.concept-steps');
             var iconClass = $(conceptSteps).is(':visible') ? "plus" : "minus";
             $(conceptSteps).fadeToggle('fast', 'linear');
             $(this).find("i.fa").removeClass("fa-minus-square").removeClass("fa-plus-square").addClass("fa-" + iconClass + "-square");
         });
     },
-    "registerMessageToggle": function() {
-        $('.message-container i.fa').click(function() {
+    "registerMessageToggle": function () {
+        $('.message-container i.fa').click(function () {
             var messages = $(this).next('.messages');
             var iconClass = messages.is(':visible') ? "plus" : "minus";
             messages.fadeToggle('fast', 'linear');
             $(this).removeClass("fa-minus-square").removeClass("fa-plus-square").addClass("fa-" + iconClass + "-square");
         });
     },
-    "registerErrorContainerToggle": function() {
-        $(".error-container .toggle-show").click(function() {
+    "registerErrorContainerToggle": function () {
+        $(".error-container .toggle-show").click(function () {
             var self = $(this);
             self.next('.exception-container').stop().toggleClass('hidden');
             self.text(self.text().indexOf("Show") > 0 ? "[Hide details]" : "[Show details]");
         });
     },
-    "registerSearch": function() {
-        $('#searchSpecifications').change(function() {
+    "registerSearch": function () {
+        $('#searchSpecifications').change(function () {
             searchText = $(this).val().trim();
             if (searchText.length == 0) {
                 dataStore.removeItem('SearchText');
                 resetSidebar();
             } else {
-                dataStore.insertItem('SearchText',searchText);
+                dataStore.insertItem('SearchText', searchText);
                 var specs = $(".spec-list a");
                 filterSidebar(specs, searchText);
             }
             showFirstSpecContent();
         });
     },
-    "registerSearchAutocomplete": function() {
+    "registerSearchAutocomplete": function () {
         new autoComplete({
             selector: 'input[id="searchSpecifications"]',
             minChars: 1,
-            source: function(term, suggest) {
+            source: function (term, suggest) {
                 term = term.toLowerCase();
                 var tagChoices = Object.keys(index.Tags);
                 var specChoices = Object.keys(index.Specs);
                 var suggestions = [];
-                var suggestionPredicate = function(type) {
-                    return function(x) {
+                var suggestionPredicate = function (type) {
+                    return function (x) {
                         if (x.toLowerCase().startsWith(term))
                             suggestions.push([x, type]);
                     }
@@ -275,19 +471,19 @@ var initializers = {
                 specChoices.forEach(suggestionPredicate("spec"));
                 suggest(suggestions);
             },
-            renderItem: function(item, search) {
+            renderItem: function (item, search) {
                 iconClass = item[1] == "tag" ? "tags" : "bars"
                 return '<div class="autocomplete-suggestion" data-value="' + item[0] + '"><i class="fa fa-' + iconClass + '" aria-hidden="true"></i>&nbsp;' + item[0] + '</div>';
             },
-            onSelect: function(e, term, item) {
+            onSelect: function (e, term, item) {
                 $('#searchSpecifications').val($(item).data('value')).change();
             }
         });
     },
-    "initializeClipboard": function() {
+    "initializeClipboard": function () {
         new Clipboard('.clipboard-btn');
     },
-    "drawPieChart": function() {
+    "drawPieChart": function () {
         var results = $("#pie-chart").data("results").split(",").map(Number);
         var total = Number($("#pie-chart").data("total"));
         var paths = $("#pie-chart path.status")
@@ -320,8 +516,8 @@ var initializers = {
 function isSessionStorageAccessible() {
     try {
         sessionStorage
-    } catch(e) {
-       return false;
+    } catch (e) {
+        return false;
     }
     return true;
 }
@@ -351,48 +547,48 @@ class DataStore {
         return JSON.stringify(this.data);
     }
 }
-$(function() {
+$(function () {
     let data = {};
-    if ( isSessionStorageAccessible()) {
+    if (isSessionStorageAccessible()) {
         data = sessionStorage;
-    } else if( window.location.search) {
+    } else if (window.location.search) {
         data = JSON.parse(decodeURI(window.location.search.slice(1)));
     }
     dataStore = new DataStore(data)
-    $.each(initializers, function(k, v) { v(); });
+    $.each(initializers, function (k, v) { v(); });
 });
 
 // Multiline section toggle functionality
 function initMultilineSections() {
-  const multilineHeaders = document.querySelectorAll('.multiline-header');
-  
-  multilineHeaders.forEach(header => {
-    header.addEventListener('click', function() {
-      const content = this.parentElement.querySelector('.multiline-content');
-      const icon = this.querySelector('.fa');
-      const isExpanded = content.classList.contains('expanded');
-      
-      // Toggle content
-      content.classList.toggle('expanded', !isExpanded);
-      
-      // Toggle icon between plus and minus
-      if (isExpanded) {
-        icon.classList.remove('fa-minus-square');
-        icon.classList.add('fa-plus-square');
-      } else {
-        icon.classList.remove('fa-plus-square');
-        icon.classList.add('fa-minus-square');
-      }
+    const multilineHeaders = document.querySelectorAll('.multiline-header');
+
+    multilineHeaders.forEach(header => {
+        header.addEventListener('click', function () {
+            const content = this.parentElement.querySelector('.multiline-content');
+            const icon = this.querySelector('.fa');
+            const isExpanded = content.classList.contains('expanded');
+
+            // Toggle content
+            content.classList.toggle('expanded', !isExpanded);
+
+            // Toggle icon between plus and minus
+            if (isExpanded) {
+                icon.classList.remove('fa-minus-square');
+                icon.classList.add('fa-plus-square');
+            } else {
+                icon.classList.remove('fa-plus-square');
+                icon.classList.add('fa-minus-square');
+            }
+        });
     });
-  });
 }
 
 // Initialize when document is ready
-document.addEventListener('DOMContentLoaded', function() {
-  initMultilineSections();
+document.addEventListener('DOMContentLoaded', function () {
+    initMultilineSections();
 });
 
 // Re-initialize when spec content is loaded (Gauge uses this event)
-$(document).on('specContentLoaded', function() {
-  initMultilineSections();
+$(document).on('specContentLoaded', function () {
+    initMultilineSections();
 });
\ No newline at end of file
diff --git a/themes/default/views/partials.tmpl b/themes/default/views/partials.tmpl
index 4fec368..a574cf8 100644
--- a/themes/default/views/partials.tmpl
+++ b/themes/default/views/partials.tmpl
@@ -245,9 +245,9 @@
           <a href="{{.ReportFile}}">
             {{if $specMeta.Failed}}
               <li class="failed spec-name">
-            {{else if $specMeta.Skipped}} 
+            {{else if $specMeta.Skipped}}
               <li class="skipped spec-name">
-            {{else}} 
+            {{else}}
               <li class="passed spec-name">
             {{end}}
               <span id="scenarioName" class="scenarioname">{{$specMeta.SpecName | escapeHTML }}</span>
@@ -433,9 +433,15 @@
 
 /* Begin rendering Scenario. Holds Execution Status and also the table-row when rendering Table Driven Scenarios */
 {{define "scenarioContainerStartDiv"}}
-  <div class="scenario-container {{if eq .ExecutionStatus "pass"}}passed{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}} data-tablerow='{{.TableRowIndex}}'{{end}}>
-    {{else if eq .ExecutionStatus "fail"}}failed{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}}  data-tablerow='{{.TableRowIndex}}'{{end}}>
-    {{else}}skipped{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}}  data-tablerow='{{.TableRowIndex}}'{{end}}>{{end}}
+  {{if .IsScenarioTableDriven}}
+    <div class="scenario-container {{if eq .ExecutionStatus "pass"}}passed{{if gt .ScenarioTableRowIndex 0}} hidden{{end}}"{{if ne .ScenarioTableRowIndex -1}} data-scenario-row-index='{{.ScenarioTableRowIndex}}'{{end}}{{if ne .TableRowIndex -1}} data-tablerow='{{.TableRowIndex}}'{{end}}>
+      {{else if eq .ExecutionStatus "fail"}}failed{{if gt .ScenarioTableRowIndex 0}} hidden{{end}}"{{if ne .ScenarioTableRowIndex -1}} data-scenario-row-index='{{.ScenarioTableRowIndex}}'{{end}}{{if ne .TableRowIndex -1}} data-tablerow='{{.TableRowIndex}}'{{end}}>
+      {{else}}skipped{{if gt .ScenarioTableRowIndex 0}} hidden{{end}}"{{if ne .ScenarioTableRowIndex -1}} data-scenario-row-index='{{.ScenarioTableRowIndex}}'{{end}}{{if ne .TableRowIndex -1}} data-tablerow='{{.TableRowIndex}}'{{end}}>{{end}}
+  {{else}}
+    <div class="scenario-container {{if eq .ExecutionStatus "pass"}}passed{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}} data-tablerow='{{.TableRowIndex}}'{{end}}>
+      {{else if eq .ExecutionStatus "fail"}}failed{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}}  data-tablerow='{{.TableRowIndex}}'{{end}}>
+      {{else}}skipped{{if gt .TableRowIndex 0}} hidden{{end}}"{{if ne .TableRowIndex -1}}  data-tablerow='{{.TableRowIndex}}'{{end}}>{{end}}
+  {{end}}
 {{end}}
 
 /* Container for Scenario Header, holds the execution time of scenario */
@@ -477,6 +483,27 @@
   {{end}}
 {{end}}
 
+/* renders a Scenario Table. Appears above scenarios that are driven by a scenario data table */
+{{define "scenarioTableTag"}}
+  {{if .ScenarioDataTable}}
+    <table class="data-table scenario-data-table"{{if ne .TableRowIndex -1}} data-spec-row-index='{{.TableRowIndex}}'{{end}}>
+      <tr>
+        {{range .ScenarioDataTable.Headers}}<th>{{. | escapeHTML }}</th>{{end}}
+      </tr>
+      <tbody data-rowCount={{len .ScenarioDataTable.Rows}}>
+        {{range $index, $row := .ScenarioDataTable.Rows}}
+          {{if eq $row.Result "pass"}}<tr class="row-selector passed{{if eq $index 0}} selected{{end}}" data-scenario-row-index='{{$index}}'>
+          {{else if eq $row.Result "fail"}}<tr class="row-selector failed{{if eq $index 0}} selected{{end}}" data-scenario-row-index='{{$index}}'>
+          {{else}}<tr class="row-selector skipped{{if eq $index 0}} selected{{end}}" data-scenario-row-index='{{$index}}'>
+          {{end}}
+            {{range $row.Cells}}<td>{{. | escapeHTML }}</td>{{end}}
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+  {{end}}
+{{end}}
+
 /* start of Concept */
 {{define "conceptStartDiv"}}
   <div class="step concept">
@@ -549,7 +576,7 @@
           {{template "Table" .}}
         </div>
       </div>
-    {{else if eq .FragmentKind 6}} 
+    {{else if eq .FragmentKind 6}}
       <div class="multiline-section">
           <div class="multiline-header">
               <i class="fa fa-plus-square" aria-hidden="true"></i>
@@ -646,7 +673,7 @@
       {{end}}
     </div>
   {{end}}
-  
+
   {{if .BeforeStepHookFailure}}
     {{ template "hookFailureDiv" .BeforeStepHookFailure }}
   {{end}}
@@ -810,6 +837,9 @@
     <div class="content">
     {{template "specCommentsAndTableTag" .}}
       {{range $index, $scn := .Scenarios}}
+        {{if $scn.IsScenarioTableDriven}}
+          {{template "scenarioTableTag" $scn}}
+        {{end}}
         {{template "scenario" $scn}}
       {{end}}