DataGridXL & Vue

For this demo, we'll be using Vue CLI to build our initial Vue app. If you have trouble following the tutorial steps, please refer to https://cli.vuejs.org/guide/.

The article shows how to create a Vue (wrapper) component for DataGridXL and how you can pass events from your DataGridXL instance to your Vue App.

1. Create your Vue app

Open your command prompt and enter these commands.

CMD
vue create my-vue-project
cd my-vue-project
npm run serve

Open localhost:8080 in your browser window and you should see your default Vue app. It will probably look similar to the screenshot below.

localhost:8080

Now, install DataGridXL 2 in the same directory, using npm install.

CMD
npm install @datagridxl/datagridxl2

2. Create a DataGrid component

Next thing: create a DataGrid component. Make sure to not call your component "DataGridXL", as this might result in naming conflicts with the DataGridXL class.

Create a new file named DataGrid.vue in the components/ folder. Inside the file, write a template, script and style block.

DataGrid.vue
<template>
  <div class="wrapper-dgxl">
    <div ref="dgxl" class="grid"></div>
    <input
      type="button"
      value="Add new row"
      @click="dgxlObj.insertEmptyRows()"
    />
    <input
      type="button"
      value="Download data as CSV"
      @click="dgxlObj.downloadDataAsCSV()"
    /><br />
  </div>
</template>

<script>
import DataGridXL from "@datagridxl/datagridxl2";

export default {
  name: "DataGrid",
  data() {
    return {};
  },
  computed: {
    dgxlOptions() {
      return {};
    },
  },
  mounted: function () {
    const dgxlObj = new DataGridXL(this.$refs.dgxl, this.dgxlOptions);
    Object.assign(this, { dgxlObj }); // tucks all methods under dgxlObj object in component instance
  },
};
</script>

<style>
.grid {
  height: 400px;
}
</style>

Edit the main App.vue file. It should import your DataGrid component and add it to its template.

App.vue
<template>
  <DataGrid/>
</template>

<script>
import DataGrid from './components/DataGrid.vue';
export default {
  name: 'App',
  components: {
    DataGrid
  }
}
</script>

View this example on Codesandbox.

Notice that the fullscreen button in Codesandbox raises an error. This is a Codesandbox bug, not a DataGridXL bug. You should not encounter this bug in a real world React app.

Leave email to receive latest updates!