Component proposal: Data Grid #6461

Component name

• official name: Data Grid
• alias: Data table

Component description

The Data Grid pattern enables viewing and augmenting large data set. All data can be sorted, edited, and filtered. All data is viewable in a single table without navigating away from the data grid. After interacting with the data, the user is able to synthesize the information and make decisions about the next steps.

Why USWDS needs this component

A Data Grid is an interactive, structured table that allows users to efficiently view, edit, filter, sort, and manipulate large datasets. Unlike static tables, a Data Grid provides dynamic functionality such as search, pagination, column customization, and actions to support data analysis and decision-making.

If the component is dynamic, describe its interactive states.
• The columns and rows can be filtered, sorted, pinned, and selected
• As the population of data is greater, the table is paginated

How the component works

• What common interactions does this component support?

  • Quickly analyze data with various configurable tools. A toolbar can be added that includes a search bar, toggles to show/hide columns, and the ability to include additional custom components, like filters. Search, filtering, sorting, visibility, visual order, and pinning can also be applied per column.
  • Compliant with Web Content Accessibility Guidelines (WCAG) Level AA. See below for more details.
  • Allow users to easily interact with and update data with cell editors. Types include checkboxes, text inputs, and text areas.
  • Customizable table properties, like pagination controls and column order, to enhance the experience for your particular use case. Implementors can also define custom sizes for columns in order to best present the data. Users are able to resize column widths while using the app.

• What kind of content would be ideal for this component?

  • large data sets
  • data sets with many metadata relationships
  • data that supports with planning and making decisions

Real-world examples

• Users requiring many types of data for making decisions
• In the VA Clinical setting, the heavy data users are clinicians viewing
  • health factors such as age, blood pressure, pulse, weight, various lab results, recent visits, etc
  • logistics such as types of specialist visits, next action items, past or upcoming lab results that may impact the next action
• Is there an audience that has a unique ability to determine if this component is successful?
  • In the VA Clinical Decision Support Collaborative, we have two products that will use this pattern including the Lung Cancer Screening app and the Task Manager app. We will partner with LCS to perform usability testing with their clinicians.

When to use this component and when to consider something else

• What common interactions does this component support?

  • Quickly analyze data with various configurable tools. A toolbar can be added that includes a search bar, toggles to show/hide columns, and the ability to include additional custom components, like filters. Search, filtering, sorting, visibility, visual order, and pinning can also be applied per column.
  • Compliant with Web Content Accessibility Guidelines (WCAG) Level AA. See below for more details.
  • Allow users to easily interact with and update data with cell editors. Types include checkboxes, text inputs, and text areas.
  • Customizable table properties, like pagination controls and column order, to enhance the experience for your particular use case. Implementors can also define custom sizes for columns in order to best present the data. Users are able to resize column widths while using the app.

• What kind of content would be ideal for this component?

  • large data sets
  • data sets with many metadata relationships
  • data that supports with planning and making decisions

Usability considerations

• What does this component need to do to be successful and effective?

  • Use a Data Grid when your users need to:

    • Organize and display structured clinical data in a tabular format.
    • Sort, filter, and compare multiple data points across data (e.g., patients or timeframes).
    • View large datasets efficiently.
    • Quickly edit data or make decisions about their task.

• What would make this component less usable?

  • For highly interactive workflows that require complex decision-making beyond data review.
  • When a visual representation (e.g., charts, dashboards) better supports analysis or trends.
  • If a simpler list view is more intuitive for scanning or task completion.

• How might the mobile context affect how you use this component?

  • pattern is 400% responsive

Accessibility considerations

Identify any key accessibility considerations. When possible, provide supporting links to research findings or supporting evidence (your own or other research).

• Will users of any assistive technologies struggle with this component?

  • No, the pattern was built with a11y for keyboard navigation, screen readers, zoom magnification, voice command, etc.

• Describe how this component might become inaccessible.

  • Use VACDS components within DataGrid, rather than components from other libraries or design systems. This ensures that the most accessible and visually consistent experience is provided to users.
  • Use readable column header names, as they are referenced on other elements within DataGrid. For example, the accessible name for the table header column menu buttons matches the table header column name.
  • Use unique IDs and column names for each column.
  • DataGrid has fully fledged keyboard functionality. The focus order of each element within the component matches logical reading order. You do not need to add a tabindex to the component.

• Does this component directly support any federal laws, guidance, or policies?

  • Yes, the pattern adheres to
    • Section 508: "The pre-fill pattern enhances accessibility by simplifying the form completion process, making it easier for users with disabilities to interact with digital forms."
    • The U.S. Digital Services Playbook: "The playbook emphasizes the importance of user-centered design and iterating based on user feedback. The prefill pattern aligns with these principles by addressing user pain points and improving the overall digital experience."

Edits added May 19, 2025

1. New Features

• sticky header and column
• developer experience enables dynamic table data control

New Features	Screenshots
Sticky Header
Sticky Column

2. A11y enhancements

• column header interactions
• main and header search
• cell interactions
• improved responsive UI design

A11y enhancements	Screenshots	Screenshots
main and header search		(no further images)
improved responsive UI

3. Added Guidance

• loading behaviors: best practice for using the loading component
• alerts: best practice for using the alert component to convey data and system status

Guidance Type	Screenshots	Screenshots
Loading Behavior
Alerts

Edits added June 24, 2025

Usability Research

Usability Testing using a data grid prototype was performed with clinicians in five (5) sessions. The overall impression was positive and that the data grid supports their workflow. The research provides recommendations for enhancements. Of which, the date range picker is under review.

The conversation guide, research findings, and research plan are available here for review.

Links

• Figma - Clinical Design System UI Kit
• Storybook - Engineer documentation
• VA Clinical Design System Documentation
• Usability research for data grid

Who’s involved

@aklausmeier VA Design and Product Owner
@AConnJob former Design Lead
@helene-mccarron Tech Lead
@juanpasten-tw current Design Lead
@adlco Product Manager Lead
@obliviga Accessibility Specialist Engineer
@sangmee-specht Engineer
@bennguyenhcd Researcher
@JohnHutchison-TW Engineer