Show status in a table

interface BadgeValue {
  key: number;
  type: GoabBadgeType;
  content: string;
}

const badgeValues: BadgeValue[] = [
    { key: 1, type: "important", content: "Pending" },
    { key: 2, type: "emergency", content: "Failed" },
    { key: 3, type: "success", content: "Complete" },
    { key: 4, type: "information", content: "In progress" },
    { key: 5, type: "midtone", content: "Closed" },
    { key: 6, type: "success", content: "Complete" },
  ];

  const handleClick = () => {
    console.log("clicked");
  };

<GoabxTable width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Name</th>
          <th className="goa-table-number-header">File number</th>
          <th style={{ width: "1%", whiteSpace: "nowrap" }}></th>
        </tr>
      </thead>
      <tbody>
        {badgeValues.map((badge) => (
          <tr key={badge.key}>
            <td>
              <GoabxBadge type={badge.type} content={badge.content} icon={false} />
            </td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td className="goa-table-number-column">1234567890</td>
            <td>
              <GoabxButton size="compact" type="tertiary" onClick={handleClick}>
                Assign
              </GoabxButton>
            </td>
          </tr>
        ))}
      </tbody>
    </GoabxTable>

badgeValues: BadgeValue[] = [
    { type: "important", content: "Pending" },
    { type: "emergency", content: "Failed" },
    { type: "success", content: "Complete" },
    { type: "information", content: "In progress" },
    { type: "midtone", content: "Closed" },
    { type: "success", content: "Complete" },
  ];

  onClick(): void {
    console.log("clicked");
  }

<goabx-table width="100%">
  <thead>
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th class="goa-table-number-header">File number</th>
      <th style="width: 1%; white-space: nowrap"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let badge of badgeValues">
      <td>
        <goabx-badge [type]="badge.type" [content]="badge.content" [icon]="false"></goabx-badge>
      </td>
      <td>Lorem ipsum dolor sit amet consectetur.</td>
      <td class="goa-table-number-column">1234567890</td>
      <td>
        <goabx-button size="compact" type="tertiary" (onClick)="onClick()">Assign</goabx-button>
      </td>
    </tr>
  </tbody>
</goabx-table>

const badgeValues = [
  { type: "important", content: "Pending" },
  { type: "emergency", content: "Failed" },
  { type: "success", content: "Complete" },
  { type: "information", content: "In progress" },
  { type: "midtone", content: "Closed" },
  { type: "success", content: "Complete" },
];

const tbody = document.getElementById("table-body");

badgeValues.forEach((badge) => {
  const row = document.createElement("tr");
  row.innerHTML = `
    <td><goa-badge version="2" type="${badge.type}" content="${badge.content}" icon="false"></goa-badge></td>
    <td>Lorem ipsum dolor sit amet consectetur</td>
    <td class="goa-table-number-column">1234567890</td>
    <td><goa-button version="2" size="compact" type="tertiary">Assign</goa-button></td>
  `;
  const button = row.querySelector("goa-button");
  button.addEventListener("_click", () => console.log("clicked"));
  tbody.appendChild(row);
});

<goa-table version="2" width="100%" id="status-table">
  <table width="100%">
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th class="goa-table-number-header">File number</th>
        <th style="width: 1%; white-space: nowrap"></th>
      </tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</goa-table>