Vue Data Grid Overview

Vue Data Grid provides a flexible way to display and manage tabular data in applications, making them feature-rich and high-performing. This component offers a range of functionalities, including sorting, filtering, pagination, column resizing, row selection, cell editing, and data binding. Since it supports custom elements, you can use the Apex Grid with ease.

How To Get Started with Apex Grid for Vue

To add Apex grid to your Vue application, install the package from npm.

npm install apex-grid

You need to tell Vue to ignore the Apex grid and its sub-components in the configuration file. Refer to the official documentation for additional information. Assuming Vite as your build tools, it looks something like:

import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue({
          template: {
            compilerOptions: {
              // treat all tags with a dash as custom elements
              isCustomElement: (tag) => tag.includes('-'),
            },
          },
        }),
      ],
    });

Usage

Here is an example showing using the Apex grid in a Vue component.

<template>
  <section>
    <apex-grid auto-generate :data.prop="users"></apex-grid>
  </section>
</template>

<script setup>
  import 'apex-grid/define';

  const users = [...];
</script>

Binding complex data

When binding complex data such as objects and arrays, use the .prop modifier to make Vue bind them as a property instead of an attribute.

<apex-grid :columns.prop="myColumnConfig"></apex-grid>

Refer to the Vue topic for more information.