activewidgets/vue

Virtualized Vue Data Grid

ActiveWidgets/Vue • Datagrid

ActiveWidgets is a multi-framework UI component library. This package provides virtualized datagrid component for Vue.

Live demo / Developer guide / API reference

• Installation
• Usage
• CDN links
• Data properties
• User events

Installation

Add @activewidgets/vue to your project dependencies -

> npm i --save @activewidgets/vue

Usage

Now you can import ActiveWidgets component classes -

import { components } from "@activewidgets/vue";

and register them with Vue.

import {components} from '@activewidgets/vue';

// ...

export default { components, data };

It makes ax-datagrid and other ax-... tags available in your component template -

<template>
    <ax-datagrid :rows="rows"></ax-datagrid>
</template>

Live example | Source on github | Edit on stackblitz

CDN links

For quick prototyping the package is also available over ActiveWidgets CDN -

<script src="https://cdn.activewidgets.com/vue"></script>

In this case you will find the components at ActiveWidgets.Vue global namespace.

var components = ActiveWidgets.Vue.components;

// or

var Datagrid = ActiveWidgets.Vue.Datagrid;

Data properties

You have to provide columns and rows properties to the datagrid to show some data. The properties of each column object define how the data will be rendered -

• field - where the cell data comes from (string|function)
• header - column header (string|object)
• width - column width (number, in pixels)
• align - cell text alignment (left|right|center)
• format - number/date format (string|function)
• fixed - fixed (true/false) for columns on the left or right side

The style (string|object) or className properties allow to change the styling of the column and cell elements.

function data(){

    const columns = [
      {header: 'Code', field: 'customerID', style: 'background:#def', fixed: true},
      {header: 'Company Name', field: 'companyName', width: 160},
      {header: 'Contact', field: 'contactName', width: 120},
      {header: 'Title', field: 'contactTitle', width: 120},
      {header: 'Address', field: 'address', width: 120, align: right}
    ];

    const rows = northwind.customers;

    return { columns, rows };
}

<template>
    <ax-datagrid :columns="columns" :rows="rows"></ax-datagrid>
</template>

Live example | Source on github | Edit on stackblitz

User events

In addition to the standard DOM keyboard and mouse events the datagrid emits composite mouse event which makes it easier to find the elements affected by the user action -

function onMouse({row}){
    alert(`row ${row.key} clicked!`);
}

const methods = { onMouse };
export default { components, data, methods };

<template>
    <ax-datagrid @mouse="onMouse" :columns="columns" :rows="rows"></ax-datagrid>
</template>

Live example | Source on github | Edit on stackblitz

More info

• Live demo
• Developer guide
• API reference
• Licensing
• Support forum

---