Our blazing fast Grid component built with pure JavaScript


Post by olaf »

Hi,

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)"
Any idea's what I am doing wrong? Thanks!

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

Post by saki »

We currently do not have a grid example created by vue-cli but we have many of them for Scheduler (the approach would same for Grid). You could probably download Scheduler trial too and analyze its Vue demos.

I have created the feature request: https://github.com/bryntum/support/issues/569

You may need to add:
    transpileDependencies : [
        'bryntum-grid'
    ]
    
to your vue.config.js

Post by olaf »

Hi,

Thanks this works.
Can you explain why this is needed for use in Edge?

Well you can take my example for your demo ;-).
I have installed it using: npm install --save C:\Projects\bryntum-grid-trial\grid-3.1.1-trial\build
And I have created the above component.

Post by saki »

Edge doesn't support some javascript features that are in grid.module.js so the module needs to be transpiled.

Thank you very much for sharing the example.

Post by alex.l »

Hi olaf,

We implemented some examples of integration Bryntum Grid with Vue. It will be available with the nearest release here: https://bryntum.com/examples/grid/

All best,
Alex

All the best,
Alex


Post Reply