Vue

High-Performance Vue Data Grid

A professional data table engineered for performance. Featureful and easy to configure, Bryntum Vue Grid delivers a top-notch user experience, for simple and complex data tables.

View Examples

Download Trial

Clear and concise documentation

A feature-rich Grid component library for Vue

Bryntum Vue Grid comes with selecting, editing, filtering, sorting, file exporting, and printing features, and so much more! Display and manage data as a tree or nested grid, or in multiple grid instances. Browse our interactive demos:

View all features

Vue data table code example

The following code example shows the setup for a Bryntum Vue Grid component with sample data in the App.vue file.

<template>
    <template>
        <bryntum-grid
            ref="grid"
            v-bind="gridConfig"
            :data="data"
        />
    </template>

    <script>
    import { ref, reactive } from 'vue';

    import {
        BryntumGrid
    } from '@bryntum/grid-vue-3';

    import { useGridConfig } from '@/AppConfig';

    export default {
        name : 'App',

        components : {
            BryntumGrid
        },

        setup() {
            const grid = ref(null);

            const gridConfig = reactive(useGridConfig());

            const data = ref(null);

            data.value = [
                { name : 'Dan Stevenson', city : 'Los Angeles' },
                { name : 'Talisha Babin', city : 'Paris' }
            ];

            return {
                grid,
                gridConfig,
                data
            };
        }
    };
    </script>

    <style>
    @import './App.css';
    </style>
</template>

Exceptional Grid performance

Bryntum Vue Grid uses several techniques for peak rendering and scrolling performance:

Virtual rendering
Minimal DOM interactions
Extensive element reuse
Modern CSS optimizations

Test the Bryntum Vue Grid performance with our big data set demo.

Performance Review

Dynamic rendering with Vue template syntax

Render custom columns, headers, and tooltips using Vue components in the Bryntum Vue Grid. Easily use Vue HTML-based template syntax in components and keep rendering logic and markup in sync.

But our Bryntum renderer efficiently implements conditional logic and outputs visually rich cell content, so you don’t have to use Vue templating to render content.

View docs

Themed, customizable, and responsive

Whether you prefer ready-made styles or have your own vision, we’ve got you covered. Bryntum Vue Grid ships with five elegant themes that you can effortlessly adapt, or create a custom theme.