Skip to main content

Getting started

This page describes how to start with the SVAR Vue DataGrid component by adding a simple table to your Vue application.

Step 1. Install the package​

SVAR DataGrid is an open-source library distributed under the MIT license.

Install package from NPM.

npm install @svar-ui/vue-grid

Step 2. Create and initialize the Grid​

Import the Grid component to your project:

<script setup>    
  import { Grid } from "@svar-ui/vue-grid";
</script>

Initialize the Grid properties.

The example below shows how to create a simple table with six columns and two rows.

The data array holds data to be displayed in the table and the columns array includes the table columns. It's necessary to define the components inside the Grid tag.

<script setup>
import { Grid } from "@svar-ui/vue-grid"; 

const data = [{
        id: 1,
        city: "Amieshire",
        email: "Leora13@yahoo.com",
        firstName: "Ernest",
        lastName: "Schuppe",
        companyName: "Lebsack - Nicolas",
    },
    {
        id: 2,
        city: "Gust",
        email: "Mose_Gerhold51@yahoo.com",
        firstName: "Janis",
        lastName: "Vandervort",
        companyName: "Glover - Hermiston",
    },
];

const columns = [{
        id: "id",
        width: 50
    },
    {
        id: "city",
        width: 100,
        header: "City",
        footer: "City",
    },
    {
        id: "firstName",
        header: "First Name",
        footer: "First Name",
        width: 150,
    },
    {
        id: "lastName",
        header: "Last Name",
        footer: "Last Name",
        width: 150,
    },
    {
        id: "email",
        header: "Email",
        footer: "Email"
    },
    {
        id: "companyName",
        header: "Company",
        footer: "Company"
    },
];
</script>

<template>
  <Grid :data="data" :columns="columns" />
</template>

More instructions about loading data you can see here Loading data.

Step 3. Apply a theme​

To add look and feel to the application, import one of the predefined themes, which will also make all elements display correctly:

  • Willow
  • WillowDark
<script setup>
  import { getData } from "./common/data";
  import { Grid } from "@svar-ui/vue-grid";  
  
  import { Willow } from "@svar-ui/vue-grid";
</script>

<template>
  <Grid :data="data" :columns="columns" />
</template>

Apply the desired theme by wrapping Grid into the required theme tag:

<script setup>
  import { getData } from "./common/data";
  import { Grid } from "@svar-ui/vue-grid";  
  import { Willow } from "@svar-ui/vue-grid";
</script>

<template>
  <Willow>
    <Grid :data="data" :columns="columns" />
  </Willow>
</template>

Step 4. Run the sample locally​

To run your Vue application with the installed package on a local machine, navigate to the vue-grid folder, install the necessary dependencies and start the development server:

// navigate to the root folder
cd vue-grid
 
// install dependencies
yarn install //or npm install

// start dev server
yarn dev //or npm run dev

What's next​

Dive deeper into the Grid API and get down to configuring it to your needs:

  • Guides pages provide instructions about installation, loading data, styling, and other helpful tips to go smoothly with the DataGrid configuration
  • DataGrid API reference gives description of the DataGrid functionality
  • Helpers pages describe how to use RestDataProvider that will make the process of working with backend easy and enjoyable