Merge branch 'next' of https://github.com/DHTMLX/docs-spreadsheet into next

Author: mafanya23

docs/react/installation.md

@@ -1,10 +1,12 @@
 ---
 sidebar_label: Installation
-title: Installing React Spreadsheet
+title: React Spreadsheet installation
 description: "How to install the evaluation or commercial version of DHTMLX React Spreadsheet via npm."
 ---
 
-# Installing React Spreadsheet
+# React Spreadsheet installation
+
+React Spreadsheet is distributed as an npm package in three variants: a public evaluation build, a private evaluation build, and the commercial release. This page covers how to install each variant, import the required CSS stylesheet, and set up TypeScript support.
 
 :::info Prerequisites
 - [Node.js](https://nodejs.org/en/) (LTS version recommended)

docs/react/nextjs.md

@@ -6,8 +6,6 @@ description: "How to use DHTMLX React Spreadsheet in a Next.js application with
 
 # React Spreadsheet in Next.js
 
-## Overview
-
 DHTMLX Spreadsheet is a client-side widget that requires access to the browser DOM. In Next.js with the App Router, server components are the default, so the spreadsheet must be wrapped in a client component using the `"use client"` directive.
 
 :::note

docs/react/overview.md

@@ -43,6 +43,8 @@ The React wrapper provides access to the full feature set of DHTMLX Spreadsheet:
 
 ## Quick start
 
+A minimal working example showing how to render a spreadsheet with one sheet and formatted cells.
+
 ~~~tsx
 import { useState } from "react";
 import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
@@ -105,6 +107,8 @@ Props are categorized by how the component handles changes:
 
 ### Multi-sheet with formulas
 
+Two sheets with cell values and a `SUM` formula, rendered with sheet tabs enabled.
+
 ~~~tsx
 const [sheets] = useState<SheetData[]>([
     {
@@ -132,6 +136,8 @@ const [sheets] = useState<SheetData[]>([
 
 ### Custom toolbar
 
+Pass an array of block identifiers to `toolbarBlocks` to show only the toolbar sections you need.
+
 ~~~tsx
 <ReactSpreadsheet
     sheets={sheets}
@@ -141,6 +147,8 @@ const [sheets] = useState<SheetData[]>([
 
 ### Read-only with locked cells
 
+Set `readonly={true}` to disable all editing at the widget level. Adding `locked: true` on cells protects them individually when the spreadsheet is not in read-only mode.
+
 ~~~tsx
 const sheets: SheetData[] = [
     {
@@ -160,6 +168,8 @@ const sheets: SheetData[] = [
 
 ## Imperative access via ref
 
+Use a `SpreadsheetRef` to access the underlying widget instance for operations that don't map to declarative props, such as serializing data, triggering undo/redo, or setting the selection programmatically.
+
 ~~~tsx
 import { useRef } from "react";
 import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";

docs/react/props.md

@@ -44,6 +44,8 @@ These props are applied immediately without destroying the widget. No data loss
 
 ## Data props
 
+The `sheets` prop is the single source of truth for all spreadsheet content. Changes are applied incrementally: only modified cells, ranges, or settings are updated in the widget.
+
 | Prop | Type | Description |
 |------|------|-------------|
 | `sheets` | [`SheetData[]`](/react/types#sheetdata) | The single source of truth for all spreadsheet data. Each entry represents a sheet with its cells, structure, and metadata. Changes are applied incrementally. |
@@ -56,25 +58,33 @@ Changing `styles` triggers a full data reload. Spreadsheet data is preserved, bu
 
 ## Search props
 
+Controls the search bar state from outside the component. Use it together with `onSearchResults` to build a custom search UI.
+
 | Prop | Type | Description |
 |------|------|-------------|
 | `search` | [`SearchConfig`](/react/types#searchconfig) | Controlled search state. Pass a `SearchConfig` object to trigger/update search. Pass `undefined` to dismiss the search bar. |
 
 ## Data loading props
 
+Load spreadsheet data from a remote URL instead of supplying it through the `sheets` prop.
+
 | Prop | Type | Description |
 |------|------|-------------|
 | `loadUrl` | `string` | URL to load spreadsheet data from. If both `loadUrl` and `sheets` are provided, `sheets` takes precedence. |
 | `loadFormat` | `FileFormat` | File format hint for `loadUrl`. Default: `"json"`. |
 
 ## Theme prop
 
+Controls the visual theme applied to the spreadsheet. Since `theme` is a runtime prop, the widget updates immediately when the value changes.
+
 | Prop | Type | Description |
 |------|------|-------------|
 | `theme` | [`SpreadsheetTheme`](/react/types#spreadsheettheme) | Color theme. Built-in values: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. Also accepts custom theme name strings. See [Themes](/react/themes/). |
 
 ## Container props
 
+Standard React DOM props applied to the wrapper `<div>` that contains the spreadsheet. Use them to control sizing and layout.
+
 | Prop | Type | Description |
 |------|------|-------------|
 | `className` | `string` | CSS class name appended to the wrapper `<div>`. |
@@ -86,6 +96,8 @@ Changing `styles` triggers a full data reload. Spreadsheet data is preserved, bu
 
 ### Sheets with cell data
 
+A full `SheetData` example with cells, row and column sizing, merged ranges, and a frozen header row.
+
 ~~~tsx
 const [sheets, setSheets] = useState<SheetData[]>([
     {
@@ -113,6 +125,8 @@ const [sheets, setSheets] = useState<SheetData[]>([
 
 ### Styles example
 
+Define named styles as CSS property maps in the `styles` prop, then reference them by name via `CellData.css`.
+
 ~~~tsx
 const styles = {
     header: {
@@ -140,12 +154,12 @@ const styles = {
 
 ### Multi-sheet mode
 
+Enable sheet tabs with `multiSheets={true}`. Pass `false` to hide the tab bar entirely.
+
 ~~~tsx
 <ReactSpreadsheet sheets={sheets} multiSheets={true} />
 ~~~
 
-To disable sheet tabs:
-
 ~~~tsx
 <ReactSpreadsheet sheets={sheets} multiSheets={false} />
 ~~~
@@ -175,6 +189,8 @@ To disable sheet tabs:
 
 ### Controlled search
 
+Pass a `SearchConfig` object to open the search bar programmatically. Use `onSearchResults` to receive the matching cell references.
+
 ~~~tsx
 const [search, setSearch] = useState<SearchConfig | undefined>();
 const [results, setResults] = useState<string[]>([]);
@@ -219,6 +235,8 @@ const [theme, setTheme] = useState<SpreadsheetTheme>("light");
 
 ### Locked cells
 
+Mark individual cells as non-editable with `locked: true`. Unlike `readonly`, this protects specific cells while leaving the rest of the sheet editable.
+
 ~~~tsx
 const sheets: SheetData[] = [
     {
@@ -236,6 +254,8 @@ const sheets: SheetData[] = [
 
 ### Cell validation
 
+Pass an array of strings to `CellData.validation` to restrict the cell to a dropdown of allowed values.
+
 ~~~tsx
 const sheets: SheetData[] = [
     {

docs/react/state/redux-toolkit.md

@@ -25,6 +25,8 @@ npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux
 
 ## Create the slice
 
+Define the spreadsheet state shape, initial data, and reducers in a Redux Toolkit slice.
+
 ~~~ts title="src/store/spreadsheetSlice.ts"
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 import type { SheetData } from "@dhtmlx/trial-react-spreadsheet";
@@ -79,6 +81,8 @@ export default spreadsheetSlice.reducer;
 
 ## Configure the store
 
+Register the slice in the Redux store and export the typed `RootState` and `AppDispatch` helpers.
+
 ~~~ts title="src/store/index.ts"
 import { configureStore } from "@reduxjs/toolkit";
 import spreadsheetReducer from "./spreadsheetSlice";
@@ -114,6 +118,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 
 ## Create the component
 
+Connect `ReactSpreadsheet` to the Redux store using `useSelector` for reading state and `useDispatch` to sync changes back after each user action.
+
 ~~~tsx title="src/App.tsx"
 import { useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";

docs/react/themes.md

@@ -6,6 +6,8 @@ description: "Apply built-in or custom themes to DHTMLX React Spreadsheet."
 
 # React Spreadsheet themes
 
+React Spreadsheet ships with four built-in themes and supports custom themes through CSS variables. Use the `theme` prop to select a built-in theme or apply one you have defined yourself.
+
 ## Built-in themes
 
 The [`SpreadsheetTheme`](/react/types#spreadsheettheme) type defines four built-in themes:
@@ -19,7 +21,7 @@ You can also pass a custom theme name as a string.
 
 ## Applying a theme
 
-Pass the `theme` prop to `ReactSpreadsheet`:
+Pass the `theme` prop to `ReactSpreadsheet` with the name of the theme you want to use:
 
 ~~~tsx
 <ReactSpreadsheet sheets={sheets} theme="dark" />

docs/react/types.md

@@ -227,6 +227,8 @@ Known spreadsheet action identifiers. Used in [`onBeforeAction`](/react/events/#
 
 ## Handler type aliases
 
+Convenience aliases for the function signatures used by event callback props. Import them to annotate your handler functions explicitly.
+
 <div className="overflow-table">
 
 | Type | Signature | Used by |