Skip to content

feat(#2609): add data-grid component #2993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vanessatran-ddi wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat(#2609): add data-grid component #2993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a81c2e2
feat(#2609): add data-grid component
vanessatran-ddi Aug 25, 2025
c422e42
chore: refactor extract props function
vanessatran-ddi Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/prs/angular/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
<a href="/features/2730">2730</a>
<a href="/features/2829">2829</a>
<a href="/features/3102">3102</a>
<a href="/features/2609">2609</a>
</goab-side-menu-group>
</goab-side-menu>
</section>
Expand Down
2 changes: 2 additions & 0 deletions apps/prs/angular/src/app/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import { Feat2722Component } from "../routes/features/feat2722/feat2722.componen
import { Feat2730Component } from "../routes/features/feat2730/feat2730.component";
import { Feat2829Component } from "../routes/features/feat2829/feat2829.component";
import { Feat3102Component } from "../routes/features/feat3102/feat3102.component";
import { Feat2609Component } from "../routes/features/feat2609/feat2609.component";

export const appRoutes: Route[] = [
{ path: "bugs/2152", component: Bug2152Component },
Expand Down Expand Up @@ -90,4 +91,5 @@ export const appRoutes: Route[] = [
{ path: "features/2730", component: Feat2730Component },
{ path: "features/2829", component: Feat2829Component },
{ path: "features/3102", component: Feat3102Component },
{ path: "features/2609", component: Feat2609Component },
];
34 changes: 34 additions & 0 deletions apps/prs/angular/src/app/everything.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1006,6 +1006,40 @@
{{ paginationState.total / paginationState.perPage | number: "1.0-0" }}
</goab-text>
</goab-container>
<goab-container type="interactive" padding="relaxed">
<goab-text tag="h3" size="heading-s">Data Grid (Keyboard Navigation)</goab-text>
<goab-text tag="p" size="body-s" mb="m">
The data grid wraps a table to enable keyboard navigation. Use arrow keys to move between cells.
</goab-text>
<goab-data-grid keyboardNav="table">
<goab-table width="100%">
<thead>
<tr data-grid="row">
<th data-grid="cell">Name</th>
<th data-grid="cell-1">Created</th>
<th data-grid="cell-2">Status</th>
<th data-grid="cell-3">Progress</th>
<th data-grid="cell-4">Actions</th>
</tr>
</thead>
<tbody>
@for (row of pageData; track row.name) {
<tr data-grid="row">
<td data-grid="cell">{{ row.name }}</td>
<td data-grid="cell-1">{{ row.created }}</td>
<td data-grid="cell-2">
<goab-badge [type]="row.status === 'Active' ? 'success' : 'important'" [content]="row.status"></goab-badge>
</td>
<td data-grid="cell-3">{{ row.progress }}%</td>
<td data-grid="cell-4">
<goab-button type="tertiary" size="compact">View</goab-button>
</td>
</tr>
}
</tbody>
</goab-table>
</goab-data-grid>
</goab-container>
<goab-container type="interactive" padding="relaxed">
<goab-text tag="h3" size="heading-s">Site chrome</goab-text>
<goab-column-layout>
Expand Down
2 changes: 2 additions & 0 deletions apps/prs/angular/src/app/everything.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
GoabCircularProgress,
GoabColumnLayout,
GoabContainer,
GoabDataGrid,
GoabDatePicker,
GoabDetails,
GoabDivider,
Expand Down Expand Up @@ -180,6 +181,7 @@ interface DemoFormValue {
GoabCircularProgress,
GoabColumnLayout,
GoabContainer,
GoabDataGrid,
GoabDatePicker,
GoabDetails,
GoabDivider,
Expand Down
177 changes: 177 additions & 0 deletions apps/prs/angular/src/routes/features/feat2609/feat2609.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<h2>Feature #2609: Data Grid Component</h2>
<p>This feature adds a keyboard-navigable grid wrapper component that provides ARIA-compliant accessibility for tables and grid layouts.</p>

<h3>Table with Dynamic Row Addition (Testing Dropdown Focus Issue)</h3>

<div style="margin-bottom: 1rem;">
<goab-button type="primary" (onClick)="addNewRows()" style="margin-right: 1rem;">
Add 3 New Rows (Simulate Pagination)
</goab-button>
<goab-button type="secondary" (onClick)="removeLastRows()">
Remove Last 3 Rows
</goab-button>
<span style="margin-left: 1rem;">Total rows: {{ users.length }}</span>
</div>

<p style="color: #FF6B6B; margin-bottom: 1rem;">
<strong>Test Instructions:</strong>
1. Navigate to a cell with a dropdown (Approver column) using arrow keys.
2. Click "Add 3 New Rows" button.
3. Navigate to a cell with a dropdown again.
4. Try to navigate away with arrow keys - it should take only 1 press, not 3.
</p>

<goab-data-grid keyboardNav="table">
<goab-table width="100%" mb="xl" (onSort)="handleSort($event)">
<thead>
<tr data-grid="row">
<th style="padding-bottom:0" data-grid="cell"><goab-checkbox mt="2" (onChange)="selectAll($event)" [checked]="isSelectedAll"></goab-checkbox></th>
<th data-grid="cell-1"><goab-table-sort-header name="idNumber">ID</goab-table-sort-header></th>
<th data-grid="cell-2"><goab-table-sort-header name="nameOfChild">Name</goab-table-sort-header></th>
<th data-grid="cell-3"><goab-table-sort-header name="status">Status</goab-table-sort-header></th>
<th data-grid="cell-4">Approver (Dropdown)</th>
<th data-grid="cell-5">Actions</th>
</tr>
</thead>
<tbody>
@for (user of users; track user.idNumber) {
<tr data-grid="row">
<td data-grid="cell"><goab-checkbox [checked]="isSelected(user.idNumber)" (onChange)="toggleSelection(user.idNumber, $event)"></goab-checkbox></td>
<td data-grid="cell-1">{{ user.idNumber }}</td>
<td data-grid="cell-2">{{ user.nameOfChild }}</td>
<td data-grid="cell-3"><goab-badge [type]="getStatusBadgeType(user.status)" [content]="user.status"></goab-badge></td>
<td data-grid="cell-4">
<goab-dropdown [value]="user.approver" (onChange)="onApproverChange(user.idNumber, $event)">
<goab-dropdown-item value="Sarah Ellis">Sarah Ellis</goab-dropdown-item>
<goab-dropdown-item value="John Doe">John Doe</goab-dropdown-item>
<goab-dropdown-item value="Jane Smith">Jane Smith</goab-dropdown-item>
</goab-dropdown>
</td>
<td data-grid="cell-5">
<goab-button type="tertiary" (onClick)="onOpen(user.idNumber)">
Open
</goab-button>
</td>
</tr>
}
</tbody>
</goab-table>
</goab-data-grid>

<h3>Containers (Layout Mode)</h3>
<p>Layout mode allows arrow keys to wrap between rows when reaching the edge.</p>
<goab-data-grid keyboardNav="layout">
@for (user of users; track user.idNumber) {
<goab-container mt="l" data-grid="row">
<goab-block direction="row" gap="m" alignment="start">
<goab-checkbox data-grid="cell-0" [checked]="isSelected(user.idNumber)" (onChange)="toggleSelection(user.idNumber, $event)"></goab-checkbox>

<goab-block direction="column" gap="s" alignment="start" style="flex: 1;">
<goab-block direction="row" gap="s" alignment="center">
<strong data-grid="cell-1">{{ user.nameOfChild }}</strong>
<goab-block data-grid="cell-2">
<goab-badge [type]="getStatusBadgeType(user.status)" [content]="user.status"></goab-badge>
</goab-block>
</goab-block>

<goab-block direction="row" gap="xl" alignment="start">
<goab-block direction="column" gap="s" alignment="start">
<goab-block direction="column" gap="xs" data-grid="cell-4">
<strong>Updated</strong>
<span>{{ user.updated }}</span>
</goab-block>
<goab-block direction="column" gap="xs" data-grid="cell-7">
<strong>Program ID</strong>
<span>{{ user.programId }}</span>
</goab-block>
</goab-block>

<goab-block direction="column" gap="s" alignment="start">
<goab-block direction="column" gap="xs" data-grid="cell-5">
<strong>Email</strong>
<span>{{ user.email }}</span>
</goab-block>
<goab-block direction="column" gap="xs" data-grid="cell-8">
<strong>Service access</strong>
<span>{{ user.serviceAccess }}</span>
</goab-block>
</goab-block>

<goab-block direction="column" gap="s" alignment="start">
<goab-block direction="column" gap="xs" data-grid="cell-6">
<strong>Program</strong>
<span>{{ user.program }}</span>
</goab-block>
<goab-block direction="column" gap="xs" data-grid="cell-9">
<strong>Approver</strong>
<goab-dropdown [value]="user.approver" (onChange)="onApproverChange(user.idNumber, $event)">
<goab-dropdown-item value="Sarah Ellis">Sarah Ellis</goab-dropdown-item>
<goab-dropdown-item value="John Doe">John Doe</goab-dropdown-item>
<goab-dropdown-item value="Jane Smith">Jane Smith</goab-dropdown-item>
</goab-dropdown>
</goab-block>
</goab-block>
</goab-block>
</goab-block>

<goab-button type="tertiary" data-grid="cell-3" (onClick)="onOpen(user.idNumber)">
Open
</goab-button>
</goab-block>
</goab-container>
}
</goab-data-grid>

<h3>Table with Colspan and Different Column Counts</h3>
<p>This table tests navigation with varying column counts and colspan attributes. Use arrow keys to navigate and observe focus behavior.</p>
<goab-data-grid keyboardNav="table">
<goab-table width="100%" mb="xl">
<thead>
<tr data-grid="row">
<th data-grid="cell">Column 1</th>
<th data-grid="cell-1">Column 2</th>
<th data-grid="cell-2">Column 3</th>
<th data-grid="cell-3">Column 4</th>
<th data-grid="cell-4">Column 5</th>
</tr>
</thead>
<tbody>
<tr data-grid="row">
<td data-grid="cell">Row 1, Cell 1</td>
<td data-grid="cell-1">Row 1, Cell 2</td>
<td data-grid="cell-2">Row 1, Cell 3</td>
<td data-grid="cell-3">Row 1, Cell 4</td>
<td data-grid="cell-4">Row 1, Cell 5</td>
</tr>
<tr data-grid="row">
<td data-grid="cell">Row 2, Cell 1</td>
<td data-grid="cell-1" colspan="2">Row 2, Cell 2 (spans 2 cols)</td>
<td data-grid="cell-2" colspan="2">Row 2, Cell 3 (spans 2 cols)</td>
</tr>
<tr data-grid="row">
<td data-grid="cell" colspan="3">Row 3, Cell 1 (spans 3 cols)</td>
<td data-grid="cell-1" colspan="2">Row 3, Cell 2 (spans 2 cols)</td>
</tr>
<tr data-grid="row">
<td data-grid="cell">Row 4, Cell 1</td>
<td data-grid="cell-1">Row 4, Cell 2</td>
<td data-grid="cell-2">Row 4, Cell 3</td>
<td data-grid="cell-3">Row 4, Cell 4</td>
<td data-grid="cell-4">Row 4, Cell 5</td>
</tr>
<tr data-grid="row">
<td data-grid="cell" colspan="5">Row 5, Single Cell (spans all 5 cols)</td>
</tr>
</tbody>
</goab-table>
</goab-data-grid>

<h3>Related Documents (Links with Hidden Keyboard Icon)</h3>
<goab-data-grid keyboardNav="layout" [keyboardIcon]="false">
<goab-block data-grid="row">
<goab-link data-grid="cell"><a href="https://www.w3.org/TR/wai-aria-1.1/">ARIA 1.1 Specification</a></goab-link>
<goab-link data-grid="cell-1"><a href="https://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></goab-link>
<goab-link data-grid="cell-2"><a href="https://www.w3.org/WAI/intro/aria.php">WAI-ARIA Overview</a></goab-link>
<goab-link data-grid="cell-3"><a href="https://www.w3.org/WAI/intro/wcag">WCAG Overview</a></goab-link>
</goab-block>
</goab-data-grid>
Loading