@andmarruda/intelligent-grid-vue

Vue 3 component for Intelligent Grid, the Excel-like data grid powered by SorlaDB.

npm install @andmarruda/intelligent-grid-vue @andmarruda/intelligent-grid sorla-db

<script setup lang="ts">
import { ref } from 'vue';
import { IntelligentGrid } from '@andmarruda/intelligent-grid-vue';
import type { ColumnDefinition } from '@andmarruda/intelligent-grid';
import '@andmarruda/intelligent-grid/styles.css';
import sorla from 'sorla-db';

const columns: ColumnDefinition[] = [
    { field: 'product', title: 'Product' },
    { field: 'qty', type: 'integer' },
    { field: 'price', type: 'currency' },
    { field: 'total', type: 'currency', formula: '=[@qty]*[@price]' }
];
const options = { sorla, idField: 'id', editable: true, height: 480 };
const rows = ref(await fetch('/api/orders').then(r => r.json()));
const table = ref<InstanceType<typeof IntelligentGrid>>();
</script>

<template>
    <button @click="table?.grid?.undo()">Undo</button>
    <IntelligentGrid ref="table" :columns="columns" :data="rows" :options="options"
        @cell-change="e => save(e.detail)" />
</template>

| Prop / event | | | --- | --- | | columns | Column definitions. Replacing the array calls grid.setColumns(). | | data | Rows. Replacing the array calls grid.setData() (resets edits, undo and selection). | | options | Every other grid option. Read once on mount; change key to apply new ones. | | @ready, @cell-change, @selection-change... | Every grid event, with the GridEvent as payload. | | grid (exposed) | The IntelligentGrid instance, through a template ref. |

See the grid documentation for options, events and the API.