Our blazing fast Grid component built with pure JavaScript


Post by marktomicki »

Hello,

i am using the grid to display some data which is stored in my pinia store.
The data is passed to the grid in the grid config and it shows fine.

However, when i update the data in my store, the grid won't update.

<template>
	...
	<BryntumGrid ref="grid" v-bind="gridConfig" />
	...
</template>	

<script setup>
// Pinia Store
const globalStore = useGlobalStore();

const grid = ref(null);
const useGridConfig = {
	autoHeight : true,
	columns : [
		{ type : 'rownumber' },
		{ field : 'firstName', text: 'First name' },
	],
	// Insert my Pinia store
	data: globalStore.gridData,
}
const gridConfig = reactive(useGridConfig);
</script>

I found a way by changing data to store inside the useGridConfig and then replace the whole store object with my pinia object but this doesn't seems like the right way:

const store = new Store({
	data : globalStore.gridData
});

const testButton = () => {
	globalStore.addToNames(name.value);
	store.setStoreData(globalStore.gridData);
}

Am i missing something?
Shouldn't the grid data refresh when i change the globalStore since it is reactive? My Vue UI is updating fine and the list of names is updated/shown with the new values.

Thank you :)


Post by marcio »

Hey marktomicki,

The config object will be used to initial render the grid, after that, it won't work, because configs are supposed to not be updated during runtime. For that, we have properties (which can be updated during runtime). We can have variables that are configs and properties at the same time, but you need to check the documentation.

That said, you need to add a property directly to the BryntumGrid component, like this

<BryntumGrid ref="grid" v-bind="gridConfig" :data="data" />

And then, when you update that, it'll be updated as well in the grid.

https://www.bryntum.com/docs/grid/api/Grid/view/GridBase#property-data

Best regards,
Márcio


Post by marktomicki »

Hello Marcio,

thanks for your reply.
So i tried it the most basic way i could imagine but it is still not updating..

<template>
	<div>
		<div class="flex">
			<div>
				<h4>List of Names</h4>
				<input type="text" v-model="name"> <button @click="addTest">Add</button>
				<BryntumGrid ref="grid" v-bind="gridConfig" :data="testGridData" />
			</div>
			<div>
				<h4>testGridData</h4>
				{{ testGridData }}<br/>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { BryntumGrid } from "@bryntum/grid-vue-3";

let name = ref("");
let testGridData = ref([
	{
		firstName: "Test 1"
	},
	{
		firstName: "Test 2"
	}
]);

const addTest = () => {
	testGridData.value.push({
		firstName: name.value,
	})
}

const grid = ref(null);
const useGridConfig = {
	autoHeight : true,
	columns : [
		{ type : 'rownumber' },
		{ field : 'firstName', text: 'First name' },
	]
}

const gridConfig = reactive(useGridConfig);

</script>

I feel like i am missing something very basic for it to work..

Attachments
Screenshot 2022-07-20 164312.jpg
Screenshot 2022-07-20 164312.jpg (41.46 KiB) Viewed 167 times

Post by marcio »

Hey marktomicki,

You need to update only the store, Bryntum UI Grid will handle the side effects of the store update. So, similar to what you did before.

const store = new Store({
	data : globalStore.gridData
});

const testButton = () => {
	store.add({ firstName: name.value});
}

That will do the trick in the right way.

Best regards,
Márcio


Post Reply