@andmarruda/intelligent-grid-react

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

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

import { useRef } from 'react';
import { IntelligentGrid } from '@andmarruda/intelligent-grid-react';
import type { IntelligentGrid as Grid, 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 };

export function Orders({ rows }) {
    const grid = useRef<Grid>(null);
    return (
        <>
            <button onClick={() => grid.current?.undo()}>Undo</button>
            <IntelligentGrid ref={grid} columns={columns} data={rows} options={options}
                onCellChange={e => save(e.detail)} />
        </>
    );
}

| Prop | | | --- | --- | | columns | Column definitions. A new array calls grid.setColumns(). | | data | Rows. A new array calls grid.setData() (resets edits, undo and selection). | | options | Every other grid option. Read once on mount; change key to apply new ones. | | ref | Receives the IntelligentGrid instance. | | on<Event> | Any grid event: onReady, onCellChange, onSelectionChange, onRowClick... Handlers can change freely without recreating the grid. | | id, className, style | Applied to the host <div>. |

Keep columns and options stable (module constants, useMemo or state): a new columns array on every render reapplies the columns every render.

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