Data Grid

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.

Maturity level - under review, subject to change - use with caution

Features

  • 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.

View the React component implementation details and all variants in Storybook.

Component examples

When to Use a Data Grid

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.

When Not to Use a Data Grid

  • 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.

Key Differences: Data Grid vs. Static Table

Static Table

Interactivity

Displays data in a fixed layout

Pagination

Shows all rows at once, leading to potential performance issues

Customization

Fixed structure with no user adjustments

Actions

No built-in actions

Data Grid

Interactivity

Allows sorting, filtering, and inline actions

Pagination

Supports large datasets with pagination

Customization

Columns can be resized, reordered, or hidden

Actions

Enables in-cell editing and search through the whole dataset or to a specific column.

Best Practices

  • Prioritize readability – Use clear headers and meaningful column labels. Place the most relevant data in the first columns and keep the content focused by removing unnecessary details. Avoid overcrowding the table with too many data points, such as rarely used information.
  • Use filtering and sorting – Allow clinicians to refine data views efficiently.
  • Highlight critical information – Use color-coded tags, bold text, or icons to make key data easily scannable using the right format.

Accessibility

  • 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.
  • The DataGrid toolbar adapts responsively to different screen sizes. On smaller screens, the filter controls will be nested within an accordion component for optimized space and usability.

Keyboard navigation

  • For the most part, you can use the Tab key to navigate to each interactive element.
  • Menu
    • When focus is set on the Menu trigger, you can press Enter to open or close it.
    • When the Menu is open, you can use Tab to navigate to each Menu item.
    • When Tab is pressed on the last Menu item, the Menu will close and focus will move to the next interactive element.
    • When Shift + Tab is pressed on the Menu trigger, the Menu will close and focus will move to the previous interactive element.
  • Table header resizer
    • When focus is set on the resizer element, you can use the left and right arrow keys to change the size of the column.
  • Table body
    • You can enter and leave the table body with the Tab key. Upon entering the table, focus will be set on the first table body cell by default.
    • When a table body cell has focus, you can use the arrow keys (left, right, up, and down) to navigate to other cells.
    • When navigating away from the table using the Tab key, returning to the table will restore focus to the last active cell. This allows keyboard users to seamlessly resume their work from where they left off.
  • Editable table cells
    • If the cell is editable, you can press Enter to enter “Editing Mode”.
    • When in “Editing Mode”, you can choose to make, save, or cancel changes:
      • Pressing Enter or Tab will save changes.
      • Pressing Escape will cancel changes.
      • Any of the three actions will exit “Editing Mode” and set focus back to the associated cell.

Data Grid Toolbar

The Data Grid Toolbar is a section that sits above the data table and provides users with tools to filter, or act on the dataset. It enhances the Data Grid by enabling contextual actions such as search, filtering, and other utilities like showing or hiding columns and switching views, helping clinicians quickly narrow down or take action on the data.

The toolbar is flexible enough to accommodate a variety of use cases, allowing the product team to adjust the order, width, and layout of the filters as needed for the specific workflow or clinical context.