Data Grid

A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.

The datagrid follows the ARIA Authoring Practices Guide for standardized keyboard navigation.

Multi-select rows with checkboxes for bulk operations. Use multi-select when users need to perform actions on many items at once (like delete, export, or bulk edit), placing checkboxes as the first column and setting the selected attribute for proper accessibility.

Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.

A single select datagrid allows users to choose exactly one row from a data table by providing radio buttons in the first column, ensuring only one item has a selection at a time. To enable single select, place nve-radio input as the first grid cell of each row. Set name attribute on each radio to ensure to associate the same radio group.

Row actions enable extra user actions specific to a given row. Place a nve-icon-button at the end of the grid row for actions.

Expandable row groups for hierarchical data organization. Use row groups when items have parent-child relationships or nested details (like sessions with uploads, orders with line items), allowing users to progressively disclose details and maintain compact views of large hierarchies.

The footer displays contextual information or extra user actions such as pagination.

Use the pagination pattern when working with large data sets that need incremental loading or filtering for performance or useability.

Fixed-height scrollable grid with persistent header and footer. Use scrollable grids when displaying large datasets where users need to maintain context of column headers and footer controls (like pagination) while scrolling through many rows, improving navigation without losing orientation.

Programmatic scroll control using the grid scrollTo API. Use for scroll-to-top buttons, jump-to-row navigation, or restoring scroll position after data refreshes in large datasets.

Using nve-layout="column" the grid to fill any remaining space of a parent containing element. This is helpful for preserving the grid height/fill while dynamic content above can freely change.

Create column actions by using the nve-icon-button to trigger dropdowns or panels that reveal more actions to the user.

Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.

Basic grid content display with evenly distributed columns, including standard data presentation and cell content wrapping behavior.

Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.

Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.

Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.

Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.

Center-aligned column content for improved visual balance and data presentation, enhancing readability for numeric and centered data types.

Right-aligned column content for numeric data and values, providing consistent visual alignment and improved data scanning for financial or metric displays.

Left-aligned column content for text data and labels, providing consistent visual alignment and improved readability for textual information.

Users can customize their data view through a dropdown menu above the grid, allowing them to show/hide columns and restore default settings for a personalized experience.

Sortable columns with visual indicators for data organization. Use sort buttons on columns where sorting is meaningful (dates, numbers, names) to help users find patterns, identify outliers, or locate specific data points, supporting three states: none, ascending, and descending.

CSS anchor positioning for tooltips within grid cells, with proper tooltip placement and content visibility in constrained grid environments.

Row sort sorts the rows of the grid.

Infinite scroll loads data as the user scrolls down the grid.

Datagrid performance is heavily dependent on the content within the grid as well as the host environment.

Performance virtual scroll tests the performance of the grid.

Nest Grid in Cards for UI patterns such as card tab groups. Use the container="flat" attribute to enable proper styling of the grid when nested within a card.

Grid integrated with tabs for organized data presentation, enabling many data views within a single interface for comprehensive information display.

Loading placeholder state with progress indicator. Use grid placeholders during initial data fetching or while loading large datasets, providing visual feedback that content is coming and preventing layout shift when rows populate, improving perceived performance.

Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.

Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.

Different focusable element types within grid cells, with keyboard navigation and accessibility support for interactive content.

Use a right aligned nve-page-panel when displaying advanced filtering or display settings for the grid. Item detail panels should be open using a action button placed at the end of the grid row.

Panel Grid displays key value type data sets for details of a given item in a collection.

Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.

Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.

Do not set the column count to a value that does not match the number of cells in the row.

Ensure column count matches the number of cells in the row to preserve keyboard navigation.

Use the nve-sort-button to add grid row sort. The grid follows the ARIA sort spec and automatically sets the appropriate accessibility related attributes to convey the current sorting state.