Display numbers in a table so they can be scanned easily

<GoabxTable width="100%">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th className="goa-table-number-header">ID Number</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sarah</td>
          <td>Johnson</td>
          <td className="goa-table-number-column">54</td>
        </tr>
        <tr>
          <td>Michael</td>
          <td>Chen</td>
          <td className="goa-table-number-column">4567</td>
        </tr>
        <tr>
          <td>Emily</td>
          <td>Williams</td>
          <td className="goa-table-number-column">892</td>
        </tr>
        <tr>
          <td>David</td>
          <td>Brown</td>
          <td className="goa-table-number-column">12345</td>
        </tr>
        <tr>
          <td>Jennifer</td>
          <td>Martinez</td>
          <td className="goa-table-number-column">7</td>
        </tr>
      </tbody>
    </GoabxTable>

// No logic required for this static example

<goabx-table width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th class="goa-table-number-header">ID Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sarah</td>
      <td>Johnson</td>
      <td class="goa-table-number-column">54</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>Chen</td>
      <td class="goa-table-number-column">4567</td>
    </tr>
    <tr>
      <td>Emily</td>
      <td>Williams</td>
      <td class="goa-table-number-column">892</td>
    </tr>
    <tr>
      <td>David</td>
      <td>Brown</td>
      <td class="goa-table-number-column">12345</td>
    </tr>
    <tr>
      <td>Jennifer</td>
      <td>Martinez</td>
      <td class="goa-table-number-column">7</td>
    </tr>
  </tbody>
</goabx-table>

<goa-table version="2" width="100%">
  <table style="width: 100%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th class="goa-table-number-header">ID Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sarah</td>
        <td>Johnson</td>
        <td class="goa-table-number-column">54</td>
      </tr>
      <tr>
        <td>Michael</td>
        <td>Chen</td>
        <td class="goa-table-number-column">4567</td>
      </tr>
      <tr>
        <td>Emily</td>
        <td>Williams</td>
        <td class="goa-table-number-column">892</td>
      </tr>
      <tr>
        <td>David</td>
        <td>Brown</td>
        <td class="goa-table-number-column">12345</td>
      </tr>
      <tr>
        <td>Jennifer</td>
        <td>Martinez</td>
        <td class="goa-table-number-column">7</td>
      </tr>
    </tbody>
  </table>
</goa-table>

Right-align numeric columns in tables to make them easier to scan and compare.

When to use

Use this pattern when:

Displaying numeric data in table columns (IDs, amounts, counts)
Users need to quickly scan and compare values
The table contains a mix of text and numeric data

Considerations

Use the goa-table-number-header class on <th> elements for numeric column headers
Use the goa-table-number-column class on <td> elements for numeric data cells
Right-alignment helps users visually compare magnitudes of numbers
Consider consistent decimal formatting for financial data