@vuestic/ag-grid-theme v1.1.4

Installation

npm

npm i @vuestic/ag-grid-theme

yarn

yarn add @vuestic/ag-grid-theme

Import styles to project via entry js/ts file:

// main.js

import '@vuestic/ag-grid-theme/index.scss'

or via a scss:

// *.scss or <styles lang="scss">

@import "~@vuestic/ag-grid-theme";

Usage

<template>
  <div>
    <ag-grid-vue
      class="ag-theme-vuestic"
      style="width: 100%; height: 100%;"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :modules="modules"
    />
  </div>
</template>

<script>
  import { AgGridVue } from '@ag-grid-community/vue3'
  import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'

export default {
  components: { AgGridVue },
  data () {
    return {
      modules: [ClientSideRowModelModule],
      rowData: null,
      columnDefs: [
        { field: 'athlete' },
        { field: 'age' },
        { field: 'country' },
        { field: 'year' },
        { field: 'date' },
        { field: 'sport' },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' },
        { field: 'total' },
      ],
    }
  },
  beforeMount () {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then(result => result.json())
      .then(rowData => { this.rowData = rowData })
  },
}
</script>

<style lang="scss">
@import "~@vuestic/ag-grid-theme";
</style>

Documentation

Information about styles and examples are available on vuestic.dev

For more information about AG Grid for Vue 3, visit ag-grid.com

License

MIT license