Быстрый старт с React Spreadsheet

Это руководство поможет вам создать приложение на React с DHTMLX Spreadsheet с нуля.

Создание нового проекта

npm create vite@latest my-spreadsheet-app -- --template react-ts
cd my-spreadsheet-app

Установка React Spreadsheet

npm install @dhtmlx/trial-react-spreadsheet

Описание других вариантов пакетов см. в разделе Установка.

Создание демонстрационных данных

Создайте файл src/data.ts с примером данных для таблицы:

src/data.ts

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

export const sheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Sales",
        cells: {
            A1: { value: "Product", css: "bold" },
            B1: { value: "Revenue", css: "bold", format: "currency" },
            A2: { value: "Widget" },
            B2: { value: 15000, format: "currency" },
            A3: { value: "Gadget" },
            B3: { value: 22000, format: "currency" },
            A4: { value: "Total" },
            B4: { value: "=SUM(B2:B3)", format: "currency" },
        },
    },
];

export const styles = {
    bold: { "font-weight": "bold" },
};

Создание компонента

Замените содержимое файла src/App.tsx:

src/App.tsx

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";
import { sheets as initialSheets, styles } from "./data";

function App() {
    const [sheets] = useState<SheetData[]>(initialSheets);

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />
        </div>
    );
}

export default App;

Добавление стилей

Обновите src/index.css, чтобы обеспечить полноэкранный макет:

src/index.css

html,
body,
#root {
    height: 100%;
    padding: 0;
    margin: 0;
}

Запуск приложения

npm run dev

Откройте URL, указанный в терминале (обычно http://localhost:5173), чтобы увидеть таблицу.

Связанные API и гайды

• Справочник пропсов — настройка поведения таблицы
• Справочник событий — реакция на действия пользователя
• Справочник типов — интерфейсы и перечисления TypeScript
• Управление данными и состоянием — управление данными таблицы в состоянии приложения

Также можно изучить демонстрационный репозиторий на GitHub с полным рабочим примером.