ag-grid-vue not rendering the table - vue.js

I am trying to integrate ag-grid into my existing vue.js project. The table is not rendering properly. I followed the tutorial on ag-grid here website.
<template>
<v-container>
<v-row>
<v-col cols="12" sm="3"></v-col>
<v-col cols="12" sm="6">
<ag-grid-vue
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
:modules="modules"
>
</ag-grid-vue>
</v-col>
<v-col cols="12" sm="3"></v-col>
</v-row>
</v-container>
</template>
<script>
import { AgGridVue } from "#ag-grid-community/vue";
import { ClientSideRowModelModule } from "#ag-grid-community/client-side-row-model";
export default {
name: "VueGridTest",
data() {
return {
columnDefs: null,
rowData: null,
modules: [ClientSideRowModelModule],
};
},
components: {
AgGridVue,
},
beforeMount() {
this.columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" },
];
this.rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
];
},
};
</script>
Results look like:
If I fix the height of the table div to any number it renders.
Project Configuration:
"#ag-grid-community/all-modules": "^24.0.0",
"#ag-grid-community/client-side-row-model": "^24.0.0",
"#ag-grid-community/core": "^24.0.0",
"#ag-grid-community/csv-export": "^24.0.0",
"#ag-grid-community/infinite-row-model": "^24.0.0",
"#ag-grid-community/vue": "^24.0.0",
"#ag-grid-enterprise/all-modules": "^24.0.0",
"#ag-grid-enterprise/server-side-row-model": "^24.0.0",
"vue": "^2.6.12",
"vue-class-component": "^7.2.5",
"vue-property-decorator": "^9.0.0",
Also there are no errors in the console.
I am new to ag-grid and ag-grid-vue

What you may want to do is to set domLayout="autoHeight" as stated in the docs. So in your code:
<ag-grid-vue
class="ag-theme-alpine"
domLayout="autoHeight"
...
></ag-grid-vue>
Live Demo

Related

How to customize v-select in vue 2, options with icons or images

How to customize a select or another component like this design. I tried with v-select, BFormSelect, and others, the options are images or icons, and the output-
{
languages: {
en: {
title: "the text writted",
},
},
logo: "this logo in base64"
}
<template>
<div>
<div>
<b-form
ref="form"
class="repeater-form p-2"
#submit.prevent="repeateAgain"
>
<div>
<v-select
v-model="selected"
:options="options"
:multiple="false"
item-text="text"
item-value="value"
label="Select options"
>
<template slot="option" slot-scope="option">
<img :src="option.src" class="mr-2" style="width: 20px; height: 20px;"/>
{{ option.text }}
</template>
</v-select>
</div>
</b-form>
</div>
</div>
</template>
<script>
import {
BForm, BFormGroup, BFormInput, BRow, BCol, BButton, BFormCheckbox, BFormSelect, BDropdown
} from 'bootstrap-vue'
import vSelect from 'vue-select'
export default {
components: {
BForm,
BRow,
BCol,
BButton,
BFormGroup,
BFormInput,
BFormCheckbox,
BFormSelect,
vSelect,
BDropdown,
},
data() {
const typeOptions = ['include', 'not_include', 'important']
return {
typeOptions,
selected: [],
options: [
{
value: null,
text: "Please select some item",
src: ""
{
value: "b",
text: "Default Selected Option",
src: "../../../../assets/images/trip_icons/almuerzo.png"
},
{
value: "c",
text: "This is another option",
src: "../../../../assets/images/trip_icons/almuerzo.png"
},
{
value: "d",
text: "This one is disabled",
disabled: true,
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
}
]
}
},
methods: {
select(option) {
console.log(option);
this.selected = option;
},
},
}
</script>
This is the result now but it is not enough, I hope to customize more.

Bar chart from Vue-chartjs doesn't render

In my Vue project I cannot render the Bar Chart I've created using vue-chartjs
I've tried reinstalling vue-chartjs and update my component, but nothing work.
I wonder if it's the problem with the component itself or I do rendering in a wrong way?
BarChart component
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true, maintainAspectRatio: false, height: 200 }
);
}
};
</script>
Home component:
<template>
<v-container class="grey lighten-5">
<v-col cols="12" sm="8">
<v-card class="pa-2" outlined align="center">
<BarChart/>
<div>CHART</div>
</v-card>
</v-col>
</v-container>
</template>
<script>
import BarChart from "#/components/charts/BarChart";
export default {
components: {
BarChart
},
};
</script>
<style></style>
The mistake in the method this.renderChart(). I had to look at the documentation to figure out how it should be structured.
The method this.renderChart() is provided by the Bar component and accepts two parameters: both are objects. The first one is your chart data, and the second one is an options object.
More in docs - https://www.chartjs.org/docs/latest/charts/bar.html
This worked for me:
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true }
);
}
};
</script>

add icons in actions columns and in each row

This is a vue.js project and this project is for a car sales company.
I have a table and this table contains information about each car as in the picture.
And as we note that for the table there is a header and there are lines under the head and are the Items which are the information of each car for each column.
And there is a column called Action, and within this column I want to put two icons, the first is delete and the second is edit.
Note that the data for the car information comes from the backend, which is node.js.
The problem is that I did not explore adding the delete and edit buttons on every line in the action column.
The question is, how can I add the Delete and Modify icons within the action column and on each line
How can I do this?
ViewAllCars.vue:
<template>
<v-app class="bg">
<v-container>
<v-card
class="mx-auto mt-5 pa-3"
max-width="100%"
id="limited-products"
:style="'border: 0px solid #D50000;'"
>
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
>
</v-data-table>
<!-- pagination -->
<div class="text-center pt-2">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
<v-text-field
:value="itemsPerPage"
label="Items per page"
type="number"
min="-1"
max="15"
#input="itemsPerPage = parseInt($event, 10)"
class="pl-7 pr-7"
></v-text-field>
</div>
</v-card>
</v-container>
</v-app>
</template>
<script>
import { mapGetters } from "vuex";
import GettersTypes from "../../store/types/getters-types";
export default {
data() {
return {
page: 1,
pageCount: 0,
itemsPerPage: 10
};
},
created() {},
computed: {
...mapGetters({
loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,
tableHeaders: GettersTypes.GET_HEADERS_TABLE_GETTER
}),
}
};
</script>
Within the state there is the header in the table, and these values ​​were used in Getter
state.js:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text" },
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "",
class: "red accent-4 white--text",
},
],
};
export default state;
Within Getter, the state was called that contains the header and other information coming from the backend.
getters.js:
import GettersTypes from '../types/getters-types'
const getters = {
[GettersTypes.GET_CAR_FORM_GETTER](state) {
return state.loadedCar;
} ,
[GettersTypes.GET_HEADERS_TABLE_GETTER](state){
return state.headers;
}
}
export default getters;
first give a value to Actions object in header:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text"},
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "actions",
class: "red accent-4 white--text",
},
],
};
export default state;
then use slots in your v-data-table like this:
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
>
<template #[`item.actions`]="{ item }">
<v-btn icon #click="edit(item.id)>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn icon #click="delete(item.id)>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
</v-data-table>
notice that # is shorthand for v-slot and I assumed that each car has an id in its object that you can pass that to edit and delete methods to perform the proper action on that car, you can pass any other argument you want like this: item.name
also vuetify has a good example on its site, check the link below:
vuetify data table CRUD actions example

Sort Vue data table by selection

Is there a way to sort a v-data-table by the selection column?
I would like to multisort my v-data-table. First by selection, so the selected ones are always on top and second by name. So far I got this:
<template>
<v-app>
<div id="app">
<v-data-table
:headers="tableHeaders"
:items="selectables"
:show-select="true"
:sort-by="['isSelected', 'name']"
multi-sort
v-model="output"
return-object
>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
output: {},
tableHeaders: [
{
text: "name",
value: "name",
},
],
selectables: [
{
name: "toni",
},
{
name: "hans",
},
{
name: "fritz",
},
],
};
},
};
</script>

How to change the cursor default to pointer in Vuetify component

I want to change cursor default to pointer when active autocomplete in Vuetify.
I tried to make css code to change cursor.
but mouse drag on the autocomplete bottom, cursor change "text" style like "I beem". I want to show the "pointer " style.
I couldn't find out any idea Vuetify web site.
Does anyone have idea?
<template>
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12">
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
class="test_cursor"
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
values: ['foo', 'bar'],
value: null,
}),
}
</script>
<style lang="scss" scoped>
.test_cursor{
cursor: pointer;
}
</style>
By default cursor is set to text (which appears as the "I-beam" you mention), but you can change the v-autocomplete's cursor by targeting the input in your CSS:
.test_cursor input {
cursor: pointer;
}
new Vue({
vuetify: new Vuetify(),
el: '#app',
data () {
return {
states: [
{ name: 'Florida', abbr: 'FL', id: 1 },
{ name: 'Georgia', abbr: 'GA', id: 2 },
{ name: 'Nebraska', abbr: 'NE', id: 3 },
{ name: 'California', abbr: 'CA', id: 4 },
{ name: 'New York', abbr: 'NY', id: 5 },
],
}
},
})
.test_cursor input {
cursor: pointer;
}
<script src="https://unpkg.com/vue#2.6.11"></script>
<script src="https://unpkg.com/vuetify#2.3.5"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.3.5/dist/vuetify.css">
<v-app id="app">
<v-autocomplete
class="test_cursor"
:items="states"
item-text="name"
label="State"
></v-autocomplete>
</v-app>