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 ? (