@ag-grid-community/vue3
v32.3.3
Published
AG Grid Vue 3 Component
Downloads
35,939
Readme
Vue3 Data Grid | Vue3 Table
📖 Overview
AG Grid is available in two versions: Community & Enterprise.
ag-grid-community
is free, available under the MIT license, and comes with all of the core features expected from a Vue3 Data Grid, including Sorting, Filtering, Pagination, Editing, Custom Components, Theming and more.ag-grid-enterprise
is available under a commercial license and comes with advanced features, like Integrated Charting, Row Grouping, Aggregation, Pivoting, Master/Detail, Server-side Row Model, and Exporting in addition to dedicated support from our Engineering team.
Features
| Feature | AG Grid Community | AG Grid Enterprise | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------ | | Filtering | ✅ | ✅ (Advanced) | | Sorting | ✅ | ✅ | | Cell Editing | ✅ | ✅ | | CSV Export | ✅ | ✅ | | Drag & Drop | ✅ | ✅ | | Themes and Styling | ✅ | ✅ | | Selection | ✅ | ✅ | | Accessibility | ✅ | ✅ | | Infinite Scrolling | ✅ | ✅ | | Pagination | ✅ | ✅ | | Server-Side Data | ✅ | ✅ (Advanced) | | Custom Components | ✅ | ✅ | | Integrated Charting | ❌ | ✅ | | Range Selection | ❌ | ✅ | | Row Grouping and Aggregation | ❌ | ✅ | | Pivoting | ❌ | ✅ | | Excel Export | ❌ | ✅ | | Clipboard Operations | ❌ | ✅ | | Master/Detail | ❌ | ✅ | | Tree Data | ❌ | ✅ | | Column Menu | ❌ | ✅ | | Context Menu | ❌ | ✅ | | Tool Panels | ❌ | ✅ | | Support | ❌ | ✅ |
Examples
We've created several demos to showcase AG Grid's rich feature set across different use cases. See them in action below, or interact with them on our Demo page.
⚡️ Quick Start
AG Grid is easy to set up - all you need to do is provide your data and define your column structure.
Installation
$ npm install --save @ag-grid-community/core @ag-grid-community/vue3
Setup
1. Import the Vue Data Grid
Import the required modules, and register them via the ModuleRegistry.
<template></template>
<script>
import { ref } from 'vue';
import "@ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
import "@ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
import { AgGridVue } from "@ag-grid-community/vue3"; // Vue Data Grid Component
// Default Row Model & Module Registry
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ModuleRegistry } from '@ag-grid-community/core';
// Register the RowModel Module
ModuleRegistry.registerModules([ClientSideRowModelModule]);
export default {
name: "App",
components: {
AgGridVue, // Add Vue Data Grid component
},
setup() {},
};
</script>
2. Define Rows and Columns
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,
};
},
3. Vue Data Grid Component
Rows and Columns are set 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"
class="ag-theme-quartz"
>
</ag-grid-vue>
</template>
Seed Projects
We also provide Seed Projects to help you get started with common configurations:
🛠️ Customisations
AG Grid is fully customisable, both in terms of appearance and functionality. There are many ways in which the grid can be customised and we provide a selection of tools to help create those customisations.
Custom Components
You can create your own Custom Components to customise the behaviour of the grid. For example, you can customise how cells are rendered, how values are edited and also create your own filters.
There are a number of different Component Types that you can provide to the grid, including:
- Cell Component: To customise the contents of a cell.
- Header Component: To customise the header of a column and column groups.
- Edit Component: To customise the editing of a cell.
- Filter Component: For custom column filter that appears inside the column menu.
- Floating Filter: For custom column floating filter that appears inside the column menu.
- Date Component: To customise the date selection component in the date filter.
- Loading Component: To customise the loading cell row when using Server Side Row Model.
- Overlay Component: To customise loading and no rows overlay components.
- Status Bar Component: For custom status bar components.
- Tool Panel Component: For custom tool panel components.
- Tooltip Component: For custom cell tooltip components.
- Menu Item Component: To customise the menu items shown in the Column and Context Menus.
To supply a custom cell renderer and filter components to the Grid, create a direct reference to your component within the gridOptions.columnDefs
property:
gridOptions = {
columnDefs: [
{
field: 'country', // The column to add the component to
cellRenderer: CountryCellRenderer, // Your custom cell component
filter: CountryFilter, // Your custom filter component
},
],
};
Themes
AG Grid has 4 themes, each available in light
& dark
modes. We also supply each theme with an auto
mode that can toggle the theme based on the users' system preferences:
To apply a theme, add the relevant CSS Class to the Data Grid container. For example, to apply the Quartz theme, use the CSS class ag-theme-quartz
:
<div
id="myGrid"
style="height: 150px; width: 600px"
class="ag-theme-quartz"
></div>
Custom Themes
All AG Grid themes can be customised using CSS variables, or you can create a new theme from scratch with the help of our Theme Builder or Figma Design System.
🌍 Community
Tools & Extensions
AG Grid has a large and active community who have created an ecosystem of 3rd party tools, extensions and utilities to help you build your next project with AG Grid, no matter which language or framework you use:
Showcase
AG Grid is used by 100,000's of developers across the world, from almost every industry. Whilst most of these projects are private, we've curated a selection of open-source projects from different industries where household names use AG Grid, including J.P.Morgan, MongoDB and NASA. Visit our Community Showcase page to learn more.
Stargazers
Founded in 2016, AG Grid has seen a steady rise in popularity and is now the market leader for Data Grids:
🤝 Support
Enterprise Support
AG Grid Enterprise customers have access to dedicated support via ZenDesk, which is monitored by our engineering teams.
Bug Reports
If you have found a bug, please report it in this repository's issues section.
Questions
Look for similar problems on StackOverflow using the ag-grid
tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.
Contributing
AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to [email protected].
⚠️ License
ag-grid-community
is licensed under the MIT license.
ag-grid-enterprise
has a Commercial license.
See the LICENSE file for more info.
If you've made it this far, you may be interested in our latest project: AG Charts - The best Vue3 Charting library in the world.
Initially built to power Integrated Charts in AG Grid, we open-sourced this project in 2018. Having seen the steady rise in popularity since then, we have decided to invest in AG Charts with a dedicated Enterprise version (ag-charts-enterprise
) in addition to our continued support of ag-charts-community
.
Follow us to keep up to date with all the latest news from AG Grid: