Back to all examples

Display numbers in a table so they can be scanned easily

ReactAngularWeb Components
<GoabTable 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>
    </GoabTable>

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