Справочник событий

Все колбэки событий являются необязательными пропсами. Колбэки «Before» могут вернуть false для отмены операции.

Примечание

React-обёртка использует имена пропсов в формате onCamelCase (например, onAfterAction), тогда как JS API Spreadsheet использует имена событий в формате camelCase на event bus (например, afterAction). Смотрите Справочник событий JS API для императивного API.

События действий

Срабатывают при любом действии пользователя, например при редактировании ячеек, форматировании или структурных изменениях.

Пропс	Отменяемое	Описание
`onBeforeAction`	Да	Срабатывает перед выполнением любого действия пользователя. Вернуть `false` для отмены. Обработчик: `BeforeActionHandler`. JS API: `beforeAction`.
`onAfterAction`	Нет	Срабатывает после завершения любого действия пользователя. Обработчик: `AfterActionHandler`. JS API: `afterAction`.

Пример: Блокировка удаления строк

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

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

Пример: Запись всех действий пользователя

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

События выделения

Срабатывают при изменении выделения или фокуса ячейки.

Пропс	Отменяемое	Описание
`onBeforeSelectionSet`	Да	Срабатывает перед добавлением ячейки в выделение. Обработчик: `BeforeCellHandler`. JS API: `beforeSelectionSet`.
`onAfterSelectionSet`	Нет	Срабатывает после добавления ячейки в выделение. Обработчик: `AfterCellHandler`. JS API: `afterSelectionSet`.
`onBeforeSelectionRemove`	Да	Срабатывает перед удалением ячейки из выделения. Обработчик: `BeforeCellHandler`.
`onAfterSelectionRemove`	Нет	Срабатывает после удаления ячейки из выделения. Обработчик: `AfterCellHandler`.
`onBeforeFocusSet`	Да	Срабатывает перед изменением активной ячейки. Обработчик: `BeforeCellHandler`. JS API: `beforeFocusSet`.
`onAfterFocusSet`	Нет	Срабатывает после изменения активной ячейки. Обработчик: `AfterCellHandler`. JS API: `afterFocusSet`.

Пример: Отслеживание выбранной ячейки

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

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

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

События редактирования

Срабатывают при начале или завершении редактирования ячейки.

Пропс	Отменяемое	Описание
`onBeforeEditStart`	Да	Срабатывает перед началом редактирования ячейки. Обработчик: `BeforeEditHandler`. JS API: `beforeEditStart`.
`onAfterEditStart`	Нет	Срабатывает после начала редактирования ячейки. Обработчик: `AfterEditHandler`. JS API: `afterEditStart`.
`onBeforeEditEnd`	Да	Срабатывает перед завершением редактирования ячейки. Вернуть `false` для отмены и продолжения редактирования. Обработчик: `BeforeEditHandler`. JS API: `beforeEditEnd`.
`onAfterEditEnd`	Нет	Срабатывает после завершения редактирования ячейки и сохранения значения. Обработчик: `AfterEditHandler`. JS API: `afterEditEnd`.

Пример: Валидация перед сохранением

<ReactSpreadsheet
    sheets={sheets}
    onBeforeEditEnd={(cell, value) => {
        if (cell.startsWith("B") && isNaN(Number(value))) {
            return false; // Отмена: столбец B должен содержать числа
        }
    }}
/>

События листов

Срабатывают при смене активной вкладки листа.

Пропс	Отменяемое	Описание
`onBeforeSheetChange`	Да	Срабатывает перед сменой активного листа. Обработчик: `BeforeSheetHandler`. JS API: `beforeSheetChange`.
`onAfterSheetChange`	Нет	Срабатывает после смены активного листа. Обработчик: `AfterSheetHandler`. JS API: `afterSheetChange`.

Пример: Отслеживание активного листа

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

События данных

Срабатывают при загрузке данных таблицы.

Пропс	Описание
`onAfterDataLoaded`	Срабатывает после завершения загрузки данных (через `sheets` или `loadUrl`). JS API: `afterDataLoaded`.

Пример: Отображение состояния загрузки

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

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

События ввода

Срабатывают при вводе пользователя в ячейках или строке формул.

Пропс	Описание
`onGroupFill`	Срабатывает при операциях автозаполнения (перетаскивание). Обработчик: `(focusedCell: string, selectedCell: string) => void`. JS API: `groupFill`.
`onEditLineInput`	Срабатывает при вводе в строку формул/редактирования. Обработчик: `(value: string) => void`.
`onCellInput`	Срабатывает при вводе в ячейку во время редактирования. Обработчик: `(cell: string, value: string) => void`.

Колбэки производных состояний

Эти колбэки уведомляют об изменениях вычисленных состояний, а не о прямых действиях пользователя.

Пропс	Описание
`onStateChange`	Уведомляет об изменении доступности отмены/повтора. Обработчик: `(state: { canUndo: boolean; canRedo: boolean }) => void`.
`onSearchResults`	Уведомляет со ссылками на совпадающие ячейки, когда активен пропс `search`. Обработчик: `(cells: string[]) => void`.
`onFilterChange`	Уведомляет при изменении пользователем фильтров через интерфейс. Обработчик: `(filter: SheetFilter) => void`.

Пример: Кнопки отмены/повтора

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

Пример: Управляемый поиск с результатами

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

Пример: Синхронизация состояния фильтра

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

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

События действий​

События выделения​

События редактирования​

События листов​

События данных​

События ввода​

Колбэки производных состояний​