Back to all examples

Show different views of data in a table

const review = [0, 1, 2, 3];
  const complete = [0, 1];
<GoabxTabs initialTab={1}>
          <GoabTab heading="All">
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={`review-${i}`}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
                {complete.map((i) => (
                  <tr key={`complete-${i}`}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
                Review pending
                <GoabxBadge type="important" content="4" icon={false} />
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
              <>
                Complete
                <GoabxBadge type="information" content="338" icon={false} />
              </>
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {complete.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
    </GoabxTabs>
reviewItems = [0, 1, 2, 3];
  completeItems = [0, 1];
<goabx-tabs>
  <goab-tab heading="All">
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let i of reviewItems">
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        <tr *ngFor="let i of completeItems">
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="reviewPending">
    <ng-template #reviewPending>Review pending<goabx-badge type="important" content="4" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let i of reviewItems">
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="completeTab">
    <ng-template #completeTab>Complete<goabx-badge type="information" content="338" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let i of completeItems">
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
      </tbody>
    </goabx-table>
  </goab-tab>
</goabx-tabs>
<goa-tabs version="2">
  <goa-tab>
    <div slot="heading">All</div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Review pending<goa-badge version="2" type="important" content="4" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Complete<goa-badge version="2" type="information" content="338" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
</goa-tabs>

Use tabs to organize table data into different views based on status or category, showing counts in each tab to help workers quickly navigate to relevant items.

When to use

Use this pattern when:

  • Workers need to view data filtered by status
  • Different subsets of data require focused attention
  • Quick access to counts of items in each category is helpful
  • Switching between views should preserve context

Considerations

  • Show counts in tab headers using badges
  • Maintain consistent table structure across tabs
  • Default to the most commonly used view
  • Consider which statuses need prominent display