Back to all examples

Show different views of data in a table

ReactAngularWeb Components
const review = [0, 1, 2, 3];
  const complete = [0, 1];
<GoabTabs initialTab={1}>
          <GoabTab heading="All">
            <GoabTable 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>
                      <GoabBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabButton type="tertiary" size="compact">Action</GoabButton>
                    </td>
                  </tr>
                ))}
                {complete.map((i) => (
                  <tr key={`complete-${i}`}>
                    <td>
                      <GoabBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabButton type="tertiary" size="compact">Action</GoabButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabTable>
          </GoabTab>
          <GoabTab
            heading={
                Review pending
                <GoabBadge type="important" content="4" icon={false} />
            }
          >
            <GoabTable 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>
                      <GoabBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabButton type="tertiary" size="compact">Action</GoabButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabTable>
          </GoabTab>
          <GoabTab
            heading={
              <>
                Complete
                <GoabBadge type="information" content="338" icon={false} />
              </>
            }
          >
            <GoabTable 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>
                      <GoabBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabButton type="tertiary" size="compact">Action</GoabButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabTable>
          </GoabTab>
    </GoabTabs>

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