I want to use the your grid in a Vue-cli (Quasar-cli) app. In your examples I found a cdn example of using your grid in Vue. This contains a Vue component: grid-3.1.1-trial\examples\vue\javascript\cdn\components\grid.js
I have tried to rewrite it to my own (none cdn) variant:
<template>
<div id="grid-container">
</div>
</template>
<script>
import { Grid } from 'bryntum-grid/grid.module'
export default {
name: 'DefaultBryntumGrid',
props: {
// Configs
autoHeight: Boolean,
columns: Array,
data: Array,
emptyText: { type: String, default: '' },
enableTextSelection: Boolean,
readOnly: { type: Boolean, default: false },
rowHeight: { type: Number, default: 30 },
store: Object,
// Features, only used for initialization
cellEditFeature: { type: Boolean, default: false },
cellTooltipFeature: [Boolean, Object],
columnDragToolbarFeature: Boolean,
columnPickerFeature: { type: Boolean, default: true },
columnReorderFeature: { type: Boolean, default: true },
columnResizeFeature: { type: Boolean, default: true },
contextMenuFeature: { type: [Boolean, Object], default: false },
filterFeature: [Boolean, Object],
filterBarFeature: [Boolean, Object],
groupFeature: { type: [Boolean, Object, String], default: true },
groupSummaryFeature: Boolean,
quickFindFeature: Boolean,
regionResizeFeature: Boolean,
searchFeature: Boolean,
sortFeature: { type: [Boolean, String, Array], default: true },
stripeFeature: Boolean,
summaryFeature: Boolean,
treeFeature: Boolean
},
data () {
return {
gridEngine: null,
config: {}
}
},
mounted () {
var propKeys = Object.keys(this.$props)
this.config = {
// Use this element as our encapsulating element
// adopt: this.$el, // adopt does not work . minHeight/height does
minHeight: 'calc(100vh - 116px)',
height: 'calc(100vh - 116px)',
// selectionMode: { row: true },
selectionMode: {
row: true,
multiSelect: true,
checkbox: true,
showCheckAll: true
},
// Listeners, will relay events using $emit
listeners: {
catchAll: function (event) {
// Uncomment this line to log events being emitted to console
// console.log(event.type)
this.$emit(event.type, event)
},
thisObj: this
},
features: {}
}
// Apply all props to grid config
propKeys.forEach(function (prop) {
var match
if ((match = prop.match(/(.*)Feature/))) {
// Prop which ends with Feature is a feature config
this.config.features[match[1]] = this[prop]
} else if (prop === 'config') {
// Prop is a config object
Object.assign(this.config, this[prop])
} else {
// Prop is a config
if (this[prop] !== undefined) this.config[prop] = this[prop]
}
}, this)
console.log('config=', this.config, 'props=', this.$props)
// Create a Bryntum Grid with props as configs
this.gridEngine = new Grid(this.config)
this.gridEngine.render(this.$el)
},
beforeDestroy: function () {
// Make sure Bryntum Grid is destroyed when vue component is
this.gridEngine.destroy()
},
watch: {
rowHeight: function (newValue) {
this.gridEngine.rowHeight = Math.max(newValue, 20)
},
data: function (newValue) {
// New rows assigned, use as grid data
this.gridEngine.data = newValue
},
columns: function (newValue) {
// New columns assigned, use as grid columns
this.gridEngine.columns = newValue
}
}
}
</script>
<style lang="scss">
@import "~bryntum-grid/grid.material.min.css";
</style>
Using this in Chrome and Firefox works great. But Edge failed to load the grid.module.js:
[object Error]: {description: "Syntax error", message: "Syntax error", number: -2146827286, stack: "SyntaxError: Syntax error at ./node_modules/bryntum-grid/grid.module.js (https://localhost:8080/vendor.js:607:1) at __webpack_require__ (https://localhost:8080/app.js:790:12) at fn (https://localhost:8080/app.js:151:13) at eval code (eval code:16:22) at ./node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/components/DefaultBryntumGrid.vue?vue&type=script&lang=js& (https://localhost:8080/0.js:11:1) at __webpack_require__ (https://localhost:8080/app.js:790:12) at fn (https://localhost:8080/app.js:151:13) at eval code (eval code:2:22) at ./src/components/DefaultBryntumGrid.vue?vue&type=script&lang=js& (https://localhost:8080/0.js:231:1) at __webpack_require__ (https://localhost:8080/app.js:790:12)"}
description: "Syntax error"
message: "Syntax error"
number: -2146827286
stack: "SyntaxError: Syntax error at ./node_modules/bryntum-grid/grid.module.js (https://localhost:8080/vendor.js:607:1) at __webpack_require__ (https://localhost:8080/app.js:790:12) at fn (https://localhost:8080/app.js:151:13) at eval code (eval code:16:22) at ./node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/components/DefaultBryntumGrid.vue?vue&type=script&lang=js& (https://localhost:8080/0.js:11:1) at __webpack_require__ (https://localhost:8080/app.js:790:12) at fn (https://localhost:8080/app.js:151:13) at eval code (eval code:2:22) at ./src/components/DefaultBryntumGrid.vue?vue&type=script&lang=js& (https://localhost:8080/0.js:231:1) at __webpack_require__ (https://localhost:8080/app.js:790:12)"
I found in the docs an ES6 import example like I did. https://www.bryntum.com/docs/grid/#guides/gettingstarted/es6bundle.md
This points to an example page: https://www.bryntum.com/examples/grid/esmodule/#
This example does not work in edge either. It comes with a different error