[GLT-4301] fixed QC report table display (#238)

changes/fix_GLT-4301

@@ -0,0 +1 @@
+Case QC Report sample tables were not being displayed

ts/component/table-builder.ts

@@ -726,9 +726,10 @@ export class TableBuilder<ParentType, ChildType> {
     this.columns.forEach((column, i) => {
       const isFirstColumn = i === 0 && !this.definition.bulkActions;
       const isChildHeader = !!this.definition.parentHeaders;
-      const combinedClass = isChildHeader
-        ? `text-black ${column.headingClass || ""}`.trim()
-        : `text-white ${column.headingClass || ""}`.trim();
+      const combinedClass = isChildHeader ? ["text-black"] : ["text-white"];
+      if (column.headingClass) {
+        combinedClass.push(column.headingClass);
+      }
       const bgColor = isChildHeader ? "bg-grey-100" : "bg-grey-300";
       addColumnHeader(row, column.title, isFirstColumn, combinedClass, bgColor);
     });

ts/util/html-utils.ts

@@ -5,21 +5,28 @@ export function addColumnHeader(
   thead: HTMLTableRowElement,
   header: string,
   firstColumn: boolean,
-  addClass?: string,
+  addClass: string[] = [],
   bgColor: string = "bg-grey-300",
   colspan?: number
 ) {
   const th = document.createElement("th");
-  th.className =
-    `p-4 text-white font-semibold ${bgColor} text-left align-text-top` +
-    (firstColumn ? "" : " border-grey-200 border-l-1");
-  if (addClass) {
-    th.classList.add(addClass);
+  // combine classes into a single string
+  const baseClasses = [
+    "p-4",
+    "text-white",
+    "font-semibold",
+    bgColor,
+    "text-left",
+    "align-text-top",
+    ...addClass,
+  ];
+  if (!firstColumn) {
+    baseClasses.push("border-grey-200", "border-l-1");
   }
+  th.className = baseClasses.join(" ");
   if (colspan) {
     th.colSpan = colspan;
   }
-
   // allow line-wrapping on "/" character
   header.split("/").forEach((part, index, arr) => {
     th.appendChild(document.createTextNode(`${index > 0 ? "/" : ""}${part}`));