Adding ability to expand and columns slickgrid table rows (#19168)

* Adding ability to expand and columns tables

* Bolding icons
Fixing variable names

* Adding helper function
Making css more target

* Adding keyboard navigation and parsing treegrid data

* Adding attributes, data transformations and key events to the treegrid

* Expanded

* changing var name

* FIxing formatter name

* Adding back cell styling

* Removing comments

* Making a new TreeGrid component.
Separating treegrid logic from tableDataView

* Fixing comments

* changing method name

* Modifying only visible row dom attributes

* Removing white space, moving role attribute setter to constructor.

* Fixing some more PR comments

* Adding comments and renaming functions

* Fixing comments

* Fixing comments

* Fixing comments

* Fixing some logic and removing unused attributes from element

* Adding expandable formatter to the first column

* Making the formatter generic

* Reverting formatter code

* Adding doc comments

* Fixing comments

* Removing duplicated code

* Adding comments

* Setting columns only when the table is initialized

* Letting users set expanded state instead of forcing it to false

src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView.ts

@@ -131,7 +131,7 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
 		props.forEach((p, i) => {
 			let row = {};
 			rows.push(row);
-			row['name'] = '  '.repeat(indent) + p.name;
+			row['name'] = p.name;
 			row['parent'] = parentIndex;
 			if (!isString(p.value)) {
 				// Styling values in the parent row differently to make them more apparent and standout compared to the rest of the cells.
@@ -143,10 +143,11 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
 					text: removeLineBreaks(p.displayValue, ' '),
 					style: parentRowCellStyling
 				};
+				row['tootltip'] = p.displayValue;
 				this.convertModelToTableRows(p.value, rows.length - 1, indent + 2, rows);
 			} else {
-				row['value'] = removeLineBreaks(p.value, ' ');
-				row['tooltip'] = p.value;
+				row['value'] = removeLineBreaks(p.displayValue, ' ');
+				row['tooltip'] = p.displayValue;
 			}
 		});
 		return rows;