Adding ability to style cells in slickgrid (#19195)

This commit is contained in:
Aasim Khan
2022-04-25 09:09:53 -07:00
committed by GitHub
parent 402604ba34
commit d0aae8e95b
2 changed files with 16 additions and 2 deletions

View File

@@ -89,6 +89,7 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
let cellClasses = 'grid-cell-value-container'; let cellClasses = 'grid-cell-value-container';
let valueToDisplay = ''; let valueToDisplay = '';
let titleValue = ''; let titleValue = '';
let cellStyle = '';
if (DBCellValue.isDBCellValue(value)) { if (DBCellValue.isDBCellValue(value)) {
valueToDisplay = 'NULL'; valueToDisplay = 'NULL';
@@ -102,6 +103,9 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
} else if (typeof value === 'string' || (value && value.text)) { } else if (typeof value === 'string' || (value && value.text)) {
if (value.text) { if (value.text) {
valueToDisplay = value.text; valueToDisplay = value.text;
if (value.style) {
cellStyle = value.style;
}
} else { } else {
valueToDisplay = value; valueToDisplay = value;
} }
@@ -109,7 +113,7 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
titleValue = valueToDisplay; titleValue = valueToDisplay;
} }
return `<span title="${titleValue}" class="${cellClasses}">${valueToDisplay}</span>`; return `<span title="${titleValue}" style="${cellStyle}" class="${cellClasses}">${valueToDisplay}</span>`;
} }

View File

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