@vuestic/ag-grid-theme
v1.1.4
Published
Custom theme with Vuestic UI styles for AG Grid Vue 3.
Downloads
514
Readme
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