AG Grid is a high-performance Vue Data Grid library for building Vue Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.
Create a Vue Data Grid Copy Link
Add AG Grid to your application in 60 seconds:
NPM Install Copy Link
Install the ag-grid-vue3 package, which also installs ag-grid-community:
npm install ag-grid-vue3Register Modules Copy Link
Register the AllCommunityModule to access all Community features:
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);To minimize bundle size, only register the modules you want to use. See the Modules page for more information.
Import the Vue Data Grid Copy Link
<script>
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
export default {
name: "App",
components: {
AgGridVue, // Add Vue Data Grid component
},
setup() {},
};
</script>Define Rows and Columns Copy Link
setup() {
// Row Data: The data to be displayed.
const rowData = ref([
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
]);
// Column Definitions: Defines the columns to be displayed.
const colDefs = ref([
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" }
]);
return {
rowData,
colDefs,
};
},Vue Data Grid Component Copy Link
Set Rows and Columns as ag-grid-vue component attributes. Styling is applied through the class and style attributes.
<template>
<!-- The AG Grid component -->
<ag-grid-vue
:rowData="rowData"
:columnDefs="colDefs"
style="height: 500px"
>
</ag-grid-vue>
</template>Example Vue Data Grid Copy Link
Below is a live example of the application running. Click </> Code to see the code.
import { createApp, defineComponent, ref } from "vue";
import type { ColDef } from "ag-grid-community";
import {
AllCommunityModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([AllCommunityModule]);
// Row Data Interface
interface IRow {
make: string;
model: string;
price: number;
electric: boolean;
}
// Define the component configuration
const App = defineComponent({
name: "App",
template: `
<ag-grid-vue
style="width: 100%; height: 100%"
:columnDefs="colDefs"
:rowData="rowData"
:defaultColDef="defaultColDef"
>
</ag-grid-vue>
`,
components: {
AgGridVue,
},
setup() {
const rowData = ref<IRow[]>([
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
{ make: "Mercedes", model: "EQA", price: 48890, electric: true },
{ make: "Fiat", model: "500", price: 15774, electric: false },
{ make: "Nissan", model: "Juke", price: 20675, electric: false },
]);
const colDefs = ref<ColDef<IRow>[]>([
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" },
]);
const defaultColDef = {
flex: 1,
};
return {
rowData,
colDefs,
defaultColDef,
};
},
});
createApp(App).mount("#app");
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
Next Steps Copy Link
Now that you have a basic Vue Data Grid running, choose one of the following options to continue your learning journey: