From a5cc0801991c6e4a34c20caff90a62584c8d80e1 Mon Sep 17 00:00:00 2001 From: Alex Taker Date: Wed, 11 Dec 2024 11:44:11 -0500 Subject: [PATCH] va-table: Parse html to plain string before setting it to CSS content (#1431) * va-table: Parse html to plain string before setting it to css content * fix test state --- .../va-table/va-table-inner/va-table-inner.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx index c8286dc5a..58848e37e 100644 --- a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx +++ b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx @@ -129,6 +129,18 @@ export class VaTableInner { } } + /** + * escapes html entities and returns a string + * ex: 'Hall & Oates' returns 'Hall & Oates' + * @param innerHTML string of html + * @returns parsed string escaped of html entities + */ + parseHTMLToString (innerHTML:string) { + let parser = new DOMParser(); + + return parser.parseFromString(innerHTML, 'text/html').documentElement.textContent; + } + /** * Generate the markup for a table row where row is the zero-indexed row number */ @@ -141,9 +153,9 @@ export class VaTableInner { {Array.from({ length: this.cols }).map((_, i) => { const slotName = `va-table-slot-${row * this.cols + i}`; const slot = ; - const header = this.el.querySelector( + const header = this.parseHTMLToString(this.el.querySelector( `[slot="va-table-slot-${i}"]`, - ).innerHTML; + ).innerHTML); const dataSortActive = row > 0 && this.sortindex === i ? true : false; return i === 0 || row === 0 ? (