Table
A set of structured data that is easy for a user to scan, examine, and compare.
Props
width
string
Width of the table. By default it will fit the enclosed content.
stickyheader
boolean
When true, the table header sticks to the top when scrolling.
Defaults to
false.
striped
boolean
When true, alternates row background colors for improved readability.
Defaults to
false.
variant
normal | relaxed
A relaxed variant of the table with more vertical padding for the cells.
Defaults to
normal.
version
1 | 2
The design system version for styling purposes.
Defaults to
1.
testId
string
Sets the data-testid attribute. Used with ByTestId queries in tests.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Events
onSort
(event: Event) => void
_sort
CustomEvent
Display numbers in a table so they can be scanned easily
<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>Display user information
const handleAddToCalendar = () => {
console.log("Add to calendar clicked");
};<GoabContainer>
<GoabText as="span" size="body-m" color="secondary" mt="none" mb="none">Housing Advisor</GoabText>
<GoabText size="heading-m" mt="none" mb="s">Tracy Hero</GoabText>
<GoabBlock direction="row" gap="s">
<GoabBlock direction="column" gap="m">
<GoabText as="span" size="heading-xs" mt="none" mb="none">Email</GoabText>
<GoabText as="span" size="heading-xs" mt="none" mb="none">Phone</GoabText>
</GoabBlock>
<GoabBlock direction="column" gap="m">
<GoabText as="span" size="body-m" mt="none" mb="none">tracyhero@email.com</GoabText>
<GoabText as="span" size="body-m" mt="none" mb="none">283-203-4921</GoabText>
</GoabBlock>
</GoabBlock>
</GoabContainer>
<GoabContainer
type="non-interactive"
accent="thick"
heading="Upcoming important due dates"
actions={
<GoabButton
type="tertiary"
size="compact"
leadingIcon="calendar"
onClick={handleAddToCalendar}>
Add to calendar
</GoabButton>
}>
<GoabTable width="100%" striped>
<tbody>
<tr>
<td>Business plan submission</td>
<td style={{ textAlign: "right" }}>June 30, 2024</td>
</tr>
<tr>
<td>Annual review</td>
<td style={{ textAlign: "right" }}>October 3, 2024</td>
</tr>
<tr>
<td>Application submission</td>
<td style={{ textAlign: "right" }}>December 20, 2024</td>
</tr>
<tr>
<td>Application review</td>
<td style={{ textAlign: "right" }}>January 3, 2025</td>
</tr>
</tbody>
</GoabTable>
</GoabContainer>Filter data in a table
const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");
const [inputError, setInputError] = useState("");
const errorEmpty = "Empty filter";
const errorDuplicate = "Enter a unique filter";
const data = useMemo(
() => [
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Ivan Schmidt",
id: "7838576954",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Luz Lakin",
id: "8576953364",
},
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Keith McGlynn",
id: "9846041345",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Melody Frami",
id: "7385256175",
},
{
status: { type: "important" as GoabBadgeType, text: "Updated" },
name: "Frederick Skiles",
id: "5807570418",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Dana Pfannerstill",
id: "5736306857",
},
],
[]
);
const [dataFiltered, setDataFiltered] = useState(data);
const handleInputChange = (detail: GoabInputOnChangeDetail) => {
const newValue = detail.value.trim();
setInputValue(newValue);
};
const handleInputKeyPress = (detail: GoabInputOnKeyPressDetail) => {
if (detail.key === "Enter") {
applyFilter();
}
};
const applyFilter = () => {
if (inputValue === "") {
setInputError(errorEmpty);
return;
}
if (typedChips.length > 0 && typedChips.includes(inputValue)) {
setInputError(errorDuplicate);
return;
}
setTypedChips([...typedChips, inputValue]);
setTimeout(() => {
setInputValue("");
}, 0);
setInputError("");
};
const removeTypedChip = (chip: string) => {
setTypedChips(typedChips.filter(c => c !== chip));
setInputError("");
};
const checkNested = useCallback((obj: object, chip: string): boolean => {
return Object.values(obj).some(value =>
typeof value === "object" && value !== null
? checkNested(value, chip)
: typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase())
);
}, []);
const getFilteredData = useCallback(
(typedChips: string[]) => {
if (typedChips.length === 0) {
return data;
}
return data.filter((item: object) =>
typedChips.every(chip => checkNested(item, chip))
);
},
[checkNested, data]
);
useEffect(() => {
setDataFiltered(getFilteredData(typedChips));
}, [getFilteredData, typedChips]);<GoabFormItem id="filterChipInput" error={inputError} mb="m">
<GoabBlock gap="xs" direction="row" alignment="start" width="100%">
<div style={{ flex: 1 }}>
<GoabInput
name="filterChipInput"
aria-labelledby="filterChipInput"
value={inputValue}
leadingIcon="search"
width="100%"
onChange={handleInputChange}
onKeyPress={handleInputKeyPress}
/>
</div>
<GoabButton type="secondary" onClick={applyFilter} leadingIcon="filter">
Filter
</GoabButton>
</GoabBlock>
</GoabFormItem>
{typedChips.length > 0 && (
<div>
<GoabText tag="span" color="secondary" mb="xs" mr="xs">
Filter:
</GoabText>
{typedChips.map((typedChip, index) => (
<GoabFilterChip
key={index}
content={typedChip}
mb="xs"
mr="xs"
onClick={() => removeTypedChip(typedChip)}
/>
))}
<GoabButton type="tertiary" size="compact" mb="xs" onClick={() => setTypedChips([])}>
Clear all
</GoabButton>
</div>
)}
<GoabTable width="full">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
{dataFiltered.map(item => (
<tr key={item.id}>
<td>
<GoabBadge type={item.status.type} content={item.status.text} icon={false} />
</td>
<td>{item.name}</td>
<td className="goa-table-number-column">{item.id}</td>
</tr>
))}
</tbody>
</GoabTable>
{dataFiltered.length === 0 && data.length > 0 && (
<GoabBlock mt="l" mb="l">
No results found
</GoabBlock>
)}Review page
<GoabText size="heading-l" mt="none" mb="none">Review your answers</GoabText>
<GoabText size="heading-s" color="secondary" mt="l" mb="none">Your situation</GoabText>
<GoabTable mt="l">
<tbody>
<tr>
<td>
<strong>What was your (the applicant's) relationship to the deceased?</strong>
</td>
<td>Other</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>My relationship to the deceased was</strong>
</td>
<td>Manager</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>
Was the deceased part of a household that was receiving Assured Income for the
Severely Handicapped (AISH) or Income Support?
</strong>
</td>
<td>No</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>Was the deceased a minor?</strong>
</td>
<td>No</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>What was the deceased's marital status at time of death?</strong>
</td>
<td>Married</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>Did the deceased have any dependents?</strong>
</td>
<td>No</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
<tr>
<td>
<strong>Was the deceased a sponsored immigrant?</strong>
</td>
<td>Yes</td>
<td>
<GoabLink>Change</GoabLink>
</td>
</tr>
</tbody>
</GoabTable>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabButton type="primary">Confirm and continue</GoabButton>
<GoabButton type="tertiary">Back to application overview</GoabButton>
</GoabButtonGroup>
);
}Set a specific tab to be active
const review = [0, 1, 2, 3];
const complete = [0, 1];<GoabTabs initialTab={2}>
<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>Show different views of data in a table
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>Show multiple actions in a compact table
const rows = [
{ status: "information", statusText: "In progress", name: "Darlene Robertson", id: 45904 },
{ status: "dark", statusText: "Inactive", name: "Floyd Miles", id: 47838 },
{ status: "success", statusText: "Active", name: "Kathryn Murphy", id: 34343 },
{ status: "important", statusText: "Recent", name: "Annette Black", id: 89897 },
{ status: "success", statusText: "Active", name: "Esther Howard", id: 12323 },
{ status: "success", statusText: "Active", name: "Jane Cooper", id: 56565 },
];<GoabTable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th style={{ textAlign: "right" }}>Id Number</th>
<th style={{ width: "1%", whiteSpace: "nowrap" }}>Edit | Flag | Send</th>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id}>
<td>
<GoabBadge
type={row.status as "information" | "dark" | "success" | "important"}
content={row.statusText}
icon={false}
/>
</td>
<td>{row.name}</td>
<td className="goa-table-number-column">{row.id}</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit" />
<GoabIconButton size="small" icon="flag" ariaLabel="Flag" />
<GoabIconButton size="small" icon="mail" ariaLabel="Send" />
</GoabBlock>
</td>
</tr>
))}
</tbody>
</GoabTable>Show number of results per page
interface User {
id: string;
firstName: string;
lastName: string;
age: number;
}
const [users, setUsers] = useState<User[]>([]);
const [pageUsers, setPageUsers] = useState<User[]>([]);
const [page, setPage] = useState<number>(1);
const [perPage, setPerPage] = useState<number>(10);
useEffect(() => {
// Generate sample data
const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver", "Mia", "Benjamin", "Charlotte", "Elijah", "Amelia", "Lucas", "Harper", "Mason", "Evelyn", "Logan"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Jackson", "Martin", "Lee", "Thompson", "White"];
const _users: User[] = [];
for (let i = 1; i <= 100; i++) {
_users.push({
id: `user-${i}`,
firstName: firstNames[(i - 1) % firstNames.length],
lastName: lastNames[(i - 1) % lastNames.length],
age: 20 + (i % 40),
});
}
setUsers(_users);
setPageUsers(_users.slice(0, perPage));
}, [perPage]);
function changePage(newPage: number) {
const offset = (newPage - 1) * perPage;
const _users = users.slice(offset, offset + perPage);
setPage(newPage);
setPageUsers(_users);
}
function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
const perPageValue = parseInt(event.value || "10");
setPage(1);
setPerPage(perPageValue);
const _users = users.slice(0, perPageValue);
setPageUsers(_users);
}<GoabTable width="100%" mb="xl">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{pageUsers.map((u) => (
<tr key={u.id}>
<td>{u.firstName}</td>
<td>{u.lastName}</td>
<td>{u.age}</td>
</tr>
))}
</tbody>
</GoabTable>
<GoabBlock alignment="center" width="100%">
<GoabBlock mb="m" alignment="center">
Show
<GoabDropdown
onChange={handlePerPageCountChangeEvent}
value={perPage.toString()}
width="9ch"
>
<GoabDropdownItem value="10" label="10" />
<GoabDropdownItem value="20" label="20" />
<GoabDropdownItem value="30" label="30" />
</GoabDropdown>
<span style={{ width: "75px" }}>per page</span>
</GoabBlock>
<GoabSpacer hSpacing="fill" />
<GoabPagination
itemCount={users.length}
perPageCount={perPage}
pageNumber={page}
onChange={(event) => changePage(event.page)}
/>
</GoabBlock>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");
};<GoabTable 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>
<GoabBadge 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>
<GoabButton size="compact" type="tertiary" onClick={handleClick}>
Assign
</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>Sort data in a table
interface User {
firstName: string;
lastName: string;
age: number;
}
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
const _users: User[] = [
{ firstName: "Christian", lastName: "Batz", age: 18 },
{ firstName: "Brain", lastName: "Wisozk", age: 19 },
{ firstName: "Neha", lastName: "Jones", age: 23 },
{ firstName: "Tristin", lastName: "Buckridge", age: 31 },
];
setUsers(_users);
}, []);
function sortData(event: GoabTableOnSortDetail) {
const _users = [...users];
_users.sort((a: any, b: any) => {<GoabTable onSort={sortData} width="100%">
<thead>
<tr>
<th>
<GoabTableSortHeader name="firstName">First name</GoabTableSortHeader>
</th>
<th>
<GoabTableSortHeader name="lastName">Last name</GoabTableSortHeader>
</th>
<th>
<GoabTableSortHeader name="age" direction="asc">
Age
</GoabTableSortHeader>
</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.firstName}>
<td>{user.firstName}</td>
<td>{user.lastName}</td>
<td>{user.age}</td>
</tr>
))}
</tbody>
</GoabTable>Task list page
<GoabText as="h1" mt="none">Apply for a service</GoabText>
<GoabCallout
type="important"
emphasis="low"
size="medium"
heading="Application incomplete"
mb="2xl"
mt="xl"
maxWidth="360px"
>
You have completed 1 of 3 sections.
</GoabCallout>
<GoabText as="h2">1. Before you start</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Read terms of use</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="success" content="Completed" ariaLabel="completed" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>
<GoabText as="h2">2. Prepare application</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Your contact details</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Your family</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Verify your identity</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>
<GoabText as="h2" mb="s">3. Schedule service</GoabText>
<GoabText size="body-s" color="secondary" mt="2xs">
You need to complete the previous section before you can start this task.
</GoabText>
<GoabTable width="100%" mt="l" mb="3xl">
<tbody>
<tr>
<td>Receive email confirmation</td>
<td className="goa-table-number-column">
<GoabBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
<tr>
<td>Pay service fee</td>
<td className="goa-table-number-column">
<GoabBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>Screen Readers
Do
Use proper semantic HTML table structure (thead, tbody, tr, th, td) for accessibility.