Row grouping updated

v2.9.2

Update package.json

Grouping version up

v2.9.1

Update package.json

Minimalistic updates

• Minor issues fixes
• Minor filter design update
• Doc update

Export plugin support

Added export to Excel (CSV)

• Now grid support export to excel. Stacked headers preserved. No row headers included.

<template>
<vue-datagrid :columns="..."  :source="..."   :export="true" ref="grid"/>
</template>

<script>
export default {
     methods: {
        async onExport() {
          this.$refs.grid.getPlugins().then(plugins => {
               plugins.forEach(p => {
                   if (p.exportFile) {
                       const exportPlugin = p;
                       exportPlugin.exportFile({  filename: 'new file' });
                   }
             })
          });
        }
     }
}
</script>

Major sorting issue fix

https://github.com/revolist/revogrid/releases/tag/2.0.3

Version up, minor fixes

Grid update

New grid render and filter

Major revo-grid release support:

• filter plugin
• sorting plugin
• render based on indexes
• trimmed rows

Vue component as editor

Added a way to render vue component per editor

For better performance yet recommended to stick with classic template approach, hence it's using natural DOM virtualization.

If you consider using vue editors in grid, now you can use VGridVueEditor adaptor:

<template>
  <div id="app">
    <v-grid
      :source="rows"
      :columns="columns"
      :editors="gridEditors"/>
  </div>
</template>

<script>
import VGrid, {VGridVueEditor} from "@revolist/vue-datagrid";

const NewEditor = Vue.extend({
  props: ['rowIndex', 'model', 'save', 'close'],
  render(h) {
    return h('button', {
      on: {
        click: (e: MouseEvent) => {
          e.stopPropagation();
          this.close();
          console.log('click', this.rowIndex);
        }
      }
    }, 'I am vue');
  },
});


export default {
  name: "App",
  data() {
    return {
      gridEditors: { button: VGridVueEditor(NewEditor) },
      columns: [{
          prop: "name",
          name: "First",
          editor: "button"
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

For more information please consider investigating vue-editor-adapter.tsx file.

Vue component in templates

Added a way to render vue component per cell

For better performance yet recommended to stick with classical template approach, hence it's using natural DOM virtualization.

If you consider to use vue renders in grid, now you can do kind of this:

<template>
  <div id="app">
    <v-grid
      v-if="grid === 1"
      key="1"
      theme="compact"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>

<script>
import VGrid, {VGridVueTemplate} from "@revolist/vue-datagrid";

const NewComponent = Vue.extend({
  props: ['rowIndex'],
  render(h) {
    return <span on={{
      click: (e: MouseEvent) => {
        e.stopPropagation();
        console.log('click');
      }
    }}>{this.rowIndex}</span>;
  },
});


export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "First",
          cellTemplate: VGridVueTemplate(NewComponent)
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

For more information please consider investigate vue-template.tsx file.

v1.2.0

Update README.md