table column with iconcss (#13056)

src/sql/base/browser/ui/table/formatters.ts

@@ -36,6 +36,12 @@ export interface HyperlinkCellValue {
 	linkOrCommand: string | ExecuteCommandInfo;
 }
 
+export interface CssIconCellValue {
+	iconCssClass: string,
+	ariaLabel: string
+}
+
+
 export namespace DBCellValue {
 	export function isDBCellValue(object: any): boolean {
 		return (object !== undefined && object.displayValue !== undefined && object.isNull !== undefined);
@@ -50,6 +56,10 @@ export function isHyperlinkCellValue(obj: any | undefined): obj is HyperlinkCell
 	return !!(<HyperlinkCellValue>obj)?.linkOrCommand;
 }
 
+export function isCssIconCellValue(obj: any | undefined): obj is CssIconCellValue {
+	return !!(<CssIconCellValue>obj)?.iconCssClass;
+}
+
 /**
  * Format xml field into a hyperlink and performs HTML entity encoding
  */
@@ -102,6 +112,14 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
 	return `<span title="${titleValue}" class="${cellClasses}">${valueToDisplay}</span>`;
 }
 
+
+export function iconCssFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {
+	if (isCssIconCellValue(value)) {
+		return `<div role='image' aria-label="${escape(value.ariaLabel)}" class="grid-cell-value-container icon codicon slick-icon-cell-content ${value.iconCssClass}"></div>`;
+	}
+	return textFormatter(row, cell, value, columnDef, dataContext);
+}
+
 export function imageFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {
 	return `<img src="${value.text}" />`;
 }
@@ -129,7 +147,7 @@ export function slickGridDataItemColumnValueExtractor(value: any, columnDef: any
  * In this case, for no display value ariaLabel will be set to specific string "no data available" for accessibily support for screen readers
  * Set 'no data' label only if cell is present and has no value (so that checkbox and other custom plugins do not get 'no data' label)
  */
-export function slickGridDataItemColumnValueWithNoData(value: any, columnDef: any): { text: string; ariaLabel: string; } {
+export function slickGridDataItemColumnValueWithNoData(value: any, columnDef: any): { text: string; ariaLabel: string; } | CssIconCellValue {
 	let displayValue = value[columnDef.field];
 	if (typeof displayValue === 'number') {
 		displayValue = displayValue.toString();
@@ -137,6 +155,11 @@ export function slickGridDataItemColumnValueWithNoData(value: any, columnDef: an
 	if (displayValue instanceof Array) {
 		displayValue = displayValue.toString();
 	}
+
+	if (isCssIconCellValue(displayValue)) {
+		return displayValue;
+	}
+
 	return {
 		text: displayValue,
 		ariaLabel: displayValue ? escape(displayValue) : ((displayValue !== undefined) ? localize("tableCell.NoDataAvailable", "no data available") : displayValue)

src/sql/base/browser/ui/table/plugins/textWithIconColumn.ts

@@ -12,29 +12,32 @@ export interface TextWithIconColumnDefinition<T extends Slick.SlickData> extends
 	iconCssClassField?: string;
 }
 
-export interface TextWithIconColumnOptions {
+export interface TextWithIconColumnOptions<T extends Slick.SlickData> {
 	iconCssClassField?: string;
 	field?: string;
 	width?: number;
 	id?: string;
 	resizable?: boolean;
 	name?: string;
+	headerCssClass?: string;
+	formatter?: Slick.Formatter<T>
 }
 
 export class TextWithIconColumn<T extends Slick.SlickData> {
 
 	private _definition: TextWithIconColumnDefinition<T>;
 
-	constructor(options: TextWithIconColumnOptions) {
+	constructor(options: TextWithIconColumnOptions<T>) {
 		this._definition = {
 			id: options.id,
 			field: options.field,
 			resizable: options.resizable,
-			formatter: this.formatter,
+			formatter: options.formatter ?? this.formatter,
 			width: options.width,
 			name: options.name,
 			iconCssClassField: options.iconCssClassField,
-			cssClass: 'slick-icon-cell'
+			cssClass: 'slick-icon-cell',
+			headerCssClass: options.headerCssClass
 		};
 	}
 	private formatter(row: number, cell: number, value: any, columnDef: Slick.Column<T>, dataContext: T): string {