Sponsor Star

Data Grid Vue

Natively designed for Vue3

Designed for full customization

Flat HTML and CSS grid for full layout control

All features included in MIT license

npmCI/CDGitHub

Native Vue3 Design

This data grid is not a port from another framework or component. All design decisions were made for efficient use in a Vue application that feels natural.

Flat HTML Architecture

There is only a single layer of nesting for the data grid rows to be able to scroll. The rest of the HTML is flat and arranged with CSS grid. This allows for full layout control whether its rendered on an entire page or nested deep within a few flex containers.

Full Customization

Nearly every part of the data grid can be customized with a slot template. A custom data service can be provided to customize how data is retrieved, paged, sorted, and filtered. Included server-side data service has hooks for request and response contract mapping.

Accessible

All features and markup have correct setup to be fully screen-readable and keyboard-navigatable. This includes custom descriptions for screen readers to describe the current state of the data grid.

Few Dependencies

Entirely implemented using built-in browser functionality. The only dependencies used are flat, provide easier Vue access to browser APIs, and were split into another package to be leveraged on their own.
dragon drop vuenative event vue

MIT License, Forever

All features are included in the MIT license and free to use for commercial and personal use. We intend to keep this license and include all features free forever.