Quick Start

Installation

data-grid-vue is available via both NPM and Yarn

npm i data-grid-vue

yarn add data-grid-vue

pnpm add data-grid-vue

Setup

The data grid component is recommended to be setup via the included Vue.js plugin. This plugin performs some additional setup around registering required directives as well as globally registering the data grid component as dgv-data-grid.

import { createApp } from 'vue'
import App from './App.vue'
import { DataGridVue } from 'data-grid-vue'

import 'data-grid-vue/style'

createApp(App).use(DataGridVue).mount('#app')

Styles

Make sure to import the data grid core styles prior to any application-specific styles to be able to override the values of the predefined CSS Variables.

The styles and variables can be imported from data-grid-vue/style.

Plugin Options

The DataGridVue plugin has additional options that can be specified. These options are specified in DataGridVueOptions. The default values for the options are going to work in almost all scenarios.

import { DataGridVue, type DataGridVueOptions } from 'data-grid-vue'

import 'data-grid-vue/style'

const dataGridVueOptions = {
  dataGridComponentName: 'custom-data-grid',
} as DataGridVueOptions

createApp(App).use(DataGridVue, dataGridVueOptions).mount('#app')

Note

The data grid component can also be imported locally to the component that will be using it but it is recommended to use the plugin since it also sets up a click-outside directive and drag and drop directives powered by dragon-drop-vue.

If you are not going to be using the functionality that these directives are used for then importing the data grid component locally will work and automatically import the styles. The component is exported as DataGridVueGrid. However, you will need to keep in mind the order in which the CSS will be included and in this case you will likely need to override any of the data grid's CSS variables in the SFC style block of the local component.

The click-outside and focus directives are only used for the add/remove columns menu (i.e. the showColumnSelection is true).

The drag and drop directives are only used for column reordering (i.e. the allowColumnReorder is true).

import { defineComponent } from 'vue'
import { DataGridVueGrid } from 'data-grid-vue'

export default defineComponent({
  components: {
    DataGridVueGrid,
  }
})

import { DataGridVueGrid } from 'data-grid-vue'

Usage

A simple example populating a data grid with static client-side data is shown below. The columns and data props are the only required props in this scenario but this example also shows the data grid with sorting, filtering, column reordering and the ability to add/remove columns. These configuration options and other features will be further explained in later sections.

Important

It is recommended to supply an array of Columns with v-model:columns since that is required for column reordering and allowing users to add/remove specific columns. Column objects will not be mutated but a new array will be emitted with the update:columns event and that needs to trigger the columns prop to get an updated value. The grid will react to any change to this prop which can be leveraged to implement custom functionality to do things like allowing users to add/remove columns.

Show Filter OptionsClear FiltersAdd/Remove Columns

Id

First Name

Last Name

Email

1525500 items

<dgv-data-grid
  v-model:columns="columns"
  :data="dataItems"
  :sort-options="{
    sortable: true,
    multiColumn: false,
  }"
  :allow-column-reorder="true"
  :show-column-selection="true"
>
</dgv-data-grid>

import { defineComponent } from 'vue'
import { DataGridVueGrid, type Column } from 'data-grid-vue'

export default defineComponent({
  components: {
    DataGridVueGrid,
  },
  data() {
    return {
      columns: [...staticColumns] as Column[],
      dataItems: [...] as TestDataItem[],
    }
  },
})

import { ref } from 'vue'
import { DataGridVueGrid, type Column } from 'data-grid-vue'

const columns = ref<Column[]>([...staticColumns])
const data = [...] as TestDataItem[]

interface DemoDataItem {
  id: number
  firstName: string
  lastName: string
  email?: string
}

const staticColumns = [
  {
    field: new Field('id'),
    dataType: DataType.number,
    isKey: true,
    sortable: true,
    filterable: true,
    filterOptions: {
      operators: [FilterOperator.greaterThanOrEqualTo],
    },
    width: '10%',
  },
  {
    field: new Field('firstName'),
    dataType: DataType.alphanumeric,
    sortable: true,
    filterable: true,
    filterOptions: {
      operators: [FilterOperator.contains],
    },
    width: '*',
  },
  {
    field: new Field('lastName'),
    dataType: DataType.alphanumeric,
    sortable: true,
    filterable: true,
    filterOptions: {
      operators: [FilterOperator.contains],
    },
    width: '*',
  },
  {
    field: new Field('email'),
    dataType: DataType.alphanumeric,
    sortable: true,
    filterable: true,
    filterOptions: {
      operators: [FilterOperator.contains],
    },
    width: '2*',
  },
] as Column[]