Getting Started with Bryntum Grid in Vue

Try Vue demos

Bryntum Grid is delivered with a variety of Vue demo applications showing its functionality. All demo applications have been verified to be compatible with Node.js 20.

View online Vue demos Build and run Vue demos

Version requirements

Minimum supported:

  • Vue: 3.0.0 or higher
  • TypeScript: 3.6.0 or higher (for TypeScript application)
  • Vite 4.0.0 or higher (for application build with Vite)

Recommended:

  • Vue: 3.0.0 or higher
  • TypeScript: 4.0.0 or higher (for TypeScript application)
  • Vite 5.0.0 or higher (for application build with Vite)

Please note that this guide is designed for creating a Vue 3 application. Since Vue 2 has reached end of life, we no longer maintain guides or components for Vue 2. We recommend upgrading to Vue 3 for continued support and compatibility.

Create Vue 3 application

To get started, the broad steps are as follows:

  1. Access to npm registry
  2. Create Application
  3. Install component
  4. Add component to Application
  5. Apply styles
  6. Run the application

The application we will be building now should look like the illustration below:

Getting Started on Bryntum Grid with Vue Result

Access to npm registry

Bryntum components are commercial products, hosted in a private Bryntum repository. Please refer to our Npm Repository Guide for a complete access information.

Create Application

Similarly to all the examples shipped with the distribution, we will be using Vue CLI to build Vue applications.

Type the following command to install Vue CLI:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes✔️
✔ Add JSX Support? … No✔️ / Yes
✔ Add Vue Router for Single Page Application development? … No✔️ / Yes
✔ Add Pinia for state management? … No✔️ / Yes
✔ Add Vitest for Unit testing? … No✔️ / Yes
✔ Add an End-to-End Testing Solution? … No✔️ / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No✔️ / Yes
✔ Add Prettier for code formatting? … No✔️ / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No✔️ / Yes

Scaffolding project in ./<your-project-name>...
Done.

We are using the above config in this quick start guide but feel free to make any changes.

You can then move to your application folder:

cd <your-project-name>

Please note some generated files will no longer be needed in your app, you can safely remove .src/components/HelloWorld.vue and src/assets/logo.png. Also, remove the assets folder and any links to .css files in the main.ts or main.js.

Install Bryntum Grid packages

From your terminal, update project dependencies using the following commands:

npm install @bryntum/grid@npm:@bryntum/[email protected] @bryntum/[email protected]

Ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add component to Application

Edit the src/App.vue file and replace the content with the following:

<script setup>
import { BryntumGrid } from '@bryntum/grid-vue-3';
import { gridProps } from './AppConfig.js';
</script>

<template>
  <bryntum-grid v-bind=gridProps />
</template>

<style lang="scss">
@import './App.scss';
</style>

Create a AppConfig file in the src/ directory with the following content:

export const gridProps = {
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 1,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color',
            field    : 'color',
            flex     : 1,
            sortable : false,
            type     : 'color'
        }
    ],

    data : [
        { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
        { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
        { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
        { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
        { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
        { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
        { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
        { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
        { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
        { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
        { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
        { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
        { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
        { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
        { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
        { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
        { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
        { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
        { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
        { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
        { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
        { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
        { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
        { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
        { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
    ]
};

Apply styles

Stylesheets

Remove both src/assets/main.css and src/assets/base.css, and delete the main.css import from src/main.ts.

The following CSS files are provided with the Bryntum npm packages or in the /build folder of the distribution:

FileContents
grid.cssStructural CSS
svalbard-light.cssSvalbard Light theme
svalbard-dark.cssSvalbard Dark theme
visby-light.cssVisby Light theme
visby-dark.cssVisby Dark theme
stockholm-light.cssStockholm Light theme
stockholm-dark.cssStockholm Dark theme
material3-light.cssMaterial3 Light theme
material3-dark.cssMaterial3 Dark theme
fluent2-light.cssFluent2 Light theme
fluent2-dark.cssFluent2 Dark theme
fontawesome/css/fontawesome.cssFont Awesome Free base CSS
fontawesome/css/solid.cssFont Awesome Free solid icons

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum Grid to render correctly. And if you are not replacing the icons used by the component, you will also need to include Font Awesome.

Create a src/App.css file and add the following:

/* FontAwesome is used for icons */
@import "@bryntum/grid/fontawesome/css/fontawesome.css";
@import "@bryntum/grid/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/grid/grid.css";
/* Bryntum theme of your choice */
@import "@bryntum/grid/svalbard-light.css";

You need to change the App.scss to App.css in the App.vue.

Sizing the component

By Default, the Component is configured to take 100% of the parent DOM element with a min-height of 10em.

For your application to show the Component with the appropriate size, you can for example make parent components take the full height of the screen.

In your src/App.css file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

From your terminal:

npm run dev

Your application is now available under http://localhost:5173.

Further on integration with Vue

Do you want to know more about how Bryntum Grid integrates with Vue and starts to customize your application? We provide you with a complete Vue guide here.

Troubleshooting

Stuck somewhere? Please refer to this Troubleshooting guide. If you find errors in our docs and/or onboarding guides, please report them in our forums.

Learn about Data

Bryntum components often use multiple collections and entities.

The Data guide explains how they all fit together.