Docs
Getting Started
Working with Data
How Tos
Frameworks
How it's Made
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.
vue create my-vue-project
cd my-vue-project
npm run serveOpen localhost:8080 in your browser window and you should see your default Vue app. It will probably look similar to the screenshot below.
Now, install DataGridXL 2 in the same directory, using npm install.
npm install @datagridxl/datagridxl22. 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.
<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.
<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.
