@progress/kendo-react-spreadsheet/index.d.mts

KendoReact Spreadsheet package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { CalcError } from '@progress/kendo-spreadsheet-common';
import { Cell } from '@progress/kendo-spreadsheet-common';
import { CellBorder } from '@progress/kendo-spreadsheet-common';
import { CellDefaultStyle } from '@progress/kendo-spreadsheet-common';
import { CellRef } from '@progress/kendo-spreadsheet-common';
import { Context } from '@progress/kendo-spreadsheet-common';
import { dateToSerial } from '@progress/kendo-spreadsheet-common';
import { defineAlias } from '@progress/kendo-spreadsheet-common';
import { defineFunction } from '@progress/kendo-spreadsheet-common';
import { DocumentDescriptor } from '@progress/kendo-spreadsheet-common';
import { ExcelExportSettings } from '@progress/kendo-spreadsheet-common';
import { Matrix } from '@progress/kendo-spreadsheet-common';
import { NameRef } from '@progress/kendo-spreadsheet-common';
import { NULLREF } from '@progress/kendo-spreadsheet-common';
import { packDate } from '@progress/kendo-spreadsheet-common';
import { packTime } from '@progress/kendo-spreadsheet-common';
import { Range as Range_2 } from '@progress/kendo-spreadsheet-common';
import { RangeRef } from '@progress/kendo-spreadsheet-common';
import * as React_2 from 'react';
import { Ref } from '@progress/kendo-spreadsheet-common';
import { SelectedHeaders } from '@progress/kendo-spreadsheet-common';
import { serialToDate } from '@progress/kendo-spreadsheet-common';
import { Sheet } from '@progress/kendo-spreadsheet-common';
import { SheetColumn } from '@progress/kendo-spreadsheet-common';
import { SheetDescriptor } from '@progress/kendo-spreadsheet-common';
import { SheetRow } from '@progress/kendo-spreadsheet-common';
import { SpreadsheetOptions } from '@progress/kendo-spreadsheet-common';
import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
import { UnionRef } from '@progress/kendo-spreadsheet-common';
import { unpackDate } from '@progress/kendo-spreadsheet-common';
import { unpackTime } from '@progress/kendo-spreadsheet-common';
import { View } from '@progress/kendo-spreadsheet-common';
import { Workbook } from '@progress/kendo-spreadsheet-common';
import { Workbook as Workbook_2 } from '@progress/kendo-ooxml';

/**
 * The AddColumnLeft tool component.
 */
export declare const AddColumnLeft: React_2.FunctionComponent<AddColumnLeftProps>;

/**
 * The props of the AddColumnLeft tool component.
 */
export declare interface AddColumnLeftProps extends TableToolProps {
}

/**
 * The AddColumnRight tool component.
 */
export declare const AddColumnRight: React_2.FunctionComponent<AddColumnRightProps>;

/**
 * The props of the AddColumnRight tool component.
 */
export declare interface AddColumnRightProps extends TableToolProps {
}

/**
 * The AddRowAbove tool component.
 */
export declare const AddRowAbove: React_2.FunctionComponent<AddRowAboveProps>;

/**
 * The props of the AddRowAbove tool component.
 */
export declare interface AddRowAboveProps extends TableToolProps {
}

/**
 * The AddRowBelow tool component.
 */
export declare const AddRowBelow: React_2.FunctionComponent<AddRowBelowProps>;

/**
 * The props of the AddRowBelow tool component.
 */
export declare interface AddRowBelowProps extends TableToolProps {
}

/**
 * The AlignHorizontally tool component.
 */
export declare const AlignHorizontally: React_2.FunctionComponent<AlignHorizontallyProps>;

/**
 * The props of the AlignHorizontally tool component.
 */
export declare interface AlignHorizontallyProps extends SpreadsheetToolProps {
    /**
     * The value of the tool.
     */
    value: string;
}

/**
 * The Alignment tool component.
 */
export declare const Alignment: React_2.FunctionComponent<AlignmentProps>;

/**
 * The props of the Alignment tool component.
 */
export declare interface AlignmentProps extends SpreadsheetToolProps {
    /**
     * The value of the tool.
     */
    value: {
        textAlign?: string;
        verticalAlign?: string;
    };
}

/**
 * The AlignVertically tool component.
 */
export declare const AlignVertically: React_2.FunctionComponent<AlignVerticallyProps>;

/**
 * The props of the AlignVertically tool component.
 */
export declare interface AlignVerticallyProps extends SpreadsheetToolProps {
    /**
     * The value of the tool.
     */
    value: string;
}

/**
 * The BackgroundColor tool component.
 */
export declare const BackgroundColor: React.FunctionComponent<BackgroundColorProps>;

/**
 * The props of the BackgroundColor tool component.
 */
export declare interface BackgroundColorProps extends ColorToolProps {
}

/**
 * The Bold tool component.
 */
export declare const Bold: React.FunctionComponent<BoldProps>;

/**
 * The props of the Bold tool component.
 */
export declare interface BoldProps extends PropertyChangeToolProps {
}

export { CalcError }

export { Cell }

export { CellBorder }

export { CellDefaultStyle }

export { CellRef }

/**
 * @hidden
 */
export declare const CleanFormatting: React_2.FunctionComponent<CleanFormattingProps>;

/**
 * @hidden
 */
export declare interface CleanFormattingProps extends PropertyChangeToolProps {
}

/**
 * @hidden
 */
declare interface ColorToolProps extends SpreadsheetToolProps {
    /**
     * The value of the tool.
     */
    value?: string;
}

export { Context }

export { dateToSerial }

/**
 * The DecreaseDecimal tool component.
 */
export declare const DecreaseDecimal: React_2.FunctionComponent<DecreaseDecimalProps>;

/**
 * The props of the DecreaseDecimal tool component.
 */
export declare interface DecreaseDecimalProps extends SpreadsheetToolProps {
}

/**
 * The DecreaseFontSize tool component.
 */
export declare const DecreaseFontSize: React_2.FunctionComponent<DecreaseFontSizeProps>;

/**
 * The props of the DecreaseFontSize tool component.
 */
export declare interface DecreaseFontSizeProps extends FontSizeChangeToolProps {
}

/**
 * The default toolbar configuration.
 */
export declare const defaultTabs: SpreadsheetTab[];

export { defineAlias }

export { defineFunction }

/**
 * The DeleteColumn tool component.
 */
export declare const DeleteColumn: React_2.FunctionComponent<DeleteColumnProps>;

/**
 * The props of the DeleteColumn tool component.
 */
export declare interface DeleteColumnProps extends TableToolProps {
}

/**
 * The DeleteRow tool component.
 */
export declare const DeleteRow: React_2.FunctionComponent<DeleteRowProps>;

/**
 * The props of the DeleteRow tool component.
 */
export declare interface DeleteRowProps extends TableToolProps {
}

export { DocumentDescriptor }

/**
 * @hidden
 */
declare interface DropDownToolProps extends SpreadsheetToolProps {
    /**
     * The value of the tool.
     */
    value?: any;
}

/**
 * The ExcelExport tool component.
 */
export declare const ExcelExport: React_2.FunctionComponent<ExcelExportProps>;

/**
 * The props of the ExcelExport tool component.
 */
export declare interface ExcelExportProps extends SpreadsheetToolProps {
}

export { ExcelExportSettings }

/**
 * The FontFamily tool component.
 */
export declare const FontFamily: React_2.FunctionComponent<FontFamilyProps>;

/**
 * The props of the FontFamily tool component.
 */
export declare interface FontFamilyProps extends DropDownToolProps {
}

/**
 * The FontSize tool component.
 */
export declare const FontSize: React_2.FunctionComponent<FontSizeProps>;

/**
 * @hidden
 */
declare interface FontSizeChangeToolProps extends SpreadsheetToolProps {
    /**
     * The selected state of the tool.
     */
    value: number;
}

/**
 * The props of the FontSize tool component.
 */
export declare interface FontSizeProps extends DropDownToolProps {
}

/**
 * The Format tool component.
 */
export declare const Format: React_2.FunctionComponent<FormatProps>;

/**
 * The props of the Format tool component.
 */
export declare interface FormatProps extends SpreadsheetToolProps {
}

/**
 * The GridLines tool component.
 */
export declare const GridLines: React_2.FunctionComponent<GridLinesProps>;

/**
 * The props of the GridLines tool component.
 */
export declare interface GridLinesProps extends SpreadsheetToolProps {
    /**
     * The selected state of the tool.
     */
    value?: boolean;
}

/**
 * The IncreaseDecimal tool component.
 */
export declare const IncreaseDecimal: React_2.FunctionComponent<IncreaseDecimalProps>;

/**
 * The props of the IncreaseDecimal tool component.
 */
export declare interface IncreaseDecimalProps extends SpreadsheetToolProps {
}

/**
 * The IncreaseFontSize tool component.
 */
export declare const IncreaseFontSize: React_2.FunctionComponent<IncreaseFontSizeProps>;

/**
 * The props of the IncreaseFontSize tool component.
 */
export declare interface IncreaseFontSizeProps extends FontSizeChangeToolProps {
}

/**
 * The Italic tool component.
 */
export declare const Italic: React.FunctionComponent<ItalicProps>;

/**
 * The props of the Italic tool component.
 */
export declare interface ItalicProps extends PropertyChangeToolProps {
}

export { Matrix }

export { NameRef }

export { NULLREF }

/**
 * The Open tool component.
 */
export declare const Open: React_2.FunctionComponent<OpenProps>;

/**
 * The props of the Open tool component.
 */
export declare interface OpenProps extends SpreadsheetToolProps {
}

export { packDate }

export { packTime }

/**
 * @hidden
 */
declare interface PropertyChangeToolProps extends SpreadsheetToolProps {
    /**
     * The selected state of the tool.
     */
    value?: boolean;
}

export { Range_2 as Range }

export { RangeRef }

/**
 * The Redo tool component.
 */
export declare const Redo: React.FunctionComponent<RedoProps>;

/**
 * The props of the Redo tool component.
 */
export declare interface RedoProps extends SpreadsheetToolProps {
}

export { Ref }

export { serialToDate }

export { Sheet }

export { SheetColumn }

export { SheetDescriptor }

export { SheetRow }

/**
 * Represents the [KendoReact Spreadsheet component]({% slug overview_spreadsheet %}).
 *
 * Accepts properties of type [SpreadsheetProps]({% slug api_spreadsheet_spreadsheetprops %}).
 * Obtaining the ref will give you an object of type [SpreadsheetHandle]({% slug api_spreadsheet_spreadsheethandle %}).
 *
 * @example
 * ```jsx
 * const sheets = [
 *   {
 *     name: 'Food Order',
 *     rows: [
 *       {
 *         cells: [
 *           {
 *             value: 216321,
 *             textAlign: 'center',
 *           },
 *         ],
 *       },
 *     ],
 *     columns: [
 *       {
 *         width: 100,
 *       },
 *     ],
 *   },
 * ];
 * const App = () => {
 *   return (
 *     <Spreadsheet
 *       style={{
 *         width: "100%",
 *         height: 680,
 *       }}
 *       defaultProps={{
 *         sheets,
 *       }}
 *     />
 *   );
 * };
 * ```
 */
export declare const Spreadsheet: React_2.ForwardRefExoticComponent<SpreadsheetProps & React_2.RefAttributes<SpreadsheetHandle | null>>;

/**
 * Represents the `SpreadsheetChangeEvent` object.
 */
export declare interface SpreadsheetChangeEvent extends SpreadsheetEvent, SpreadsheetSelectEvent {
}

declare interface SpreadsheetEvent {
    /**
     * The widget instance which fired the event.
     */
    sender: SpreadsheetWidget;
}

/**
 * Represents the `SpreadsheetExcelExportEvent` object.
 */
export declare interface SpreadsheetExcelExportEvent extends SpreadsheetEvent {
    /**
     * The array of data items that is used to create the Excel workbook.
     */
    data: Array<any>;
    /**
     * The Excel workbook configuration object.
     * Modifications of the workbook will reflect in the output Excel document.
     */
    workbook: Workbook_2;
    /**
     * If invoked, the Spreadsheet will not save the generated file.
     */
    preventDefault: Function;
}

/**
 * Represents the `SpreadsheetExcelImportEvent` object.
 */
export declare interface SpreadsheetExcelImportEvent extends SpreadsheetEvent {
    /**
     * The file that is being imported.
     */
    file: Blob | File;
    /**
     * If invoked, the Spreadsheet will not import the file.
     */
    preventDefault: Function;
}

/**
 * Represents the Spreadsheet handle object.
 */
export declare interface SpreadsheetHandle {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Spreadsheet.
     */
    props: SpreadsheetProps;
    /**
     * Represents the SpreadsheetWidget object, holding the core functionality of the Spreadsheet.
     */
    instance: SpreadsheetWidget | null;
    /**
     * Returns the `View` object of the Spreadsheet.
     */
    get view(): View;
    /**
     * Returns the `Workbook` object of the Spreadsheet.
     */
    get workbook(): Workbook;
    /**
     * Executes the passed command against the selected cell/range.
     *
     * @param options An object containing the command name and the required by it options.
     */
    executeCommand(options: any): void;
    /**
     * Loads the workbook data from an object with the format that is defined in the configuration.
     *
     * Note: All existing sheets and their data will be lost.
     *
     * @param json The object from where data will be loaded. This has to be the deserialized object, not the JSON string.
     */
    fromJSON(json: DocumentDescriptor): void;
    /**
     * Serializes the workbook.
     */
    toJSON(): DocumentDescriptor;
    /**
     * Serializes the workbook. This method does not return the JSON, but a Promise object which will yield the JSON data when it is available.
     * The method is functionally similar to `toJSON`, but it is also able to save the embedded images (this is the reason why it must be asynchronous).
     */
    saveJSON(): Promise<DocumentDescriptor>;
    /**
     * Clears the Spreadsheet and populates it with data from the specified Excel (.xlsx) file.
     *
     * @param blob The file or blob that is usually obtained through a file input.
     */
    fromFile(file: File | Blob): void;
    /**
     * Initiates the Excel export. Also fires the excelExport event.
     *
     * Note: Calling this method may trigger the built-in popup blocker of the browser.
     * To avoid that, always call it as a response to an end-user action, for example, a button click.
     */
    saveAsExcel(options: any): void;
    /**
     * Gets or sets the active sheet.
     */
    activeSheet(sheet?: Sheet): Sheet | void;
    /**
     * Returns an array with the sheets in the workbook.
     */
    sheets(): Sheet[];
    /**
     * Re-renders all data in the Spreadsheet.
     */
    refresh(): void;
}

export { SpreadsheetOptions }

export declare interface SpreadsheetProps {
    /**
     * Sets additional classes to the Spreadsheet.
     *
     * @example
     * ```jsx
     * <Spreadsheet className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Represents the default props of the Spreadsheet.
     *
     * @example
     * ```jsx
     * <Spreadsheet defaultProps={{ toolbar: true }} />
     * ```
     */
    defaultProps?: SpreadsheetOptions;
    /**
     * A Boolean value which indicates if the toolbar will be displayed. It also allows customizing the tabs' content.
     *
     * @default true
     * @example
     * ```jsx
     * <Spreadsheet toolbar={false} />
     * <Spreadsheet toolbar={[{ text: "Custom Tab", tools: [CustomToolComponent] }]} />
     * ```
     */
    toolbar?: boolean | SpreadsheetTab[];
    /**
     * Specifies the styles that will be applied to the wrapping element.
     *
     * @example
     * ```jsx
     * <Spreadsheet style={{ height: '500px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Triggered when the Spreadsheet selection is changed.
     *
     * @example
     * ```jsx
     * <Spreadsheet onSelect={(event) => console.log(event.range)} />
     * ```
     */
    onSelect?: (event: SpreadsheetSelectEvent) => void;
    /**
     * Triggered when a value in the Spreadsheet has been changed.
     *
     * @example
     * ```jsx
     * <Spreadsheet onChange={(event) => console.log(event.range)} />
     * ```
     */
    onChange?: (event: SpreadsheetChangeEvent) => void;
    /**
     * Triggered when the range format is changed from the UI.
     *
     * @example
     * ```jsx
     * <Spreadsheet onChangeFormat={(event) => console.log(event.range)} />
     * ```
     */
    onChangeFormat?: (event: SpreadsheetChangeEvent) => void;
    /**
     * Fired when the user clicks the Open toolbar button.
     *
     * @example
     * ```jsx
     * <Spreadsheet onExcelImport={(event) => console.log(event.file)} />
     * ```
     */
    onExcelImport?: (event: SpreadsheetExcelImportEvent) => void;
    /**
     * Fires when the user clicks the Export to Excel toolbar button.
     *
     * @example
     * ```jsx
     * <Spreadsheet onExcelExport={(event) => console.log(event.workbook)} />
     * ```
     */
    onExcelExport?: (event: SpreadsheetExcelExportEvent) => void;
}

/**
 * Represents the `SpreadsheetSelectEvent` object.
 */
export declare interface SpreadsheetSelectEvent extends SpreadsheetEvent {
    /**
     * The Range that is selected.
     */
    range: Range_2;
}

/**
 * Represents the Spreadsheet tab configuration object.
 */
export declare interface SpreadsheetTab {
    /**
     * The text of the tab.
     */
    text?: string;
    /**
     * The localization key of the tab's text.
     */
    textKey?: string;
    /**
     * Indicates if the tab to be selected initially.
     */
    selected?: boolean;
    /**
     * The toolbar configuration in the tab content.
     */
    tools: (React.ComponentType<any> | React.ComponentType<any>[])[];
}

/**
 * The base props interface of the Spreadsheet tool component.
 */
export declare interface SpreadsheetToolProps {
    /**
     * The `React.RefObject` object of the SpreadsheetWidget, holding the core functionality of the Spreadsheet.
     */
    spreadsheetRef: React_2.RefObject<SpreadsheetWidget | null>;
}

export { SpreadsheetWidget }

declare interface TableToolProps extends SpreadsheetToolProps {
    /**
     * @hidden
     */
    value: SelectedHeaders;
}

/**
 * The TextColor tool component.
 */
export declare const TextColor: React.FunctionComponent<TextColorProps>;

/**
 * The props of the TextColor tool component.
 */
export declare interface TextColorProps extends ColorToolProps {
}

/**
 * The TextWrap tool component.
 */
export declare const TextWrap: React_2.FunctionComponent<TextWrapProps>;

/**
 * The props of the TextWrap tool component.
 */
export declare interface TextWrapProps extends SpreadsheetToolProps {
    /**
     * The selected state of the tool.
     */
    value?: boolean;
}

/**
 * @hidden
 */
export declare const toolsValueMap: any;

/**
 * The Underline tool component.
 */
export declare const Underline: React.FunctionComponent<UnderlineProps>;

/**
 * The props of the Underline tool component.
 */
export declare interface UnderlineProps extends PropertyChangeToolProps {
}

/**
 * The Undo tool component.
 */
export declare const Undo: React.FunctionComponent<UndoProps>;

/**
 * The props of the Undo tool component.
 */
export declare interface UndoProps extends SpreadsheetToolProps {
}

export { UnionRef }

export { unpackDate }

export { unpackTime }

export { View }

export { Workbook }

export { }