Events-Referenz

Alle Event-Callbacks sind optionale Props. "Before"-Callbacks können false zurückgeben, um die Operation abzubrechen.

Hinweis

Der React-Wrapper verwendet onCamelCase-Prop-Namen (z. B. onAfterAction), während die JS Spreadsheet-API camelCase-Eventnamen auf dem Event-Bus verwendet (z. B. afterAction). Weitere Informationen zur imperativen API finden Sie in der JS-API Events-Referenz.

Aktions-Events

Werden bei jeder Benutzeraktion ausgelöst, z. B. bei Zellenbearbeitung, Formatierung oder strukturellen Änderungen.

Prop	Abbrechbar	Beschreibung
onBeforeAction	Ja	Wird ausgelöst, bevor eine Benutzeraktion ausgeführt wird. Gibt false zurück, um abzubrechen. Handler: BeforeActionHandler. JS-API: beforeAction.
onAfterAction	Nein	Wird ausgelöst, nachdem eine Benutzeraktion abgeschlossen ist. Handler: AfterActionHandler. JS-API: afterAction.

Beispiel: Zeilenlöschung blockieren

import { Actions } from "@dhtmlx/trial-react-spreadsheet";

<ReactSpreadsheet
    sheets={sheets}
    onBeforeAction={(action, config) => {
        if (action === Actions.deleteRow) return false;
    }}
/>

Beispiel: Alle Benutzeraktionen protokollieren

<ReactSpreadsheet
    sheets={sheets}
    onAfterAction={(action, config) => {
        console.log("Action:", action, "Cell:", config.cell);
    }}
/>

Auswahl-Events

Werden ausgelöst, wenn sich die Zellenauswahl oder der Fokus ändert.

Prop	Abbrechbar	Beschreibung
onBeforeSelectionSet	Ja	Wird ausgelöst, bevor eine Zelle zur Auswahl hinzugefügt wird. Handler: BeforeCellHandler. JS-API: beforeSelectionSet.
onAfterSelectionSet	Nein	Wird ausgelöst, nachdem eine Zelle zur Auswahl hinzugefügt wurde. Handler: AfterCellHandler. JS-API: afterSelectionSet.
onBeforeSelectionRemove	Ja	Wird ausgelöst, bevor eine Zelle aus der Auswahl entfernt wird. Handler: BeforeCellHandler.
onAfterSelectionRemove	Nein	Wird ausgelöst, nachdem eine Zelle aus der Auswahl entfernt wurde. Handler: AfterCellHandler.
onBeforeFocusSet	Ja	Wird ausgelöst, bevor sich die fokussierte Zelle ändert. Handler: BeforeCellHandler. JS-API: beforeFocusSet.
onAfterFocusSet	Nein	Wird ausgelöst, nachdem sich die fokussierte Zelle geändert hat. Handler: AfterCellHandler. JS-API: afterFocusSet.

Beispiel: Ausgewählte Zelle verfolgen

const [selectedCell, setSelectedCell] = useState<string>("");

<ReactSpreadsheet
    sheets={sheets}
    onAfterFocusSet={(cell) => setSelectedCell(cell)}
/>

<p>Current cell: {selectedCell}</p>

Bearbeitungs-Events

Werden ausgelöst, wenn die Zellenbearbeitung beginnt oder endet.

Prop	Abbrechbar	Beschreibung
onBeforeEditStart	Ja	Wird ausgelöst, bevor die Zellenbearbeitung beginnt. Handler: BeforeEditHandler. JS-API: beforeEditStart.
onAfterEditStart	Nein	Wird ausgelöst, nachdem die Zellenbearbeitung begonnen hat. Handler: AfterEditHandler. JS-API: afterEditStart.
onBeforeEditEnd	Ja	Wird ausgelöst, bevor die Zellenbearbeitung endet. Gibt false zurück, um abzubrechen und die Bearbeitung fortzusetzen. Handler: BeforeEditHandler. JS-API: beforeEditEnd.
onAfterEditEnd	Nein	Wird ausgelöst, nachdem die Zellenbearbeitung beendet und der Wert gespeichert wurde. Handler: AfterEditHandler. JS-API: afterEditEnd.

Beispiel: Vor dem Speichern validieren

<ReactSpreadsheet
    sheets={sheets}
    onBeforeEditEnd={(cell, value) => {
        if (cell.startsWith("B") && isNaN(Number(value))) {
            return false; // Abbrechen: Spalte B muss numerisch sein
        }
    }}
/>

Tabellenblatt-Events

Werden ausgelöst, wenn das aktive Tabellenblatt wechselt.

Prop	Abbrechbar	Beschreibung
onBeforeSheetChange	Ja	Wird ausgelöst, bevor das aktive Tabellenblatt wechselt. Handler: BeforeSheetHandler. JS-API: beforeSheetChange.
onAfterSheetChange	Nein	Wird ausgelöst, nachdem das aktive Tabellenblatt gewechselt hat. Handler: AfterSheetHandler. JS-API: afterSheetChange.

Beispiel: Aktives Tabellenblatt verfolgen

<ReactSpreadsheet
    sheets={sheets}
    onAfterSheetChange={(sheet) => {
        console.log("Switched to sheet:", sheet.name);
    }}
/>

Daten-Events

Werden ausgelöst, wenn Tabellendaten geladen werden.

Prop	Beschreibung
onAfterDataLoaded	Wird ausgelöst, nachdem das Laden der Daten abgeschlossen ist (über sheets oder loadUrl). JS-API: afterDataLoaded.

Beispiel: Ladezustand anzeigen

const [loading, setLoading] = useState(true);

<ReactSpreadsheet
    loadUrl="/api/data"
    onAfterDataLoaded={() => setLoading(false)}
/>

Eingabe-Events

Werden während der Benutzereingabe in Zellen oder der Formelleiste ausgelöst.

Prop	Beschreibung
onGroupFill	Wird während Auto-Fill-Operationen (Zieh-Füllung) ausgelöst. Handler: (focusedCell: string, selectedCell: string) => void. JS-API: groupFill.
onEditLineInput	Wird bei Eingabe in der Formel-/Bearbeitungsleiste ausgelöst. Handler: (value: string) => void.
onCellInput	Wird bei Eingabe in einer Zelle während der Bearbeitung ausgelöst. Handler: (cell: string, value: string) => void.

Callbacks für abgeleiteten Zustand

Diese Callbacks benachrichtigen über Änderungen des berechneten Zustands und nicht über direkte Benutzeraktionen.

Prop	Beschreibung
onStateChange	Benachrichtigt, wenn sich die Verfügbarkeit von Rückgängig/Wiederherstellen ändert. Handler: (state: { canUndo: boolean; canRedo: boolean }) => void.
onSearchResults	Benachrichtigt mit passenden Zellreferenzen, wenn die search-Prop aktiv ist. Handler: (cells: string[]) => void.
onFilterChange	Benachrichtigt, wenn der Benutzer Filter über die Benutzeroberfläche ändert. Handler: (filter: SheetFilter) => void.

Beispiel: Rückgängig/Wiederherstellen-Schaltflächen

import { useRef, useState } from "react";
import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";

function App() {
    const ref = useRef<SpreadsheetRef>(null);
    const [history, setHistory] = useState({ canUndo: false, canRedo: false });

    return (
        <>
            <button
                disabled={!history.canUndo}
                onClick={() => ref.current?.instance?.undo()}
            >
                Undo
            </button>
            <button
                disabled={!history.canRedo}
                onClick={() => ref.current?.instance?.redo()}
            >
                Redo
            </button>
            <ReactSpreadsheet
                ref={ref}
                sheets={sheets}
                onStateChange={setHistory}
            />
        </>
    );
}

Beispiel: Kontrollierte Suche mit Ergebnissen

const [search, setSearch] = useState<SearchConfig | undefined>();
const [results, setResults] = useState<string[]>([]);

<input
    placeholder="Search..."
    onChange={(e) =/> setSearch({ query: e.target.value, open: true })}
/>
<p>{results.length} cells found</p>

<ReactSpreadsheet
    sheets={sheets}
    search={search}
    onSearchResults={setResults}
/>

Beispiel: Filterzustand synchronisieren

const [activeFilter, setActiveFilter] = useState<SheetFilter | null>(null);

<ReactSpreadsheet
    sheets={sheets}
    onFilterChange={(filter) => setActiveFilter(filter)}
/>