@andmarruda/intelligent-grid-svelte

Svelte 5 component for Intelligent Grid, the Excel-like data grid powered by SorlaDB.

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

<script lang="ts">
    import { IntelligentGrid } from '@andmarruda/intelligent-grid-svelte';
    import type { IntelligentGrid as Grid, ColumnDefinition } from '@andmarruda/intelligent-grid';
    import '@andmarruda/intelligent-grid/styles.css';
    import sorla from 'sorla-db';

    let { rows } = $props();
    let grid: Grid | null = $state(null);

    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 };
</script>

<button onclick={() => grid?.undo()}>Undo</button>
<IntelligentGrid bind:grid {columns} data={rows} {options} onCellChange={e => save(e.detail)} />

| Prop | | | --- | --- | | 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; wrap in {#key} to apply new ones. | | bind:grid | The IntelligentGrid instance. | | on<Event> | Any grid event: onReady, onCellChange, onSelectionChange, onRowClick... | | id, class, style | Applied to the host <div>. |

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