# @ag-grid-community/vue

> AG Grid Vue 2 Component

Latest version **31.3.4** (published 2024-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ag-grid-community/vue
pnpm add @ag-grid-community/vue
yarn add @ag-grid-community/vue
bun add @ag-grid-community/vue
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 31.3.4 |
| Published | 2024-07-16 |
| First published | 2019-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15599 |
| Author | Sean Landsman |
| Maintainers | ceolter, seanlandsman, rmc.software |
| Keywords | grid, data, table, vue, vuejs |

## Links

- npm: https://www.npmjs.com/package/@ag-grid-community/vue
- Repository: https://github.com/ag-grid/ag-grid
- Homepage: https://www.ag-grid.com/
- Issues: https://github.com/ag-grid/ag-grid/issues
- npm.io page: https://npm.io/package/@ag-grid-community/vue

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 31.3.4 (latest) — 2024-07-16
- 22.0.0-beta.1 (beta) — 2019-11-05
- 31.3.3 — 2024-07-16
- 31.3.2 — 2024-05-15
- 31.3.1 — 2024-04-30
- 31.3.0 — 2024-04-30
- 31.2.1 — 2024-04-10
- 31.2.0 — 2024-03-20
- 31.1.1 — 2024-02-22
- 31.1.0 — 2024-02-20
- 31.0.3 — 2024-01-25
- 31.0.2 — 2024-01-16
- 31.0.1 — 2023-12-11
- 31.0.0 — 2023-11-29
- 30.2.1 — 2023-11-02
- … 47 more at https://npm.io/package/@ag-grid-community/vue/versions

## README

![AG Grid HTML5 Grid trusted by the community, built for enterprise](./github-banner.png "AG Grid")

[![CDNJS](https://img.shields.io/cdnjs/v/ag-grid.svg)](https://cdnjs.com/libraries/ag-grid)
[![npm](https://img.shields.io/npm/dm/@ag-grid-community/vue.svg)](https://www.npmjs.com/package/@ag-grid-community/vue)
[![npm](https://img.shields.io/npm/dt/@ag-grid-community/vue.svg)](https://www.npmjs.com/package/@ag-grid-community/vue)

# AG Grid Vue Component

AG Grid is a fully-featured and highly customizable JavaScript data grid.
It delivers [outstanding performance](https://www.ag-grid.com/example?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github), has no third-party dependencies and [integrates smoothly with Vue](https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github).

Here's how our grid looks with multiple filters and grouping enabled:

![Image of AG Grid showing filtering and grouping enabled.](./github-grid-demo.jpg "AG Grid demo")

## Features

In addition to the standard set of features you'd expect from any grid:

* Column Interactions (resize, reorder, and pin columns)
* Pagination
* Sorting
* Row Selection

Here are some of the features that make AG Grid stand out:

* Grouping / Aggregation *
* Accessibility support
* Custom Filtering
* In-place Cell Editing
* Records Lazy Loading *
* Server-Side Records Operations *
* Live Stream Updates
* Hierarchical Data Support & Tree View *
* Customizable Appearance
* Customizable Cell Contents
* State Persistence
* Keyboard Navigation
* Data Export to CSV
* Data Export to Excel *
* Excel-like Pivoting *
* Row Reordering
* Copy / Paste
* Column Spanning
* Pinned Rows
* Full Width Rows
* Integrated Charting
* Sparklines

\* The features marked with an asterisk are available in the [Enterprise version](https://www.ag-grid.com/license-pricing?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github) only.

Check out the [developer documentation](https://www.ag-grid.com/vue-data-grid/?utm_source=@ag-grid-community/vue3-readme&utm_medium=repository&utm_campaign=github) for a complete list of features or visit [our official docs](https://www.ag-grid.com/vue-data-grid/grid-features/?utm_source=@ag-grid-community/vue3-readme&utm_medium=repository&utm_campaign=github) for tutorials and feature demos.

## Getting started

Use the setup instructions below or go through [a 5-minute-quickstart guide](https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github).

### Install dependencies

```sh
$ npm install --save @ag-grid-community/core @ag-grid-community/vue
```

### Import the `AgGridVue` Component

```ts
import { AgGridVue } from "@ag-grid-community/vue";
```

### Import styles in 

```ts
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";
```

### Set the grid's configuration in the parent component

```ts
export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
      ],
    };
  },
};
```

### Render the grid  

```html
  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-quartz"
    :columnDefs="columnDefs"
    :rowData="rowData">
  </ag-grid-vue>
```

### Complete example:

```html
<template>
  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-quartz"
    :columnDefs="columnDefs"
    :rowData="rowData"
  >
  </ag-grid-vue>
</template>

<script>
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "@ag-grid-community/vue";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
      ],
    };
  },
};
</script>
```
## Issue Reporting

If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-grid/issues) section. If you're using the Enterprise version, please use the [private ticketing](https://ag-grid.zendesk.com/) system to do that.

## Asking Questions

Look for similar problems on [StackOverflow](https://stackoverflow.com/questions/tagged/ag-grid) 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 info@ag-grid.com.

## License

This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.

---
_Source: https://npm.io/package/@ag-grid-community/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._