diff --git a/docs/angular_integration.md b/docs/angular_integration.md index 40b43e43..4a841f78 100644 --- a/docs/angular_integration.md +++ b/docs/angular_integration.md @@ -18,14 +18,14 @@ DHTMLX Spreadsheet is compatible with **Angular**. We have prepared code example Before you start to create a new project, install [**Angular CLI**](https://angular.dev/tools/cli) and [**Node.js**](https://nodejs.org/en/). ::: -Create a new **my-angular-spreadsheet-app** project using Angular CLI. Run the following command for this purpose: +Create a new *my-angular-spreadsheet-app* project using Angular CLI. Run the following command: ~~~json ng new my-angular-spreadsheet-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating a new Angular app. ::: The command above installs all the necessary tools, so you don't need to run any additional commands. @@ -45,25 +45,25 @@ yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create an Angular component, to add Spreadsheet into the application. Create the **spreadsheet** folder in the **src/app/** directory, add a new file into it and name it **spreadsheet.component.ts**. Then complete the steps described below. +Now you need to create an Angular component to add Spreadsheet into the application. Create the *spreadsheet* folder in the *src/app/* directory, add a new file into it and name it *spreadsheet.component.ts*. Then complete the steps described below. #### Importing source files Open the file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: ~~~jsx import { Spreadsheet } from 'dhx-spreadsheet-package'; @@ -111,7 +111,7 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { #### Adding styles -To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the **spreadsheet.component.css** file in the **src/app/spreadsheet/** directory and specify important styles for Spreadsheet and its container: +To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the *spreadsheet.component.css* file in the *src/app/spreadsheet/* directory and specify important styles for Spreadsheet and its container: ~~~css title="spreadsheet.component.css" /* import Spreadsheet styles */ @@ -133,7 +133,7 @@ body { #### Loading data -To add data into Spreadsheet, you need to provide a data set. You can create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.ts* file in the *src/app/spreadsheet/* directory and add some data into it: ~~~jsx title="data.ts" export function getData(): any { @@ -178,7 +178,7 @@ export function getData(): any { } ~~~ -Then open the ***spreadsheet.component.ts*** file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. +Then open the *spreadsheet.component.ts* file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. ~~~jsx {2,18,21} title="spreadsheet.component.ts" import { Spreadsheet } from "@dhx/trial-spreadsheet"; @@ -210,13 +210,13 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { } ~~~ -Now the Spreadsheet component is ready to use. When the element will be added to the page, it will initialize the Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. +Now the Spreadsheet component is ready to use. When the element is added to the page, it initializes Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. #### Handling events -When a user makes some action in the Spreadsheet, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +When a user performs an action in Spreadsheet, the widget invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). -Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in: +Open the *spreadsheet.component.ts* file and complete the `ngOnInit()` method as in: ~~~jsx {5-8} title="spreadsheet.component.ts" // ... @@ -236,7 +236,7 @@ ngOnDestroy() { ### Step 3. Adding Spreadsheet into the app -To add the ***SpreadsheetComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +To add the `SpreadsheetComponent` component into the app, open the *src/app/app.component.ts* file and replace the default code with the following one: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -250,7 +250,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *SpreadsheetComponent* as shown below: +Then create the *app.module.ts* file in the *src/app/* directory and specify the `SpreadsheetComponent` as shown below: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -267,7 +267,7 @@ import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +The last step is to open the *src/main.ts* file and replace the existing code with the following one: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -281,4 +281,4 @@ After that, you can start the app to see Spreadsheet loaded with data on a page. ![DHTMLX Spreadsheet initialized with sample data in an Angular application](/img/integrations/trial_spreadsheet.png) -Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). +Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. You can find the final example on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). diff --git a/docs/api/eventsbus_detach_method.md b/docs/api/eventsbus_detach_method.md index 4da0f011..edd3e5e8 100644 --- a/docs/api/eventsbus_detach_method.md +++ b/docs/api/eventsbus_detach_method.md @@ -8,7 +8,7 @@ description: You can learn about the detach events bus method in the documentati ### Description -@short: Detaches a handler from an event (which was attached before by the on() method) +@short: Detaches a handler from an event (previously attached with the `on()` method) ### Usage @@ -18,7 +18,7 @@ detach(name: string): void; ### Parameters -- `name` - (required) the name of event to detach +- `name` - (required) the name of the event to detach ### Example @@ -36,7 +36,7 @@ spreadsheet.events.detach("StyleChange"); ~~~ :::info -By default **detach()** removes all event handlers from the target event. You can detach particular event handlers by using the context marker. +By default, `detach()` removes all event handlers from the target event. You can detach particular event handlers using a context marker. ::: ~~~jsx diff --git a/docs/api/eventsbus_fire_method.md b/docs/api/eventsbus_fire_method.md index ecaccb80..570e3abe 100644 --- a/docs/api/eventsbus_fire_method.md +++ b/docs/api/eventsbus_fire_method.md @@ -27,7 +27,7 @@ fire(name: string, arguments: array): boolean; ### Returns -The method returns `false`, if some of the event handlers return `false`. Otherwise, `true` +The method returns `false` if some of the event handlers return `false`. Otherwise, `true` ### Example diff --git a/docs/api/eventsbus_on_method.md b/docs/api/eventsbus_on_method.md index 7d3abedd..8570d052 100644 --- a/docs/api/eventsbus_on_method.md +++ b/docs/api/eventsbus_on_method.md @@ -37,7 +37,7 @@ spreadsheet.events.on("StyleChange", function(id){ :::info See the full list of the Spreadsheet events [here](api/api_overview.md#spreadsheet-events). -You can attach several handlers to the same event and all of them will be executed. If some of handlers return *false*, the related operations will be blocked. Event handlers are processed in the same order that they are attached. +You can attach several handlers to the same event and all of them are executed. If some handlers return `false`, the related operations are blocked. Event handlers are processed in the same order that they are attached. ::: **Related articles:** [Event Handling](handling_events.md) diff --git a/docs/api/export_xlsx_method.md b/docs/api/export_xlsx_method.md index 8d5815de..c3310b06 100644 --- a/docs/api/export_xlsx_method.md +++ b/docs/api/export_xlsx_method.md @@ -36,11 +36,11 @@ spreadsheet.export.xlsx("MyData"); ~~~ :::note -Please note that the component supports export to Excel files with the **.xlsx** extension only. +Note that the component supports export to Excel files with the `.xlsx` extension only. ::: :::info -DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for export of data to Excel. [Check the details](loading_data.md#exporting-data). +DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. [Check the details](loading_data.md#exporting-data). ::: **Related articles:** [Data loading and export](loading_data.md) diff --git a/docs/api/overview/actions_overview.md b/docs/api/overview/actions_overview.md index 6377e0d4..3a7d2d88 100644 --- a/docs/api/overview/actions_overview.md +++ b/docs/api/overview/actions_overview.md @@ -6,9 +6,9 @@ description: You can check an Actions overview of the DHTMLX JavaScript Spreadsh # Actions overview -This section is dedicated to a new conception of interaction with Spreadsheet events. +This section describes a new approach to interacting with Spreadsheet events. -Starting from v4.3, DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action has been performed. +Starting from v4.3, DHTMLX Spreadsheet includes a pair of [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md) events that make your code simpler and more concise. They fire right before an action is executed and indicate exactly which action was performed. ~~~jsx spreadsheet.events.on("beforeAction", (actionName, config) => { @@ -29,9 +29,9 @@ spreadsheet.events.on("afterAction", (actionName, config) => { [The full list of the available actions is given below.](#list-of-actions) ->It means, that you don't have to constantly add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events anymore to track and handle the actions which you execute when changing something in the spreadsheet. +>This means that you no longer have to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events to track and handle the actions you execute when changing something in the spreadsheet. ->But if needed you can use an **old approach** because all the existing events will continue work as before: +>But if needed, you can use the **old approach**, because all the existing events continue to work as before: ~~~jsx spreadsheet.events.on("afterColumnAdd", function(cell){ console.log("A new column is added", cell); @@ -61,7 +61,7 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){ | **deleteSheet** | The action is executed when removing a sheet | | **filter** | The action is executed when filtering data in a sheet | | **fitColumn** | The action is executed when auto-fitting the width of the column | -| **groupAction** | The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, clear cells' value or styles, etc.) | +| **groupAction** | The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, or clear cells' value or styles) | | **insertLink** | The action is executed when inserting a hyperlink in a cell | | **lockCell** | The action is executed when locking/unlocking a cell | | **merge** | The action is executed when merging a range of cells | diff --git a/docs/api/selection_getfocusedcell_method.md b/docs/api/selection_getfocusedcell_method.md index 7e7c91ef..cd5e8245 100644 --- a/docs/api/selection_getfocusedcell_method.md +++ b/docs/api/selection_getfocusedcell_method.md @@ -18,7 +18,7 @@ getFocusedCell(): string; ### Returns -The method returns an id of a focused cell +The method returns the id of the focused cell ### Example diff --git a/docs/api/selection_getselectedcell_method.md b/docs/api/selection_getselectedcell_method.md index 392a4262..b0d3581a 100644 --- a/docs/api/selection_getselectedcell_method.md +++ b/docs/api/selection_getselectedcell_method.md @@ -18,7 +18,7 @@ getSelectedCell(): string; ### Returns -The method returns an id(s) or a range of selected cell(s) +The method returns the id(s) or a range of selected cell(s) ### Example diff --git a/docs/api/sheetmanager_add_method.md b/docs/api/sheetmanager_add_method.md index 3156c2ff..5747b1c8 100644 --- a/docs/api/sheetmanager_add_method.md +++ b/docs/api/sheetmanager_add_method.md @@ -10,10 +10,10 @@ description: You can learn about the add method of the Sheet Manager in the docu @short: Adds a new empty sheet to the spreadsheet and returns the unique identifier of the newly created sheet -If no name is provided, a default name will be generated automatically (e.g. "Sheet 2", "Sheet 3", etc.). +If no name is provided, a default name is generated automatically (for example, "Sheet 2" or "Sheet 3"). :::info -To apply this method, you need to enable the [multiSheets](api/spreadsheet_multisheets_config.md) configuration option. +To apply this method, you need to enable the [`multiSheets`](api/spreadsheet_multisheets_config.md) configuration option. ::: ### Usage @@ -24,11 +24,11 @@ add: (name?: string) => Id; ### Parameters -- `name` - (*string*) optional, the displayed name for the new sheet tab. If omitted, a default name is assigned. +- `name` - (`string`) optional, the displayed name for the new sheet tab. If omitted, a default name is assigned. ### Returns -- `Id` - (*string | number*) the unique identifier of the newly created sheet. +- `Id` - (`string | number`) the unique identifier of the newly created sheet. ### Example diff --git a/docs/api/sheetmanager_clear_method.md b/docs/api/sheetmanager_clear_method.md index f057d21b..461f31fd 100644 --- a/docs/api/sheetmanager_clear_method.md +++ b/docs/api/sheetmanager_clear_method.md @@ -20,7 +20,7 @@ clear: (id?: Id) => void; ### Parameters -- `id` - (*string | number*) optional, the unique identifier of the sheet to clear. If omitted, the currently active sheet is cleared. +- `id` - (`string | number`) optional, the unique identifier of the sheet to clear. If omitted, the currently active sheet is cleared. ### Example diff --git a/docs/api/sheetmanager_get_method.md b/docs/api/sheetmanager_get_method.md index 634a7de8..864950e2 100644 --- a/docs/api/sheetmanager_get_method.md +++ b/docs/api/sheetmanager_get_method.md @@ -18,11 +18,11 @@ get: (id: Id) => ISheet; ### Parameters -- `id` - (*string | number*) required, the unique identifier of the sheet to retrieve. +- `id` - (`string | number`) required, the unique identifier of the sheet to retrieve. ### Returns -- `ISheet` - (*object*) the sheet object matching the given id. +- `ISheet` - (`object`) the sheet object matching the given id. ### Example diff --git a/docs/api/sheetmanager_getactive_method.md b/docs/api/sheetmanager_getactive_method.md index 8728c176..135ac415 100644 --- a/docs/api/sheetmanager_getactive_method.md +++ b/docs/api/sheetmanager_getactive_method.md @@ -18,7 +18,7 @@ getActive: () => ISheet; ### Returns -- `ISheet` - (*object*) the currently active sheet object with the `id` and `name` properties. +- `ISheet` - (`object`) the currently active sheet object with the `id` and `name` properties. ### Example diff --git a/docs/api/sheetmanager_getall_method.md b/docs/api/sheetmanager_getall_method.md index a45438bb..8f062438 100644 --- a/docs/api/sheetmanager_getall_method.md +++ b/docs/api/sheetmanager_getall_method.md @@ -22,7 +22,7 @@ getAll: () => ISheet[]; ### Returns -- `ISheet[]` - (*array*) an array of sheet objects. +- `ISheet[]` - (`array`) an array of sheet objects. ### Example diff --git a/docs/api/sheetmanager_remove_method.md b/docs/api/sheetmanager_remove_method.md index 499a03dc..3a20d7db 100644 --- a/docs/api/sheetmanager_remove_method.md +++ b/docs/api/sheetmanager_remove_method.md @@ -10,12 +10,12 @@ description: You can learn about the remove method of the Sheet Manager in the d @short: Removes a sheet from the spreadsheet by its identifier -If the removed sheet was active, the spreadsheet will automatically switch to another available sheet. +If the removed sheet was active, the spreadsheet automatically switches to another available sheet. :::info -To apply this method, you need to enable the [multiSheets](api/spreadsheet_multisheets_config.md) configuration option. +To apply this method, you need to enable the [`multiSheets`](api/spreadsheet_multisheets_config.md) configuration option. -Also note, that a sheet won't be deleted if the number of sheets in the spreadsheet is less than 2. +Also note that a sheet is not deleted if the spreadsheet has fewer than 2 sheets. ::: ### Usage @@ -26,7 +26,7 @@ remove: (id: Id) => void; ### Parameters -- `id` - (*string | number*) required, the unique identifier of the sheet to remove. +- `id` - (`string | number`) required, the unique identifier of the sheet to remove. ### Example diff --git a/docs/api/sheetmanager_setactive_method.md b/docs/api/sheetmanager_setactive_method.md index 0136af7b..b758f615 100644 --- a/docs/api/sheetmanager_setactive_method.md +++ b/docs/api/sheetmanager_setactive_method.md @@ -10,7 +10,7 @@ description: You can learn about the setActive method of the Sheet Manager in th @short: Switches the active (visible) sheet to the one specified by its identifier -The spreadsheet UI will re-render to display the target sheet's contents. +The spreadsheet UI re-renders to display the target sheet's contents. ### Usage @@ -20,7 +20,7 @@ setActive: (id: Id) => void; ### Parameters -- `id` - (*string | number*) required, the unique identifier of the sheet to activate. +- `id` - (`string | number`) required, the unique identifier of the sheet to activate. ### Example diff --git a/docs/api/spreadsheet_addformula_method.md b/docs/api/spreadsheet_addformula_method.md index b689c852..29322eac 100644 --- a/docs/api/spreadsheet_addformula_method.md +++ b/docs/api/spreadsheet_addformula_method.md @@ -10,7 +10,7 @@ description: You can learn about the addFormula method in the documentation of t @short: Registers a custom formula function that can be used in cell formulas -Once registered, the formula is available in any cell by its uppercase name (e.g. =MYFUNC(A1, B2)). +Once registered, the formula is available in any cell by its uppercase name (for example, `=MYFUNC(A1, B2)`). ### Usage @@ -24,8 +24,8 @@ addFormula: (name: string, handler: mathFunction) => void; ### Parameters -- `name` - (*string*) required, the formula name (case-insensitive, stored as uppercase) -- `handler` - (*function*) required, a callback function that processes the input arguments (strings, numbers, booleans, or arrays of these) and returns a single value +- `name` - (`string`) required, the formula name (case-insensitive, stored as uppercase) +- `handler` - (`function`) required, a callback function that processes the input arguments (strings, numbers, booleans, or arrays of these) and returns a single value :::note The `handler` callback function must be synchronous. Using `Promise` or `fetch` inside the function is not allowed. diff --git a/docs/api/spreadsheet_afterclear_event.md b/docs/api/spreadsheet_afterclear_event.md index 3b01eac0..5ad30f71 100644 --- a/docs/api/spreadsheet_afterclear_event.md +++ b/docs/api/spreadsheet_afterclear_event.md @@ -7,7 +7,7 @@ description: You can learn about the afterClear event in the documentation of th # afterClear :::caution -The **afterClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach: +The `afterClear` event was deprecated in v4.3. It still works, but you should apply the new approach: ~~~jsx spreadsheet.events.on("afterAction", (actionName, config) => { diff --git a/docs/api/spreadsheet_afterdataloaded_event.md b/docs/api/spreadsheet_afterdataloaded_event.md index a6e57142..78af3ccc 100644 --- a/docs/api/spreadsheet_afterdataloaded_event.md +++ b/docs/api/spreadsheet_afterdataloaded_event.md @@ -8,7 +8,7 @@ description: You can learn about the afterDataLoaded event in the documentation ### Description -@short: Fires after data loading has been completed +@short: Fires after data loading completes ### Usage diff --git a/docs/api/spreadsheet_aftereditstart_event.md b/docs/api/spreadsheet_aftereditstart_event.md index d55ce6c5..b0715df4 100644 --- a/docs/api/spreadsheet_aftereditstart_event.md +++ b/docs/api/spreadsheet_aftereditstart_event.md @@ -8,7 +8,7 @@ description: You can learn about the afterEditStart event in the documentation o ### Description -@short: Fires after editing of a cell has started +@short: Fires after editing of a cell starts ### Usage diff --git a/docs/api/spreadsheet_beforeclear_event.md b/docs/api/spreadsheet_beforeclear_event.md index 56a1ef1a..cb322e97 100644 --- a/docs/api/spreadsheet_beforeclear_event.md +++ b/docs/api/spreadsheet_beforeclear_event.md @@ -7,7 +7,7 @@ description: You can learn about the beforeClear event in the documentation of t # beforeClear :::caution -The **beforeClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach: +The `beforeClear` event was deprecated in v4.3. It still works, but you should apply the new approach: ~~~jsx spreadsheet.events.on("beforeAction", (actionName, config) => { diff --git a/docs/api/spreadsheet_beforeeditstart_event.md b/docs/api/spreadsheet_beforeeditstart_event.md index f23c5210..d4847e63 100644 --- a/docs/api/spreadsheet_beforeeditstart_event.md +++ b/docs/api/spreadsheet_beforeeditstart_event.md @@ -8,7 +8,7 @@ description: You can learn about the beforeEditStart event in the documentation ### Description -@short: Fires before editing of a cell has started +@short: Fires before editing of a cell starts ### Usage diff --git a/docs/api/spreadsheet_colscount_config.md b/docs/api/spreadsheet_colscount_config.md index f006171a..a8a6db31 100644 --- a/docs/api/spreadsheet_colscount_config.md +++ b/docs/api/spreadsheet_colscount_config.md @@ -8,7 +8,7 @@ description: You can learn about the colsCount config in the documentation of th ### Description -@short: Optional. Sets the number of columns a spreadsheet will have on initialization +@short: Optional. Sets the number of columns in a spreadsheet on initialization ### Usage diff --git a/docs/api/spreadsheet_deletecolumn_method.md b/docs/api/spreadsheet_deletecolumn_method.md index c230d18b..e6259724 100644 --- a/docs/api/spreadsheet_deletecolumn_method.md +++ b/docs/api/spreadsheet_deletecolumn_method.md @@ -35,7 +35,7 @@ spreadsheet.deleteColumn("G2"); ~~~ :::note -You can delete several columns by providing a range of cells' ids as a parameter of the method, e.g.: "A1:C3". +You can delete several columns by providing a range of cells' ids as a parameter of the method, for example: "A1:C3". ::: **Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_deleterow_method.md b/docs/api/spreadsheet_deleterow_method.md index 229eed9d..fd979df9 100644 --- a/docs/api/spreadsheet_deleterow_method.md +++ b/docs/api/spreadsheet_deleterow_method.md @@ -35,7 +35,7 @@ spreadsheet.deleteRow("G2"); ~~~ :::note -You can delete several rows by providing a range of cells' ids as a parameter of the method, e.g.: "A1:C3". +You can delete several rows by providing a range of cells' ids as a parameter of the method, for example: "A1:C3". ::: **Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_endedit_method.md b/docs/api/spreadsheet_endedit_method.md index afcbcec3..1a3d769d 100644 --- a/docs/api/spreadsheet_endedit_method.md +++ b/docs/api/spreadsheet_endedit_method.md @@ -8,7 +8,7 @@ description: You can learn about the endEdit method in the documentation of the ### Description -@short: Finishes editing in the selected cell, closes editor and saves the entered value +@short: Finishes editing in the selected cell, closes the editor, and saves the entered value ### Usage diff --git a/docs/api/spreadsheet_exportmodulepath_config.md b/docs/api/spreadsheet_exportmodulepath_config.md index f339213d..83c8c06e 100644 --- a/docs/api/spreadsheet_exportmodulepath_config.md +++ b/docs/api/spreadsheet_exportmodulepath_config.md @@ -28,10 +28,10 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Details :::note -DHTMLX Spreadsheet uses the WebAssembly-based library [JSON2Excel](https://github.com/dhtmlx/json2excel) for export of data into Excel. +DHTMLX Spreadsheet uses the WebAssembly-based library [JSON2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. ::: -To export files you need to set the path to the **worker.js** file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where export will be processed) via the **exportModulePath** option. By default, `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx` is used. +To export files, you need to set the path to the *worker.js* file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where the export is processed) with the `exportModulePath` option. By default, `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx` is used. - if you use the public export server, you don't need to specify the link to it, since it is used by default - if you use your own export server, you need to: - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library diff --git a/docs/api/spreadsheet_fitcolumn_method.md b/docs/api/spreadsheet_fitcolumn_method.md index ba4d0d33..c8658db6 100644 --- a/docs/api/spreadsheet_fitcolumn_method.md +++ b/docs/api/spreadsheet_fitcolumn_method.md @@ -8,7 +8,7 @@ description: You can learn about the fitColumn method in the documentation of th ### Description -@short: adjusts the width of the column to match the longest value in the column +@short: Adjusts the width of the column to match its longest value ### Usage diff --git a/docs/api/spreadsheet_formats_config.md b/docs/api/spreadsheet_formats_config.md index 83098626..e1420a4c 100644 --- a/docs/api/spreadsheet_formats_config.md +++ b/docs/api/spreadsheet_formats_config.md @@ -18,12 +18,12 @@ formats?: array; ### Parameters -The **formats** property is an array of number format objects, each of which includes a set of properties: +The `formats` property is an array of number format objects, each of which includes a set of properties: -- **id** - the id of a format that is used to set format to a cell via the [](api/spreadsheet_setformat_method.md) method -- **mask** - a mask for a number format -- **name** - the name of a format displayed in the toolbar and menu drop-down lists -- **example** - an example that shows how a formatted number looks like. The number 2702.31 is used as a default value for format examples +- `id` - the id of a format used to set a format for a cell with the [](api/spreadsheet_setformat_method.md) method +- `mask` - a mask for a number format +- `name` - the name of a format displayed in the toolbar and menu drop-down lists +- `example` - an example that shows what a formatted number looks like. The number 2702.31 is used as a default value for format examples ### Default config diff --git a/docs/api/spreadsheet_freezecols_method.md b/docs/api/spreadsheet_freezecols_method.md index 7c34a912..146edfea 100644 --- a/docs/api/spreadsheet_freezecols_method.md +++ b/docs/api/spreadsheet_freezecols_method.md @@ -18,7 +18,7 @@ freezeCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_freezerows_method.md b/docs/api/spreadsheet_freezerows_method.md index a4ef9116..27bf8aa8 100644 --- a/docs/api/spreadsheet_freezerows_method.md +++ b/docs/api/spreadsheet_freezerows_method.md @@ -18,7 +18,7 @@ freezeRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_getformat_method.md b/docs/api/spreadsheet_getformat_method.md index 81771683..c7a07e6e 100644 --- a/docs/api/spreadsheet_getformat_method.md +++ b/docs/api/spreadsheet_getformat_method.md @@ -22,7 +22,7 @@ getFormat(cell: string): string | array; ### Returns -The method returns a format(s) applied to the value of the cell(s) +The method returns the format(s) applied to the value of the cell(s) ### Example @@ -42,9 +42,9 @@ Starting with v4.1, the reference to a cell can be specified in the following fo const cellFormat = spreadsheet.getFormat("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the format applied to the value of a cell from the tab that is currently active. +If the name of the tab isn't specified, the method returns the format applied to the value of a cell from the currently active tab. ::: **Related articles:** [Number formatting](number_formatting.md) diff --git a/docs/api/spreadsheet_getformula_method.md b/docs/api/spreadsheet_getformula_method.md index c000f025..560eca9a 100644 --- a/docs/api/spreadsheet_getformula_method.md +++ b/docs/api/spreadsheet_getformula_method.md @@ -22,7 +22,7 @@ getFormula(cell: string): string | array; ### Returns -The method returns a formula of the cell +The method returns the formula of the cell ### Example @@ -42,9 +42,9 @@ The reference to a cell can be specified in the following format: const formula = spreadsheet.getFormula("sheet1!B2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the formula of the cell from the active tab. +If the name of the tab isn't specified, the method returns the formula of the cell from the active tab. ::: **Change log:** Added in v4.1 diff --git a/docs/api/spreadsheet_getstyle_method.md b/docs/api/spreadsheet_getstyle_method.md index e678e55d..37c5fd9a 100644 --- a/docs/api/spreadsheet_getstyle_method.md +++ b/docs/api/spreadsheet_getstyle_method.md @@ -42,7 +42,7 @@ const values = spreadsheet.getStyle("A1,B1,C1:C3"); ~~~ :::info -For multiple cells the method returns an array of objects with styles applied to a cell: +For multiple cells, the method returns an array of objects with the styles applied to each cell: ~~~jsx [ @@ -62,7 +62,7 @@ const style = spreadsheet.getStyle("sheet1!A2"); //-> {justify-content: "flex-end", text-align: "right"} ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the style(s) of the cell(s) from the active tab. +If the name of the tab isn't specified, the method returns the style(s) of the cell(s) from the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_getvalue_method.md b/docs/api/spreadsheet_getvalue_method.md index 9c6adcad..4ffa8863 100644 --- a/docs/api/spreadsheet_getvalue_method.md +++ b/docs/api/spreadsheet_getvalue_method.md @@ -22,7 +22,7 @@ getValue(cell: string): any | array; ### Returns -The method returns values of cells +The method returns the values of the cells ### Example @@ -48,7 +48,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000 ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the value(s) of the cell(s) from the active tab. +If the name of the tab isn't specified, the method returns the value(s) of the cell(s) from the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_groupfill_event.md b/docs/api/spreadsheet_groupfill_event.md index 87213521..d9c34b2b 100644 --- a/docs/api/spreadsheet_groupfill_event.md +++ b/docs/api/spreadsheet_groupfill_event.md @@ -21,7 +21,7 @@ groupFill: (focusedCell: string, selectedCell: string) => void; The callback of the event takes the following parameters: - `focusedCell` - (required) the id of a cell in focus -- `selectedCell` - (required) the ids of a selected cells +- `selectedCell` - (required) the ids of the selected cells ### Example diff --git a/docs/api/spreadsheet_hidecols_method.md b/docs/api/spreadsheet_hidecols_method.md index edf46cf4..9ecf77fe 100644 --- a/docs/api/spreadsheet_hidecols_method.md +++ b/docs/api/spreadsheet_hidecols_method.md @@ -18,7 +18,7 @@ hideCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_hiderows_method.md b/docs/api/spreadsheet_hiderows_method.md index 62223315..909be851 100644 --- a/docs/api/spreadsheet_hiderows_method.md +++ b/docs/api/spreadsheet_hiderows_method.md @@ -18,7 +18,7 @@ hideRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_hidesearch_method.md b/docs/api/spreadsheet_hidesearch_method.md index d319c859..de4bc8b7 100644 --- a/docs/api/spreadsheet_hidesearch_method.md +++ b/docs/api/spreadsheet_hidesearch_method.md @@ -8,7 +8,7 @@ description: You can learn about the hideSearch method in the documentation of t ### Description -@short: hides the search bar +@short: Hides the search bar ### Usage diff --git a/docs/api/spreadsheet_importmodulepath_config.md b/docs/api/spreadsheet_importmodulepath_config.md index 4324b338..e31df0d7 100644 --- a/docs/api/spreadsheet_importmodulepath_config.md +++ b/docs/api/spreadsheet_importmodulepath_config.md @@ -28,17 +28,17 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Details :::note -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2json](https://github.com/DHTMLX/excel2json) for import of data from Excel. +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2json](https://github.com/DHTMLX/excel2json) to import data from Excel. ::: -To import files you need to: +To import files, you need to: - install the **Excel2json** library -- set the path to the **worker.js** file via the **importModulePath** option in one of the two ways: - - by providing a local path to the file on your computer, like: **"../libs/excel2json/1.0/worker.js"** - - by providing a link to the file from CDN: "**https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js**" +- set the path to the *worker.js* file with the `importModulePath` option in one of two ways: + - by providing a local path to the file on your computer, like: `"../libs/excel2json/1.0/worker.js"` + - by providing a link to the file from CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` -By default the link to CDN is used. +By default, the link to CDN is used. **Related articles:** [Data loading and export](loading_data.md#loading-excel-file-xlsx) diff --git a/docs/api/spreadsheet_insertlink_method.md b/docs/api/spreadsheet_insertlink_method.md index 86e9a942..33f05e4e 100644 --- a/docs/api/spreadsheet_insertlink_method.md +++ b/docs/api/spreadsheet_insertlink_method.md @@ -8,7 +8,7 @@ description: You can learn about the insertLink method in the documentation of t ### Description -@short: inserts/removes a hyperlink in a cell +@short: Inserts/removes a hyperlink in a cell ### Usage diff --git a/docs/api/spreadsheet_islocked_method.md b/docs/api/spreadsheet_islocked_method.md index a4bd14d6..7348ae94 100644 --- a/docs/api/spreadsheet_islocked_method.md +++ b/docs/api/spreadsheet_islocked_method.md @@ -22,7 +22,7 @@ isLocked(cell: string): boolean; ### Returns -The method returns `true`, if the cell is locked, and `false` if it's unlocked +The method returns `true` if the cell is locked and `false` if it's unlocked ### Example @@ -41,7 +41,7 @@ const cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); ~~~ :::info -If several cells are checked at once, the method will return *true*, if there is at least one locked cell among the specified cells. +If several cells are checked at once, the method returns `true` if there is at least one locked cell among the specified cells. ::: :::info @@ -51,7 +51,7 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified const cellsLocked = spreadsheet.isLocked("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will check the cell(s) of the active tab. +If the name of the tab isn't specified, the method checks the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_load_method.md b/docs/api/spreadsheet_load_method.md index 2b59ea65..6262d6ec 100644 --- a/docs/api/spreadsheet_load_method.md +++ b/docs/api/spreadsheet_load_method.md @@ -49,7 +49,7 @@ spreadsheet.load("../common/data.xlsx", "xlsx"); - [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828) :::info -The component will make an AJAX call and expect the remote URL to provide valid data. +The component makes an AJAX call and expects the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: @@ -63,14 +63,14 @@ spreadsheet.load("../some/data.json").then(function(){ ### Loading Excel data :::note -Please note that the component supports import from Excel files with the **.xlsx** extension only. +Note that the component supports import from Excel files with the `.xlsx` extension only. ::: -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) for import of data from Excel. [Check the details](loading_data.md#loading-excel-file-xlsx). +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) to import data from Excel. [Check the details](loading_data.md#loading-excel-file-xlsx). ### Loading JSON files -It is possible to allow end users to load a JSON file into the spreadsheet via the File Explorer. To do that: +You can let users load a JSON file into the spreadsheet through the File Explorer. To do that: - Specify a button to open the File Explorer where ".json" files can be selected: @@ -81,7 +81,7 @@ It is possible to allow end users to load a JSON file into the spreadsheet via t ~~~ -- Call the **load()** method with two parameters: an empty string as an URL and the type of data to load ("json"): +- Call the `load()` method with two parameters: an empty string as a URL and the type of data to load ("json"): ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet", { diff --git a/docs/api/spreadsheet_localization_config.md b/docs/api/spreadsheet_localization_config.md index 8a2c811d..7b43b1f2 100644 --- a/docs/api/spreadsheet_localization_config.md +++ b/docs/api/spreadsheet_localization_config.md @@ -18,13 +18,13 @@ localization?: object; ### Parameters -The **localization** object may contain the following properties: +The `localization` object may contain the following properties: -- **decimal** - (optional) the symbol used as a decimal separator, **"."** by default.
Possible values are `"." | ","` -- **thousands** - (optional) the symbol used as a thousands separator, **","** by default.
Possible values are `"." | "," | " " | ""` -- **currency** - (optional) the currency sign, **"$"** by default -- **dateFormat** - (optional) the format of displaying dates set as a string. The default format is **"%d/%m/%Y"**. Check details [below](#characters-for-setting-date-format) -- **timeFormat** - (optional) the format of displaying time set as either *12* or *24*. The default format is **12** +- `decimal` - (optional) the symbol used as a decimal separator, `"."` by default.
Possible values are `"." | ","` +- `thousands` - (optional) the symbol used as a thousands separator, `","` by default.
Possible values are `"." | "," | " " | ""` +- `currency` - (optional) the currency sign, `"$"` by default +- `dateFormat` - (optional) the format of displaying dates set as a string. The default format is `"%d/%m/%Y"`. Check details [below](#characters-for-setting-date-format) +- `timeFormat` - (optional) the format of displaying time set as either `12` or `24`. The default format is `12` ### Default config diff --git a/docs/api/spreadsheet_lock_method.md b/docs/api/spreadsheet_lock_method.md index d32f7dd0..a4a80df4 100644 --- a/docs/api/spreadsheet_lock_method.md +++ b/docs/api/spreadsheet_lock_method.md @@ -43,9 +43,9 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified spreadsheet.lock("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will lock the cell(s) of the active tab. +If the name of the tab isn't specified, the method locks the cell(s) of the active tab. ::: **Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8) \ No newline at end of file diff --git a/docs/api/spreadsheet_mergecells_method.md b/docs/api/spreadsheet_mergecells_method.md index 886bbe92..f41e5f62 100644 --- a/docs/api/spreadsheet_mergecells_method.md +++ b/docs/api/spreadsheet_mergecells_method.md @@ -8,7 +8,7 @@ description: You can learn about the mergeCells method in the documentation of t ### Description -@short: merges a range of cells into one or splits merged cells +@short: Merges a range of cells into one or splits merged cells ### Usage diff --git a/docs/api/spreadsheet_multisheets_config.md b/docs/api/spreadsheet_multisheets_config.md index 9113c66e..3fad9e53 100644 --- a/docs/api/spreadsheet_multisheets_config.md +++ b/docs/api/spreadsheet_multisheets_config.md @@ -32,7 +32,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ~~~ :::info -Setting the property to ***false*** will hide the bottom tabbar with sheet tabs. +Setting the property to `false` hides the bottom tabbar with sheet tabs. ::: **Change log:** Added in v4.1 diff --git a/docs/api/spreadsheet_parse_method.md b/docs/api/spreadsheet_parse_method.md index d444f980..0fc914ab 100644 --- a/docs/api/spreadsheet_parse_method.md +++ b/docs/api/spreadsheet_parse_method.md @@ -92,14 +92,14 @@ parse({ If you need to create a data set *for one sheet* only, specify data as an **array of cell objects**. For each **cell** object you can specify the following parameters: -- `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. A1 +- `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", for example, A1 - `value` - (required) the value of a cell - `css` - (optional) the name of the CSS class - `format` - (optional) the name of the [default number format](number_formatting.md#default-number-formats) or of a [custom format](number_formatting.md#formats-customization) that you've added to apply to the cell value - `editor` - (optional) an object with configuration settings for the editor of a cell: - `type` - (required) the type of the cell editor: "select" - `options` - (required) either a range of cells ("A1:B8") or an array of string values -- `locked` - (optional) defines whether a cell is locked, *false* by default +- `locked` - (optional) defines whether a cell is locked, `false` by default - `link` - (optional) an object with configuration settings for the link added into a cell: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -112,20 +112,20 @@ If you need to create a data set *for several sheets* at once, specify data as a - `name` - (optional) the sheet name - `id` - (optional) the sheet id - `rows` - (optional) an array of objects with rows configurations. Each object may contain the following properties: - - `height` - (optional) the row height. If not specified, rows will have the height of 32px + - `height` - (optional) the row height. If not specified, rows have a height of 32px - `hidden` - (optional) defines the visibility of a row - `cols` - (optional) an array of objects with columns configurations. Each object may contain the following properties: - - `width` - (optional) the column width. If not specified, columns will have the width of 120px + - `width` - (optional) the column width. If not specified, columns have a width of 120px - `hidden` - (optional) defines the visibility of a column - `data` - (required) an array of **cell** objects. Each object has the following properties: - - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. A1 + - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", for example, A1 - `value` - (required) the value of a cell - `css` - (optional) the name of the CSS class - `format` - (optional) the name of the [default number format](number_formatting.md#default-number-formats) or of a [custom format](number_formatting.md#formats-customization) that you've added to apply to the cell value - `editor` - (optional) an object with configuration settings for the editor of a cell: - `type` - (required) the type of the cell editor: "select" - `options` - (required) either a range of cells ("A1:B8") or an array of string values - - `locked` - (optional) defines whether a cell is locked, *false* by default + - `locked` - (optional) defines whether a cell is locked, `false` by default - `link` - (optional) an object with configuration settings for the link added into a cell: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -137,11 +137,11 @@ If you need to create a data set *for several sheets* at once, specify data as a - `column` - the index of the column - `row` - the index of the row - `freeze` - (optional) an object that sets and adjusts fixed columns/rows for particular sheets. It may contain the following properties: - - `col` - (optional) specifies the number of fixed columns (e.g. 2), *0* by default - - `row` - (optional) specifies the number of fixed rows, (e.g. 2), *0* by default + - `col` - (optional) specifies the number of fixed columns (for example, 2), `0` by default + - `row` - (optional) specifies the number of fixed rows (for example, 2), `0` by default :::info -In case the [`multisheets`](api/spreadsheet_multisheets_config.md) configuration option is set to *false*, only one sheet will be created. +If the [`multisheets`](api/spreadsheet_multisheets_config.md) configuration option is set to `false`, only one sheet is created. ::: ### Example @@ -218,7 +218,7 @@ spreadsheet.parse(data); ## Parsing styled data -You may also add specific styles for cells while preparing a data set. For that, you need to define data as an object which will include two parameters: +You can also add specific styles for cells while preparing a data set. To do this, define data as an object with two parameters: - `styles` - (required) an object with CSS classes to be applied to particular cells. [Check the details below](#list-of-properties) - `data` - (required) the data to load @@ -251,41 +251,41 @@ spreadsheet.parse(styledData); ~~~ :::info -A CSS class is set for a cell via the **css** property. +Set a CSS class for a cell with the `css` property. ::: ### List of properties -The list of properties you can specify in the **styles** object: +The list of properties you can specify in the `styles` object: -- *background* -- *color* -- *textAlign* -- *verticalAlign* -- *textDecoration* -- *fontWeight* -- *fontStyle* -- *multiline: "wrap"* (from v5.0.3) -- *border*, *border-right*, *border-left*, *border-top*, *border-bottom* (from v5.2) +- `background` +- `color` +- `textAlign` +- `verticalAlign` +- `textDecoration` +- `fontWeight` +- `fontStyle` +- `multiline: "wrap"` (from v5.0.3) +- `border`, `border-right`, `border-left`, `border-top`, `border-bottom` (from v5.2) :::note You may also use the following properties if needed: -- *fontSize* -- *font* -- *fontFamily* -- *textShadow* +- `fontSize` +- `font` +- `fontFamily` +- `textShadow` -but in some cases they may not work in the way you expect (for example, when applying *position:absolute*, *display: box*, etc. ) +but in some cases they may not work as you expect (for example, when applying `position: absolute` or `display: box`) ::: **Change log:** -- The **freeze** property and the **hidden** parameter for the **rows** and **cols** properties of the **sheets** object were added in v5.2 -- The **locked** and **link** properties of the **cell** object were added in v5.1 -- The **merged** property of the **sheets** object was added in v5.0 -- The **editor** property of the **cell** object was added in v4.3 -- The **rows** and **cols** properties of the **sheets** object were added in v4.2 +- The `freeze` property and the `hidden` parameter for the `rows` and `cols` properties of the `sheets` object were added in v5.2 +- The `locked` and `link` properties of the `cell` object were added in v5.1 +- The `merged` property of the `sheets` object was added in v5.0 +- The `editor` property of the `cell` object was added in v4.3 +- The `rows` and `cols` properties of the `sheets` object were added in v4.2 - The ability to prepare data for several sheets was added in v4.1 **Related articles:** [Data loading and export](loading_data.md) diff --git a/docs/api/spreadsheet_readonly_config.md b/docs/api/spreadsheet_readonly_config.md index 36315504..ac4039d4 100644 --- a/docs/api/spreadsheet_readonly_config.md +++ b/docs/api/spreadsheet_readonly_config.md @@ -8,7 +8,7 @@ description: You can learn about the readonly config in the documentation of the ### Description -@short: Optional. Enables/disables the readonly mode +@short: Optional. Enables/disables the read-only mode ### Usage diff --git a/docs/api/spreadsheet_rowscount_config.md b/docs/api/spreadsheet_rowscount_config.md index c21cb7a0..de97c0ea 100644 --- a/docs/api/spreadsheet_rowscount_config.md +++ b/docs/api/spreadsheet_rowscount_config.md @@ -8,7 +8,7 @@ description: You can learn about the rowsCount config in the documentation of th ### Description -@short: Optional. Sets the number of rows a spreadsheet will have on initialization +@short: Optional. Sets the number of rows in a spreadsheet on initialization ### Usage diff --git a/docs/api/spreadsheet_search_method.md b/docs/api/spreadsheet_search_method.md index ad16565d..96003a21 100644 --- a/docs/api/spreadsheet_search_method.md +++ b/docs/api/spreadsheet_search_method.md @@ -8,7 +8,7 @@ description: You can learn about the search method in the documentation of the D ### Description -@short: searches for cells by the specified parameters +@short: Searches for cells by the specified parameters The method can also open a search box in the top right corner of the spreadsheet and highlight the matched results @@ -24,7 +24,7 @@ search( ### Parameters -- `text` - (optional) the value to search +- `text` - (optional) the value to search for - `openSearch` - (optional) if `true`, opens a search box and highlights cells with the matched results; `false` by default - `sheetId` - (optional) the ID of the sheet. By default, the method searches for cells on the currently active sheet diff --git a/docs/api/spreadsheet_serialize_method.md b/docs/api/spreadsheet_serialize_method.md index 6736dfed..cb497be5 100644 --- a/docs/api/spreadsheet_serialize_method.md +++ b/docs/api/spreadsheet_serialize_method.md @@ -8,7 +8,7 @@ description: You can learn about the serialize method in the documentation of th ### Description -@short: Serializes data of spreadsheet into a JSON object +@short: Serializes the spreadsheet data into a JSON object ### Usage @@ -20,15 +20,15 @@ serialize(): object; The method returns a serialized JSON object -Serialized data presents an object with the following attributes: +The serialized data is an object with the following attributes: -- **formats** - an array of objects with number formats -- **styles** - an object with the applied CSS classes -- **sheets** - an array of sheet objects. Each object contains the following attributes: - - **name** - the sheet name - - **data** - an array of data objects - - **rows** - an array of height objects - - **cols** - an array of width objects +- `formats` - an array of objects with number formats +- `styles` - an object with the applied CSS classes +- `sheets` - an array of sheet objects. Each object contains the following attributes: + - `name` - the sheet name + - `data` - an array of data objects + - `rows` - an array of height objects + - `cols` - an array of width objects ### Example diff --git a/docs/api/spreadsheet_setfilter_method.md b/docs/api/spreadsheet_setfilter_method.md index 5d2a66c1..d701c06c 100644 --- a/docs/api/spreadsheet_setfilter_method.md +++ b/docs/api/spreadsheet_setfilter_method.md @@ -30,12 +30,12 @@ setFilter( ### Parameters -- `cell` - (optional) the id of a cell (or a range of cells) that contains the id of a column the values of which will be filtered (e.g., "A1", "A1:C10", "sheet2!A1" ) +- `cell` - (optional) the id of a cell (or a range of cells) that contains the id of a column whose values are filtered (for example, "A1", "A1:C10", or "sheet2!A1") - `rules` - (optional) an array of objects with rules for filtering. Each object can include the following parameters: - `condition` - (optional) an object with parameters for conditional filtering of a sheet: - - `factor` - (required) a string value which defines a comparison expression for filtering. See the list of available values [below](#list-of-factors) + - `factor` - (required) a string value that defines a comparison expression for filtering. See the list of available values [below](#list-of-factors) - `value` - (required) the value(s) to be used for filtering by the specified factor - - `exclude` - (optional) an array of data points which must be excluded from the sheet + - `exclude` - (optional) an array of data points that must be excluded from the sheet :::note To reset filtering, call the method without parameters or pass only the `cell` parameter to the method. diff --git a/docs/api/spreadsheet_setformat_method.md b/docs/api/spreadsheet_setformat_method.md index 74d4840c..ce493a81 100644 --- a/docs/api/spreadsheet_setformat_method.md +++ b/docs/api/spreadsheet_setformat_method.md @@ -19,7 +19,7 @@ setFormat(cell: string, format: string | array): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `format` - (required) the name(s) of the number format to apply to cells value +- `format` - (required) the name(s) of the number format to apply to the cell value ### Example @@ -38,9 +38,9 @@ Starting with v4.1, the reference to a cell can be specified in the following fo spreadsheet.setFormat("sheet1!A2", "number"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will set the format to the value of a cell of the active tab. +If the name of the tab isn't specified, the method sets the format to the value of a cell of the active tab. ::: **Related articles:** [Number formatting](number_formatting.md) diff --git a/docs/api/spreadsheet_setstyle_method.md b/docs/api/spreadsheet_setstyle_method.md index 107ff591..deca0e98 100644 --- a/docs/api/spreadsheet_setstyle_method.md +++ b/docs/api/spreadsheet_setstyle_method.md @@ -11,7 +11,7 @@ description: You can learn about the setStyle method in the documentation of the @short: Sets style to a cell(s) :::info -The method allows setting the same style for the specified cells. In case you want to apply different cells to spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method. +The method sets the same style for the specified cells. If you want to apply different styles to spreadsheet cells, use the [](api/spreadsheet_parse_method.md) method. ::: ### Usage @@ -23,7 +23,7 @@ setStyle(cell: string, styles: array | object): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `styles` - (required) styles that should be applied to cells. [Check the list of properties which you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) +- `styles` - (required) the styles to apply to cells. [Check the list of properties that you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) ### Example @@ -53,7 +53,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i spreadsheet.setStyle("sheet1!A2", {background: "red"}); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will apply the style to the cell(s) of the active tab. +If the name of the tab isn't specified, the method applies the style to the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_setvalidation_method.md b/docs/api/spreadsheet_setvalidation_method.md index 5e2826b5..409039bf 100644 --- a/docs/api/spreadsheet_setvalidation_method.md +++ b/docs/api/spreadsheet_setvalidation_method.md @@ -8,7 +8,7 @@ description: You can learn about the setValidation method in the documentation o ### Description -@short: Sets validation for cells via adding drop-down lists into the cells +@short: Sets validation for cells by adding drop-down lists to the cells The method can also remove data validation from a cell(s). @@ -24,7 +24,7 @@ setValidation( ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `options` - (required) either a string with a range of cells ("C1: C3") or an array of string values +- `options` - (required) either a string with a range of cells ("C1:C3") or an array of string values ### Example @@ -41,7 +41,7 @@ spreadsheet.setValidation("B10", ["Apple", "Mango", "Avocado"]); ### Details -If you need to remove validation from a cell(s), instead of the list of options, pass *null* / *0* / *false* / *undefined* as a second parameter to the method: +If you need to remove validation from a cell(s), instead of the list of options, pass `null`, `0`, `false`, or `undefined` as the second parameter to the method: ~~~jsx spreadsheet.setValidation("B15"); diff --git a/docs/api/spreadsheet_setvalue_method.md b/docs/api/spreadsheet_setvalue_method.md index 454d87b5..7bbdec95 100644 --- a/docs/api/spreadsheet_setvalue_method.md +++ b/docs/api/spreadsheet_setvalue_method.md @@ -11,7 +11,7 @@ description: You can learn about the setValue method in the documentation of the @short: Sets a value for a cell :::info -The method allows setting the same/repeated value(s) for the specified cells. In case you want to add different values into spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method. +The method sets the same (repeated) value(s) for the specified cells. If you want to add different values to spreadsheet cells, use the [](api/spreadsheet_parse_method.md) method. ::: ### Usage @@ -23,7 +23,7 @@ setValue(cell: string, value: string | number | array): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `value` - (required) the value(s) to be set for cells +- `value` - (required) the value(s) to set for cells ### Example @@ -53,7 +53,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i spreadsheet.setValue("sheet1!A1",5); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will set the value(s) for the cell(s) of the active tab. +If the name of the tab isn't specified, the method sets the value(s) for the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_showcols_method.md b/docs/api/spreadsheet_showcols_method.md index 9828ff07..89a24deb 100644 --- a/docs/api/spreadsheet_showcols_method.md +++ b/docs/api/spreadsheet_showcols_method.md @@ -18,7 +18,7 @@ showCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_showrows_method.md b/docs/api/spreadsheet_showrows_method.md index 172c6d24..8a18686b 100644 --- a/docs/api/spreadsheet_showrows_method.md +++ b/docs/api/spreadsheet_showrows_method.md @@ -18,7 +18,7 @@ showRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_startedit_method.md b/docs/api/spreadsheet_startedit_method.md index ef5d4f1d..360c417d 100644 --- a/docs/api/spreadsheet_startedit_method.md +++ b/docs/api/spreadsheet_startedit_method.md @@ -11,7 +11,7 @@ description: You can learn about the startEdit method in the documentation of th @short: Starts editing in the selected cell :::info -If the id of a cell isn't passed, editing will start in the currently selected cell. +If the id of a cell isn't passed, editing starts in the currently selected cell. ::: ### Usage diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index f23824c9..313eba1e 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -8,7 +8,7 @@ description: You can learn about the toolbarBlocks config in the documentation o ### Description -@short: Optional. Specifies blocks of buttons that will be shown in the toolbar of spreadsheet +@short: Optional. Specifies blocks of buttons shown in the spreadsheet toolbar ### Usage @@ -60,9 +60,9 @@ Check how you can [customize the toolbar](customization.md#toolbar). **Change log:** -- The *"font"* block was added in v6.0 -- The *"cell"* block was added in v5.2 -- The *"actions"* block was added in v5.0 +- The `"font"` block was added in v6.0 +- The `"cell"` block was added in v5.2 +- The `"actions"` block was added in v5.0 **Related articles:** - [Configuration](configuration.md#toolbar) diff --git a/docs/api/spreadsheet_unfreezecols_method.md b/docs/api/spreadsheet_unfreezecols_method.md index 613a5cd3..91fdad88 100644 --- a/docs/api/spreadsheet_unfreezecols_method.md +++ b/docs/api/spreadsheet_unfreezecols_method.md @@ -18,7 +18,7 @@ unfreezeCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_unfreezerows_method.md b/docs/api/spreadsheet_unfreezerows_method.md index fd63351b..62f8e55c 100644 --- a/docs/api/spreadsheet_unfreezerows_method.md +++ b/docs/api/spreadsheet_unfreezerows_method.md @@ -18,7 +18,7 @@ unfreezeRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example diff --git a/docs/api/spreadsheet_unlock_method.md b/docs/api/spreadsheet_unlock_method.md index a5d621e2..606d7979 100644 --- a/docs/api/spreadsheet_unlock_method.md +++ b/docs/api/spreadsheet_unlock_method.md @@ -43,7 +43,7 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified spreadsheet.unlock("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will unlock the cell(s) of the active tab. +If the name of the tab isn't specified, the method unlocks the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/awaitredraw.md b/docs/awaitredraw.md index e51c9452..383ee873 100644 --- a/docs/awaitredraw.md +++ b/docs/awaitredraw.md @@ -8,7 +8,7 @@ description: You can explore the AwaitRedraw helper in the documentation of the Some API methods of DHTMLX Spreadsheet take effect only after the component is rendered on the page. In some cases this can take a moment, so you need to wait until the browser completes rendering before running the next piece of code. -For such cases, you can use the **dhx.awaitRedraw** helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. +For such cases, you can use the `dhx.awaitRedraw` helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. ~~~js dhx.awaitRedraw().then(() => { diff --git a/docs/configuration.md b/docs/configuration.md index 03892a61..ad419a74 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -6,7 +6,7 @@ description: You can learn about the configuration of the DHTMLX JavaScript Spre # Configuration -You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in the readonly mode, if needed. +You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in read-only mode, if needed. ## Toolbar @@ -14,7 +14,7 @@ The toolbar of the Spreadsheet consists of several blocks of controls that can b -The structure of toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. +The structure of the toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. You can also specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example: `"colors"`, `"align"`, `"cell"`, `"decoration"`, `"lock"`, `"clear"`. @@ -24,7 +24,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { }); ~~~ -Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. +The toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. ## Editing bar @@ -35,7 +35,7 @@ the editing bar. ## Number of rows and columns -When Spreadsheet is initialized, it has the initial configuration of grid which consists of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose. +When Spreadsheet is initialized, it starts with a grid of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose. @@ -47,15 +47,15 @@ The menu of the Spreadsheet is hidden by default. You can switch it on/off via t ## Read-only mode -It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option. +You can also enable read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option. -You can also [customize the readonly behavior of Spreadsheet](customization.md#custom-read-only-mode). +You can also [customize the read-only behavior of Spreadsheet](customization.md#custom-read-only-mode). ## Custom number formats for cells -There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". +You can apply 7 default formats to cell values: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". You can redefine configuration of default formats or specify your own number format via the [`formats`](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article. @@ -63,9 +63,9 @@ You can redefine configuration of default formats or specify your own number for ## Path to export/import modules -DHTMLX Spreadsheet provides the possibility to import/export data in the Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data. +DHTMLX Spreadsheet can import and export data in Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data. -After installing the necessary library, you need to set path to the **worker.js** file (either local or at CDN) +After installing the necessary library, you need to set the path to the *worker.js* file (either local or at CDN) via the corresponding configuration option: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) or [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). All the details are given in the [Data Loading and Export](loading_data.md) article. diff --git a/docs/customization.md b/docs/customization.md index 627615db..549de787 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -6,7 +6,7 @@ description: You can learn about the customization of the DHTMLX JavaScript Spre # Customization -You can customize the appearance, structure and functionality of toolbar, menu and context menu and define custom read-only behavior for Spreadsheet. +You can customize the appearance, structure and functionality of the toolbar, menu, and context menu and define custom read-only behavior for Spreadsheet. ## Default and custom icons @@ -23,44 +23,43 @@ For example, you can use the [Font Awesome](https://fontawesome.com/) icon pack crossorigin="anonymous"> ~~~ -Then you can use the name of the icon as the value of the **icon** property in the object with the control parameters for toolbar, menu or context menu. See details below. +Then you can use the name of the icon as the value of the `icon` property in the object with the control parameters for toolbar, menu or context menu. See details below. ## Controls types and operations ### Types -There are the following types of controls you can add: *button*, *menuItem*, *separator* and *spacer*. +You can add the following types of controls: `button`, `menuItem`, `separator`, and `spacer`. -The **button** object has the following properties: +The `button` object has the following properties: -- **type** - the type of a button, set it to "button" -- **id** - the id of a button -- **icon** - the name of an icon from the used icon font -- **hotkey** - the name of the hot key for a button -- **value** - the value of a button -- **tooltip** - the tooltip of a button -- **twoState** - the flag that defines whether a button can be used in two states -- **active** - the state of a button: *true* - active, *false* - inactive +- `type` - the type of a button, set it to "button" +- `id` - the id of a button +- `icon` - the name of an icon from the used icon font +- `hotkey` - the name of the hot key for a button +- `value` - the value of a button +- `tooltip` - the tooltip of a button +- `twoState` - the flag that defines whether a button can be used in two states +- `active` - the state of a button: `true` - active, `false` - inactive -The **menuItem** object has the properties below: +The `menuItem` object has the properties below: -- **type** - the type of a menu item, set it to "menuItem" -- **id** - the id of a menu item -- **icon** - the name of an icon from the used icon font -- **hotkey** - the name of the hot key for a menu item -- **value** - the value of a menu item -- **childs** - an array of children controls (note that all the children should have the type **menuItem**) +- `type` - the type of a menu item, set it to "menuItem" +- `id` - the id of a menu item +- `icon` - the name of an icon from the used icon font +- `hotkey` - the name of the hot key for a menu item +- `value` - the value of a menu item +- `childs` - an array of children controls (note that all the children should have the type `menuItem`) -The data collection API of the **toolbar**, **menu** and **context menu** allows you to manipulate the controls, namely to add custom controls, remove the controls you don't need, or update the controls, -e.g. change their icons. +The data collection API of the **toolbar**, **menu**, and **context menu** lets you manage controls: add custom ones, remove those you don't need, or update them — for example, change their icons. ### Adding controls To add a new control, apply the `spreadsheet.{name}.data.add()` method. It takes the parameters below: -- **config** - (*object*) an object with the control config -- **index** - (*number*) the index of the position to place the control into -- **parent** - (*string*) the id of a parent control (for the *menuItem* type) +- `config` - (`object`) an object with the control config +- `index` - (`number`) the index of the position to place the control into +- `parent` - (`string`) the id of a parent control (for the `menuItem` type) For a button: @@ -435,7 +434,7 @@ spreadsheet.contextMenu.data.remove("lock"); ## Custom read-only mode -Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block certain operations via the events the name of which starts with **before**, e.g.: +Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block specific operations with the events whose names start with `before`, for example: - [](api/spreadsheet_beforeeditstart_event.md) - [](api/spreadsheet_beforeaction_event.md) diff --git a/docs/data_formatting.md b/docs/data_formatting.md index 8d1fd75f..607b5dbf 100644 --- a/docs/data_formatting.md +++ b/docs/data_formatting.md @@ -14,8 +14,8 @@ The toolbar of DHTMLX Spreadsheet contains several sections with buttons for mod What you can do: -- change the color of a text and its background via color picker linked to the **Text color** button -- change the color of text background via color picker linked to the **Background color** button +- change **text color** with the color picker of the **Text color** button +- change **background color** with the color picker of the **Background color** button - apply *Bold*, *Italic* and *Underline* styles to a text - apply *Strikethrough* formatting to a text @@ -75,7 +75,7 @@ When you change the width of the column, text wrapping adjusts automatically. ## Removing styles and values -To clear styles applied to data in a cell, or values entered into cells, or remove both data and formatting, you can choose one of the two ways: +You can clear cell values, cell styles, or both. Choose one of two ways: 1\. via the toolbar button: @@ -95,16 +95,16 @@ To clear styles applied to data in a cell, or values entered into cells, or remo ## Styled borders for cells -You can add a styled border(s) for a cell or a group of cells. +You can add styled borders for a cell or a group of cells. ### Setting styled borders -- Select the necessary cell or a group of cells to set a styled border(s) for +- Select the necessary cell or a group of cells to set styled borders for - Click the **Border** button in the toolbar and choose the desired type of the border, its color and style ![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) -### Removing styled borders +### Removing styled borders - Select the necessary cell or a group of cells from which you want to remove styled borders - Click the **Border** button in the toolbar and choose the *Clear borders* option diff --git a/docs/excel_import_export.md b/docs/excel_import_export.md index c844a5a4..39a67c92 100644 --- a/docs/excel_import_export.md +++ b/docs/excel_import_export.md @@ -8,7 +8,7 @@ description: You can learn about the excel import and export in the documentatio ## Import from Excel -You can load data from an Excel file into Spreadsheet. There is quite a simple way to do this: +You can load data from an Excel file into Spreadsheet. To do this: 1\. Click the **Import** button in the toolbar and select *Microsoft Excel (.xlsx)* @@ -20,11 +20,11 @@ Go to: *File -> Import As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) -2\. Select an Excel file on your computer and its content will be imported into an opened sheet. +2\. Select an Excel file on your computer, and its content is imported into the open sheet. ## Export to Excel -The data you've entered into Spreadsheet can be exported to an Excel file. Complete the steps below: +You can export the data you've entered into Spreadsheet to an Excel file. Complete the steps below: 1\. Click the **Export** button in the toolbar: @@ -36,4 +36,4 @@ Go to: *File -> Download As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) -2\. Check the directory with downloaded files on your computer to find a downloaded Excel file with data from Spreadsheet. +2\. Check your downloads directory to find the Excel file with data from Spreadsheet. diff --git a/docs/filtering_data.md b/docs/filtering_data.md index 18a5ab66..cbaae6fb 100644 --- a/docs/filtering_data.md +++ b/docs/filtering_data.md @@ -6,9 +6,9 @@ description: You can learn about data filtering in the documentation of the DHTM # Filtering data -You may filter data in the spreadsheet to show only the records that meet the criteria you specify. +You can filter data in the spreadsheet to show only the records that meet the criteria you specify. -To activate the filtering functionality, you can use either of two ways: +To activate filtering, use one of two ways: - Set focus on a cell or select a range of cells and click the **Filter** button in the toolbar @@ -18,7 +18,7 @@ To activate the filtering functionality, you can use either of two ways: ![DHTMLX Spreadsheet Data menu with the Filter option for activating column filters](/img/filter_menu.png) -After that, a **filter** icon appears on the right side of the header of each column in the range. +After that, a **filter** icon appears on the right of each column header in the range. ## Filtering by condition @@ -54,9 +54,9 @@ To clear a filter, click the **filter** icon in the column header, click the **S ## Removing filters -To disable the filtering functionality, do one of the following: +To disable filtering, do one of the following: - click the **Filter** button in the toolbar - or go to: *Data -> Filter* in the menu -The **filter** icons will disappear from the column headers and all hidden records will be displayed. \ No newline at end of file +The **filter** icons disappear from the column headers, and all hidden records reappear. \ No newline at end of file diff --git a/docs/functions.md b/docs/functions.md index 2baecfb5..749c9ab4 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -6,7 +6,7 @@ description: You can learn about the formulas and functions of the DHTMLX JavaSc # Formulas and functions -Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas that can be used for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. +Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. :::note Lowercase letters in formulas are automatically converted to upper case. @@ -20,7 +20,7 @@ Here's a list of all the available functions with detailed descriptions. ### Boolean operators -You can compare two values via using logical expressions that in any given case will only return either TRUE or FALSE. +You can compare two values with logical expressions that return either TRUE or FALSE. | Operator | Example | Description | | :------- | :------------ | :------------------------------------------------------------------------------------------------------- | @@ -1435,7 +1435,7 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). ## Getting cell formula -Starting with v4.1, you can get the formula applied to a cell via the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: +Starting with v4.1, you can retrieve the formula applied to a cell with the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: ~~~js var formula = spreadsheet.getFormula("B2"); @@ -1444,7 +1444,7 @@ var formula = spreadsheet.getFormula("B2"); ## Popup with formula description -When you enter a formula, a popup with description of the function and its parameters appears. +When you enter a formula, a popup with a description of the function and its parameters appears. ![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) @@ -1454,7 +1454,7 @@ You can modify the default locale for the popup with formula parameters and add ## Custom formulas -Starting with v6.0, you can register custom formula functions via the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. +Starting with v6.0, you can register custom formula functions with the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. The method takes two parameters: the formula name and a synchronous handler function that receives the resolved cell values as arguments and returns the result: @@ -1464,7 +1464,7 @@ spreadsheet.addFormula("DOUBLE", (value) => { }); ~~~ -After that, the formula can be used in cells just like any built-in function: +After that, you can use the formula in cells just like any built-in function: ~~~js spreadsheet.parse([ diff --git a/docs/guides.md b/docs/guides.md index b921481e..97f6411f 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -6,7 +6,7 @@ description: You can study developer and user guides in the documentation of the # Guides -DHTMLX Spreadsheet provides a range of great features to build a perfect application that include: support for import/export of data in different formats, handy work with content and style of data, adaptable structure of a spreadsheet, readonly mode, wide possibilities for look and feel customization, integration with famous frameworks, etc. +DHTMLX Spreadsheet includes a wide range of features: import and export of data in different formats, convenient work with cell content and styles, an adaptable spreadsheet structure, a read-only mode, extensive look-and-feel customization, and integration with popular frameworks. ## Developer guides @@ -20,7 +20,7 @@ Discusses the main stages of installing and creating Spreadsheet on a page, adju ### Exploring Spreadsheet features -Shows the ways of loading data into Spreadsheet, handling events and using main functionality. It also dwells on the ways of customizing the main parts of Spreadsheet. +Shows how to load data into Spreadsheet, handle events, and use the main functionality. It also covers customizing the main parts of Spreadsheet. - [Data loading and export](loading_data.md) - [Work with Spreadsheet](working_with_ssheet.md) @@ -40,7 +40,7 @@ Shows the ways of loading data into Spreadsheet, handling events and using main ## User guides -The User guides are provided to make work with Spreadsheet easy for your end users. +The user guides make working with Spreadsheet easy for your users. - [Hot keys list](hotkeys.md) - [Work with sheets](work_with_sheets.md) diff --git a/docs/handling_events.md b/docs/handling_events.md index ea4512c4..a8c2b8d0 100644 --- a/docs/handling_events.md +++ b/docs/handling_events.md @@ -10,7 +10,7 @@ description: You can learn about event handling in the DHTMLX JavaScript Spreads ## Attaching event listeners -You can attach event listeners with the [spreadsheet.events.on()](api/eventsbus_on_method.md) method: +You can attach event listeners with the [`spreadsheet.events.on()`](api/eventsbus_on_method.md) method: ~~~jsx spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -20,7 +20,7 @@ spreadsheet.events.on("AfterColumnAdd", function(cells){ ## Detaching event listeners -To detach events, use [spreadsheet.events.detach()](api/eventsbus_detach_method.md): +To detach events, use [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md): ~~~jsx var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -31,7 +31,7 @@ spreadsheet.events.detach(addcolumn); ## Calling events -To call events, use [spreadsheet.events.fire()](api/eventsbus_fire_method.md): +To call events, use [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md): ~~~jsx spreadsheet.events.fire("name",args); diff --git a/docs/how_to_start.md b/docs/how_to_start.md index a84a258a..0b5f5584 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -6,13 +6,13 @@ description: You can learn how to start with the DHTMLX JavaScript Spreadsheet l # How to start -This clear and comprehensive tutorial will guide your through the steps you need to complete in order to get a full-functional DHTMLX Spreadsheet on a page. The component will be especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. +This tutorial guides you through the steps to get a fully functional DHTMLX Spreadsheet on a page. The component is especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. ![DHTMLX Spreadsheet initialized with a sample data table in a browser window](/img/how_to_start.png) ## Step 1. Including source files -Start from creating an HTML file and call it *index.html*. Then proceed to include Spreadsheet source files into the created file. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). +Start by creating an HTML file named *index.html*. Then include Spreadsheet source files in it. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). There are two necessary files: @@ -48,20 +48,20 @@ You can import JavaScript Spreadsheet into your project using the `yarn` or `npm #### Installing trial Spreadsheet via npm or yarn :::info -If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps mentioned in the *README* file. Note that the trial Spreadsheet is available 30 days only. +If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps in the *README* file. Note that the trial Spreadsheet is available for 30 days only. ::: #### Installing PRO Spreadsheet via npm or yarn :::info -You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. +You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. ::: ## Step 2. Creating Spreadsheet -Now you are ready to add Spreadsheet to the page. First, let's create a DIV container and then place DHTMLX Spreadsheet into it. So, your steps will be: +Now you are ready to add Spreadsheet to the page. First, create a DIV container and place DHTMLX Spreadsheet into it. Your steps are: -- to specify a DIV container in the **index.html** file +- to specify a DIV container in the *index.html* file - to initialize DHTMLX Spreadsheet using the `dhx.Spreadsheet` constructor As parameters, the constructor function takes the HTML container to place Spreadsheet into and the Spreadsheet configuration object. @@ -91,7 +91,7 @@ As parameters, the constructor function takes the HTML container to place Spread Next you can specify additional configuration options you want the Spreadsheet component to have when initialized besides the default ones. -There are several options you can use to adjust the look and feel of Spreadsheet to your needs, e.g.: **toolbarBlocks**, **rowsCount** and **colsCount**. [Check the details](configuration.md). +You can adjust the look and feel of Spreadsheet with several options, for example: `toolbarBlocks`, `rowsCount`, and `colsCount`. [Check the details](configuration.md). ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet", { @@ -105,7 +105,7 @@ The configuration of DHTMLX Spreadsheet is quite flexible, so you can change it ## Step 4. Loading data into Spreadsheet -The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the **parse()** method and pass an object with data to it as in the example below: +The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the `parse()` method and pass an object with data to it as in the example below: ~~~jsx title="data.json" const data = [ @@ -140,7 +140,7 @@ spreadsheet.parse(data); ## What's next -That's all. Just four simple steps and you have a handy tool for work with data in the tabular form. Now you can start working with your data or keep exploring the inner world of DHTMLX Spreadsheet. +That's all. In four steps you get a handy tool for working with tabular data. Now you can start working with your data or keep exploring DHTMLX Spreadsheet. - [Spreadsheet overview](/) - [](guides.md) diff --git a/docs/index.md b/docs/index.md index 5f8699ec..d70677e2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,10 +7,10 @@ description: You can have an overview of the JavaScript Spreadsheet library in t # DHTMLX Spreadsheet overview -DHTMLX Spreadsheet is a client-side JavaScript component that allows editing and formatting data in spreadsheets online. It includes a configurable toolbar, handy menu and context menu, and adjustable grid, supports hot keys navigation, loads data both from external and local sources, provides the ability to localize interface into the desired language. +DHTMLX Spreadsheet is a client-side JavaScript component for editing and formatting spreadsheet data online. It includes a configurable toolbar, handy menu and context menu, and an adjustable grid, supports hotkey navigation, loads data from external and local sources, and can localize the interface into the desired language. :::tip -There is a [User Guide](guides.md#user-guides) provided to make work with Spreadsheet easy for your end users +The [User Guide](guides.md#user-guides) makes working with Spreadsheet easy for your users. ::: ## Spreadsheet structure @@ -21,28 +21,28 @@ The **Toolbar** section is rather flexible. It contains several default blocks o ![DHTMLX Spreadsheet toolbar with undo, color, decoration, align, cell, format, and action controls](/img/overview_toolbar.png) -It is also possible to [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. +You can also [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. ### Editing line -The **editing line** can be used for two purposes: +The **editing line** serves two purposes: - to edit the content of the selected cell - to control changes made in the currently edited cell ![DHTMLX Spreadsheet editing line for editing cell content and tracking changes](/img/overview_editline.png) -You can switch the editing line off, if necessary via the corresponding [configuration option](configuration.md#editing-bar). +If necessary, you can switch the editing line off via the corresponding [configuration option](configuration.md#editing-bar). ### Grid -**Grid** represents a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, e.g. C3. +The **Grid** is a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, for example, C3. ![DHTMLX Spreadsheet grid with columns labeled by letters and numbered rows](/img/spreadsheet_init.png) ### Context menu -The **Context menu** section includes 5 items **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** with sub-items. +The **Context menu** section includes 6 items — **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** — with sub-items. ![DHTMLX Spreadsheet context menu with Lock, Clear, Columns, Rows, Sort, and Insert link options](/img/overview_contextmenu.png) @@ -50,7 +50,7 @@ The [structure of Context menu is customizable](customization.md#context-menu) a ### Menu -The **Menu** section contains several blocks that combine most frequently used options from the Toolbar and Context Menu to provide quick and handy access to them. +The **Menu** section contains several blocks that combine the most frequently used options from the Toolbar and Context menu for quick access. By default the **Menu** section is hidden, but you can switch it on via the related [configuration option](configuration.md#menu). @@ -62,7 +62,7 @@ You can [modify the structure of the menu](customization.md#menu) by using custo Now you can get down to using DHTMLX Spreadsheet in your application. Follow the directions of the [How to Start](how_to_start.md) tutorial for guidance. -To dive deeper into the specificity of DHTMLX Spreadsheet, go into more profound manuals: +To learn more about DHTMLX Spreadsheet, see these guides: - [API overview](api/api_overview.md) - [Guides](guides.md) diff --git a/docs/initialization.md b/docs/initialization.md index 9c3879b4..1490adc7 100644 --- a/docs/initialization.md +++ b/docs/initialization.md @@ -6,7 +6,7 @@ description: You can learn about the initialization of the DHTMLX JavaScript Spr # Initialization -This guide will give you detailed instructions on how to create DHTMLX Spreadsheet on a page to enrich your application with features of a mighty worksheet. Follow the steps below to get a ready-to-use component: +This guide describes how to create DHTMLX Spreadsheet on a page and add a full-featured worksheet to your application. Follow the steps below to get a ready-to-use component: 1. [Include the DHTMLX Spreadsheet source files on a page](#including-source-files). 2. [Create a container for DHTMLX Spreadsheet](#creating-container). @@ -32,10 +32,10 @@ Make sure that you set correct relative paths to these files: The structure of the Spreadsheet pack is the following: -- **sources** - the source code files of the library; they are easy-to-read and are mostly intended for debugging; -- **codebase** - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; -- **samples** - the code samples; -- **docs** - the full documentation of the component. +- *sources* - the source code files of the library; they are easy-to-read and are mostly intended for debugging; +- *codebase* - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; +- *samples* - the code samples; +- *docs* - the full documentation of the component. ## Creating container @@ -61,7 +61,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Configuration properties -See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object in the [Spreadsheet API overview](api/api_overview.md#spreadsheet-properties) article. +See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object. You can set configuration options during initialization as the second parameter of the constructor: diff --git a/docs/loading_data.md b/docs/loading_data.md index b3a04f51..a471319b 100644 --- a/docs/loading_data.md +++ b/docs/loading_data.md @@ -6,7 +6,7 @@ description: You can learn about loading data in the DHTMLX JavaScript Spreadshe # Data loading and export -You can populate DHTMLX Spreadsheet with a ready dataset that may include the data itself and styling for cells. The component supports two ways of data loading: +You can populate DHTMLX Spreadsheet with a prepared dataset that can include both cell data and styles. The component supports two ways to load data: - load from an external file - load from a local source @@ -15,7 +15,7 @@ The component also supports [export of data into an Excel file](#exporting-data) ## Preparing data -DHTMLX Spreadsheet expects data in the JSON format. +DHTMLX Spreadsheet expects data in JSON format. It can be a simple array with cell objects. Use this way if you need to create a data set for only one sheet. @@ -84,9 +84,9 @@ The ability to load merged cells is available only if you prepare data in a shee ### Setting styles for cells -You may need to define the cells styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. +You may need to define the cell styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. -A CSS class is set for a cell via the **css** property. +Set a CSS class for a cell with the `css` property. ~~~jsx const styledData = { @@ -118,7 +118,7 @@ const styledData = { ### Setting the locked state for a cell -If you want to specify locked cells in a data set, you can do it with the help of the **locked** property of a cell by setting it to *true*: +If you want to specify locked cells in a data set, use the `locked` property of a cell and set it to `true`: ~~~jsx const dataset = [ @@ -140,7 +140,7 @@ Check the full list of available cell properties in the [API reference](api/spre ### Adding a link into a cell -There is a possibility to specify a link for a cell right in a data set. For this, you need to set the **link** property as an object and provide the necessary settings: +You can specify a link for a cell right in a data set. To do this, set the `link` property as an object and provide the necessary settings: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -165,7 +165,7 @@ const dataset = [ ~~~ :::note -Note that you should not use the **value** property of the *cell* object and the **text** property of the *link* object at the same time, since they are mutually exclusive. +Note that you should not use the `value` property of the `cell` object and the `text` property of the `link` object at the same time, since they are mutually exclusive. ::: **Related sample**: [Spreadsheet. Import and export to JSON](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) @@ -185,12 +185,12 @@ spreadsheet.load("../common/data.json"); :::info -If you need to provide end users with the ability to import a JSON file into the spreadsheet via the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). +If you need to let users import a JSON file into the spreadsheet through the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). ::: ### Loading CSV data -You can also load data in the CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: +You can also load data in CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: ~~~jsx var spreadsheet = new dhx.Spreadsheet("spreadsheet"); @@ -201,7 +201,7 @@ spreadsheet.load("../common/data.csv", "csv"); ### Loading Excel file (.xlsx) -It is possible to load a file in the Excel format with the **.xlsx** extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: +You can load a file in Excel format with the `.xlsx` extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Import as..-> Microsoft Excel(.xlsx) @@ -213,12 +213,12 @@ It is possible to load a file in the Excel format with the **.xlsx** extension i #### How to import data -{{note Please note that the import feature won't work in the Internet Explorer browser.}} +{{note Note that the import feature does not work in Internet Explorer.}} -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) for import of data from Excel. So, to enable the possibility to load data from Excel into Spreadsheet, you need to: +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) to import data from Excel. To load Excel data into Spreadsheet, you need to: - install the **Excel2Json** library -- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file in one of the two ways: +- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the *worker.js* file in one of two ways: - by providing a local path to the file on your computer, like: `"../libs/excel2json/1.0/worker.js"` - by providing a link to the file from CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` @@ -237,7 +237,7 @@ To load data from an Excel file, pass a string with the type of the extension (" spreadsheet.load("../common/data.xlsx", "xlsx"); ~~~ -{{note Please note that the component supports import from Excel files with the **.xlsx** extension only.}} +{{note Note that the component supports import from Excel files with the `.xlsx` extension only.}} **Related sample**: [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) @@ -245,7 +245,7 @@ You can also [export data from a spreadsheet into an Excel file](#exporting-data ### Processing after-loading code -The component will make an AJAX call and expect the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: +The component makes an AJAX call and expects the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: ~~~jsx spreadsheet.load("/some/data").then(function(){ @@ -288,7 +288,7 @@ spreadsheet2.parse(state); ### Export into Excel -DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: +DHTMLX Spreadsheet can export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Download as..-> Microsoft Excel(.xlsx) @@ -301,12 +301,12 @@ DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into a #### How to export data :::note -Please note that the export feature won't work in the Internet Explorer browser. +Note that the export feature does not work in Internet Explorer. ::: -The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to enable the functionality of export to Excel. Export is processed at the **worker.js** file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). You can use either the public export server or a local export server. Thus, to have the possibility of exporting files you need to: +The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. Export is processed in the *worker.js* file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). You can use either the public export server or a local export server. To export files, you need to: -- specify the [](api/spreadsheet_exportmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file: +- specify the [](api/spreadsheet_exportmodulepath_config.md) option in the Spreadsheet configuration and set the path to the *worker.js* file: - if you use the public export server, you don't need to specify the link to it, since it is used by default - if you use your own export server, you need to: - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library @@ -346,7 +346,7 @@ Check the steps of [importing data from an Excel file into Spreadsheet](#loading ### Export into JSON -From v4.3, the library also includes the ability to export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: +From v4.3, the library can also export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: ~~~jsx spreadsheet.export.json(); diff --git a/docs/localization.md b/docs/localization.md index ad7f9c20..7454f90f 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -6,7 +6,7 @@ description: You can learn about the localization of the DHTMLX JavaScript Sprea # Localization -You can localize labels in the interface of DHTMLX Spreadsheet and present it in any necessary language. You just need to provide localized strings for labels and apply your locale to the component. +You can localize the labels in the DHTMLX Spreadsheet interface and present the interface in any language. To do this, provide localized strings for the labels and apply your locale to the component. @@ -182,9 +182,9 @@ const en = { ## Custom locale -To apply a different locale you need to: +To apply a different locale, you need to: -- provide translations for all text labels in Spreadsheet, e.g. for the Russian locale: +- provide translations for all text labels in Spreadsheet, for example, for the Russian locale: ~~~jsx const ru = { @@ -201,7 +201,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); ## Default locale for formulas -The i18n locale for the Spreadsheet popup with descriptions for formulas is contained in the `dhx.i18n.formulas` object. The default locale for formulas is the following: +The `dhx.i18n.formulas` object contains the i18n locale for the Spreadsheet formula popup. The default locale for formulas is the following: ~~~jsx const en = { diff --git a/docs/merge_cells.md b/docs/merge_cells.md index 0262d96c..8b1dbdfa 100644 --- a/docs/merge_cells.md +++ b/docs/merge_cells.md @@ -25,7 +25,7 @@ or ![DHTMLX Spreadsheet Format menu with the Merge option for cell merging](/img/merge_cells_via_menu.png) :::info -The merged cell will display the content of the upper-left cell of the selected range. +The merged cell displays the content of the upper-left cell of the selected range. ::: ## Split cells diff --git a/docs/migration.md b/docs/migration.md index 5d120eb5..27c718b3 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -12,9 +12,9 @@ description: You can learn about migration in the documentation of the DHTMLX Ja The following properties of `ISpreadsheetConfig` are deprecated and removed. Check the current usage below: -- `dateFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `dateFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { dateFormat: "%d/%m/%Y" } }` -- `timeFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `timeFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { timeFormat: 12 } }` ### Deprecated methods @@ -144,7 +144,7 @@ spreadsheet.parse(data); ## 4.3 -> 5.0 -In v5.0, the *"help"* option of the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is renamed to *"helpers"*. Besides, the default set of options is extended by the new *"actions"* option. +In v5.0, the `"help"` option of the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) property is renamed to `"helpers"`. In addition, the default set of options now includes the new `"actions"` option. ~~~jsx title="Before v5.0" {8} // default configuration @@ -178,9 +178,9 @@ toolbarBlocks: [ Version 4.3 is the last version which provides IE support ::: -Version 4.3 brings a new conception of tracking and handling the actions which are performed when you change something in the spreadsheet. +Version 4.3 introduces a new approach to tracking and handling the actions performed when you change something in the spreadsheet. -The new [beforeAction](api/spreadsheet_beforeaction_event.md) and [afterAction](api/spreadsheet_afteraction_event.md) events will fire right before / after an action is executed and indicate which action has been performed. Thus, the new approach allows you to add the necessary logic for several actions at once via using only these two events. For instance: +The new [`beforeAction`](api/spreadsheet_beforeaction_event.md) and [`afterAction`](api/spreadsheet_afteraction_event.md) events fire right before/after an action is executed and indicate which action was performed. This approach lets you add the necessary logic for several actions at once using only these two events. For instance: ~~~jsx spreadsheet.events.on("BeforeAction", (actionName, config) => { @@ -206,7 +206,7 @@ spreadsheet.events.on("AfterAction", (actionName, config) => { }); ~~~ -This way will reduce the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. +This approach reduces the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. Still, the old approach continues working as before. For more details, check [Spreadsheet actions](api/overview/actions_overview.md). @@ -265,7 +265,7 @@ const locale = { ## 2.1 -> 3.0 -This list of changes will help you to migrate from the previous version 2.1 where DHTMLX Spreadsheet was PHP-based to the totally renewed version 3.0 in which the component is totally built on JavaScript. Check the list below to explore all the changes. +This list of changes helps you migrate from version 2.1, where DHTMLX Spreadsheet was PHP-based, to the fully rebuilt version 3.0, which is built entirely in JavaScript. Check the list below to explore all the changes. :::info The **API of version 2.1** is still available, but it is incompatible with the [**API starting from version 3.0**](api/api_overview.md). If you require the documentation for version 2.1, please [contact us](https://dhtmlx.com/docs/contact.shtml), and we will send it to you. diff --git a/docs/number_formatting.md b/docs/number_formatting.md index 43a5c321..1c932ca5 100644 --- a/docs/number_formatting.md +++ b/docs/number_formatting.md @@ -6,22 +6,22 @@ description: You can study the developer guide about number formatting in the do # Number formatting -DHTMLX Spreadsheet supports number formatting that you can apply for numeric values in cells. +DHTMLX Spreadsheet supports number formatting that you can apply to numeric values in cells. ![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) :::note -There is a [User Guide](number_formatting_guide.md) provided to make work with Spreadsheet easy for your end users. +The [User Guide](number_formatting_guide.md) makes working with Spreadsheet easy for your users. ::: ## Default number formats A number format is an object that includes a set of properties: -- **id** - the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - the name of a format displayed in the toolbar and menu drop-down lists -- **example** - an example that shows how a formatted number looks like. The number 2702.31 is used as a default value for format examples +- `id` - the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - the name of a format displayed in the toolbar and menu drop-down lists +- `example` - an example that shows what a formatted number looks like. The number 2702.31 is used as a default value for format examples The default number formats are the following: @@ -43,13 +43,13 @@ defaultFormats = [ ]; ~~~ -This is how a spreadsheet with data in various number formats looks like: +This is what a spreadsheet with data in various number formats looks like: ## Date format -You can define the format for dates displayed in the spreadsheet via the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". +You can define the format for dates displayed in the spreadsheet with the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { @@ -98,11 +98,11 @@ spreadsheet.parse({ With Spreadsheet configuration options, you can localize time and date, specify the necessary currency sign and provide the desired decimal and thousands separators. All these settings are available in the [`localization`](api/spreadsheet_localization_config.md) property. It is an object with the following properties: -- **decimal** - (optional) the symbol used as a decimal separator, **"."** (a period) by default
Possible values are `"." | ","` -- **thousands** - (optional) the symbol used as a thousands separator, **","** (a comma) by default
Possible values are `"." | "," | " " | ""` -- **currency** - (optional) the currency sign, **"$"** by default -- **dateFormat** - (optional) the format of displaying dates set as a string, **"%d/%m/%Y"** by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page -- **timeFormat** - (optional) the format of displaying time set as either *12* or *24*, **12** by default +- `decimal` - (optional) the symbol used as a decimal separator, `"."` (a period) by default
Possible values are `"." | ","` +- `thousands` - (optional) the symbol used as a thousands separator, `","` (a comma) by default
Possible values are `"." | "," | " " | ""` +- `currency` - (optional) the currency sign, `"$"` by default +- `dateFormat` - (optional) the format of displaying dates set as a string, `"%d/%m/%Y"` by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page +- `timeFormat` - (optional) the format of displaying time set as either `12` or `24`, `12` by default For example, you can change the default localization settings as shown below: @@ -120,7 +120,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { spreadsheet.parse(dataset); ~~~ -Here is the result of configuring the **localization** object for Spreadsheet: +Here is the result of configuring the `localization` object for Spreadsheet: @@ -146,27 +146,27 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { ## Formats customization -You are not limited by [default number formats](#default-number-formats) only. There are two options of formats customization available: +You are not limited to the [default number formats](#default-number-formats). You can customize formats in two ways: - changing the settings of default number formats - adding custom number formats into spreadsheet -All such modifications can be implemented via the [`formats`](api/spreadsheet_formats_config.md) configuration option. It represents an array of format objects each of which contains a set of properties: +You can make all these modifications with the [`formats`](api/spreadsheet_formats_config.md) configuration option. It is an array of format objects, each of which contains a set of properties: -- **id** - (*string*) mandatory, the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - (*string*) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - (*string*) optional, the name of a format that will be displayed in the toolbar and menu drop-down lists -- **example** - (*string*) optional, an example that shows how a formatted number will look like +- `id` - (`string`) mandatory, the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - (`string`) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - (`string`) optional, the name of a format displayed in the toolbar and menu drop-down lists +- `example` - (`string`) optional, an example that shows what a formatted number looks like ### The structure of a mask A mask may contain a set of common syntax characters that include digit placeholders, separators, percent and currency signs, valid characters: - **0** - a digit in the number. Used to display insignificant zeros, if a number has fewer digits than there are zeros in the format. For example, to display 2 as 2.0, use the format 0.0. -- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be ommitted, if a number has fewer digits than there are # symbols in the format). -- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00 ,e.g. [$ €]#,##0.00. +- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be omitted, if a number has fewer digits than there are # symbols in the format). +- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00, for example, [$ €]#,##0.00. {{note Note that all characters between [$ and ] will be interpreted as a currency sign.}} - **.(period)** - applies a decimal point to numbers. - **,(comma)** - applies a thousands separator to numbers. @@ -175,21 +175,21 @@ A mask may contain a set of common syntax characters that include digit placehol ## Setting format -In order to apply the necessary format to a numeric value, make use of the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: +To apply the necessary format to a numeric value, use the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: -- **cell** - (*string*) the id of a cell the value of which should be formatted -- **format** - (*string*) the name of the [default number format](#default-number-formats) to apply to the cell value +- `cell` - (`string`) the id of the cell whose value should be formatted +- `format` - (`string`) the name of the [default number format](#default-number-formats) to apply to the cell value For example: ~~~jsx -// applies the currency format to the cell A1 +// applies the percent format to cell A1 spreadsheet.setFormat("A1","percent"); ~~~ ## Getting format -You can get the number format applied to the value of a cell with the help of the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. +You can retrieve the number format applied to a cell's value with the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. ~~~jsx var format = spreadsheet.getFormat("A1"); @@ -198,7 +198,7 @@ var format = spreadsheet.getFormat("A1"); ## Events -There is a pair of events you can use to control the process of cell's format changing. They are: +You can use a pair of events to control cell format changes: - [`beforeAction`](api/spreadsheet_beforeaction_event.md) - fires before the `setCellFormat` action is executed - [`afterAction`](api/spreadsheet_afteraction_event.md) - fires after the `setCellFormat` action is executed \ No newline at end of file diff --git a/docs/number_formatting_guide.md b/docs/number_formatting_guide.md index 1b7b307d..ce1fbbdf 100644 --- a/docs/number_formatting_guide.md +++ b/docs/number_formatting_guide.md @@ -8,7 +8,7 @@ description: You can study the user guide about number formatting in the documen ## Supported number formats -There are several number formats you can apply to format numeric values of cells: +You can apply several number formats to cell values: diff --git a/docs/react/events.md b/docs/react/events.md index 8b2c5893..783a2ee6 100644 --- a/docs/react/events.md +++ b/docs/react/events.md @@ -9,12 +9,12 @@ description: "Event callback props for ReactSpreadsheet: actions, selection, edi All event callbacks are optional props. "Before" callbacks can return `false` to cancel the operation. :::note -The React wrapper uses `onCamelCase` prop names (e.g. `onAfterAction`) while the JS Spreadsheet API uses `camelCase` event names on the event bus (e.g. `afterAction`). See the [JS API Events Reference](api/overview/events_overview.md) for the imperative API. +The React wrapper uses `onCamelCase` prop names (for example, `onAfterAction`) while the JS Spreadsheet API uses `camelCase` event names on the event bus (for example, `afterAction`). See the [JS API Events Reference](api/overview/events_overview.md) for the imperative API. ::: ## Action events -Fired for any user action (cell edits, formatting, structural changes, etc.). +Fired for any user action, such as cell edits, formatting, or structural changes. | Prop | Cancellable | Description | |------|:-----------:|-------------| diff --git a/docs/react/index.md b/docs/react/index.md index c435d5b5..429bedc1 100644 --- a/docs/react/index.md +++ b/docs/react/index.md @@ -6,7 +6,7 @@ description: "Install, configure, and use DHTMLX Spreadsheet in React with the o # React Spreadsheet -The official declarative React wrapper for DHTMLX Spreadsheet. Build spreadsheet UIs with a component-based API: pass data as props, respond to changes via event callbacks, and access the underlying widget through a ref when needed. +The official declarative React wrapper for DHTMLX Spreadsheet. Build spreadsheet UIs with a component-based API: pass data as props, respond to changes through event callbacks, and access the underlying widget through a ref when needed. ## Get started diff --git a/docs/react/localization.md b/docs/react/localization.md index 1a5de5e8..43f1eb94 100644 --- a/docs/react/localization.md +++ b/docs/react/localization.md @@ -6,7 +6,7 @@ description: "Localize UI labels, formula names, and number/date formatting in R # React Spreadsheet localization -React Spreadsheet provides two separate localization mechanisms for different aspects of the UI. +React Spreadsheet has two separate localization mechanisms for different aspects of the UI. ## Two localization mechanisms @@ -52,7 +52,7 @@ const locale: SpreadsheetLocale = { ## Number/date formatting (localization) -The `localization` prop controls how numbers and dates are displayed: decimal separators, currency symbols, date patterns, etc. It uses the same format as the DHTMLX Spreadsheet [`localization`](api/spreadsheet_localization_config.md) configuration property. +The `localization` prop controls how numbers and dates are displayed: decimal separators, currency symbols, and date patterns. It uses the same format as the DHTMLX Spreadsheet [`localization`](api/spreadsheet_localization_config.md) configuration property. ~~~tsx { ~~~ :::warning -Avoid mixing imperative writes (e.g. `instance.setValue()`) with the declarative `sheets` prop. The wrapper may overwrite imperative changes on the next render cycle. Use the ref only for **reading** data and for operations like undo/redo, selection, and export. +Avoid mixing imperative writes (for example, `instance.setValue()`) with the declarative `sheets` prop. The wrapper may overwrite imperative changes on the next render cycle. Use the ref only for **reading** data and for operations like undo/redo, selection, and export. ::: ## Controlled search @@ -129,7 +129,7 @@ const [results, setResults] = useState([]); ## Undo / redo -Use `onStateChange` to track undo/redo availability, and call `undo()`/`redo()` via ref: +Use `onStateChange` to track undo/redo availability, and call `undo()`/`redo()` through the ref: ~~~tsx const ref = useRef(null); diff --git a/docs/react/types.md b/docs/react/types.md index 2f98706e..5f478856 100644 --- a/docs/react/types.md +++ b/docs/react/types.md @@ -20,7 +20,7 @@ A single cell's declarative state. All properties are optional; omitted properti |----------|------|-------------| | `value` | `string \| number` | Cell value: text, number, or formula string (prefixed with `=`). | | `css` | `string` | CSS class name(s) referencing keys in the top-level `styles` map. | -| `format` | `string` | Number format mask or alias (e.g. `"currency"`, `"#,##0.00"`). | +| `format` | `string` | Number format mask or alias (for example, `"currency"` or `"#,##0.00"`). | | `locked` | `boolean` | Whether the cell is locked (protected from editing). | | `validation` | `string \| string[]` | Data validation dropdown options. | @@ -76,7 +76,7 @@ Filter configuration for a column within a sheet. | Property | Type | Description | |----------|------|-------------| -| `cell` | `string` | Cell reference identifying the filtered column (e.g. `"A1"`). | +| `cell` | `string` | Cell reference identifying the filtered column (for example, `"A1"`). | | `rules` | `IFilterRules[]` | Filter rules to apply. Empty array clears the filter. | ## SheetSort @@ -85,7 +85,7 @@ Sort configuration for a column within a sheet. | Property | Type | Description | |----------|------|-------------| -| `cell` | `string` | Cell reference or range for the sort operation (e.g. `"B1"` or `"A1:E8"`). Use a range to sort multiple columns together while maintaining row integrity. | +| `cell` | `string` | Cell reference or range for the sort operation (for example, `"B1"` or `"A1:E8"`). Use a range to sort multiple columns together while maintaining row integrity. | | `dir` | `1 \| -1` | Sort direction: `1` = ascending, `-1` = descending. | ## SheetData @@ -96,7 +96,7 @@ Complete declarative state for a single spreadsheet sheet. |----------|------|:--------:|-------------| | `id` | `Id` | Yes | Unique sheet identifier. Must be stable across renders. | | `name` | `string` | Yes | Display name shown on the sheet tab. | -| `cells` | `Record` | Yes | Cell data keyed by cell reference (e.g. `"A1"`, `"B2"`). Only cells with non-default data need entries. | +| `cells` | `Record` | Yes | Cell data keyed by cell reference (for example, `"A1"` or `"B2"`). Only cells with non-default data need entries. | | `rows` | `Record` | No | Row configuration keyed by 0-indexed row number. | | `cols` | `Record` | No | Column configuration keyed by 0-indexed column number. | | `merged` | `MergedRange[]` | No | Merged cell ranges. | @@ -161,7 +161,7 @@ Action execution configuration passed to [`onBeforeAction`](react/events.md#acti | `prev` | `unknown` | Previous value. | | `action` | `Actions \| string` | Action identifier. | | `groupAction` | `Actions \| string` | Parent group action identifier. | -| `cell` | `string` | Cell reference (e.g. `"A1"`). | +| `cell` | `string` | Cell reference (for example, `"A1"`). | | `pageId` | `Id` | Target sheet id. | | `pageName` | `string` | Target sheet name. | | `[key: string]` | `unknown` | Additional action-specific properties. | @@ -270,7 +270,7 @@ These types are re-exported from `@dhx/ts-spreadsheet` for convenience: | `IStylesList` | Style definitions map. | | `IDataWithStyles` | Data structure with embedded styles (used by `serialize()`/`parse()`). | | `ICellInfo` | Cell information returned by widget methods. | -| `FileFormat` | File format for data loading (e.g. `"json"`, `"xlsx"`). | -| `ToolbarBlocks` | Toolbar block identifiers (e.g. `"default"`, `"undo"`, `"font"`). | +| `FileFormat` | File format for data loading (for example, `"json"` or `"xlsx"`). | +| `ToolbarBlocks` | Toolbar block identifiers (for example, `"default"`, `"undo"`, or `"font"`). | | `FilterConditions` | Enum of available filter condition types. | | `Id` | Generic identifier type (`string \| number`). | diff --git a/docs/sorting_data.md b/docs/sorting_data.md index 92190b73..2979d4f8 100644 --- a/docs/sorting_data.md +++ b/docs/sorting_data.md @@ -30,7 +30,7 @@ To sort spreadsheet data by a separate range, take the following steps: 1\. Select a range of cells in the column you want to sort the data by -2\. Choose one of the two actions: +2\. Choose one of two actions: - Right-click a cell in the selected range and choose *Sort* -> *Sort A to Z* or *Sort Z to A* diff --git a/docs/svelte_integration.md b/docs/svelte_integration.md index ac140103..90b54872 100644 --- a/docs/svelte_integration.md +++ b/docs/svelte_integration.md @@ -34,7 +34,7 @@ Go to the app directory: cd my-svelte-spreadsheet-app ~~~ -Then you need to install dependencies and run the app. For this, you need to make use of a package manager: +Then install dependencies and run the app. To do this, use a package manager: - if you use [**yarn**](https://yarnpkg.com/), you need to call the following commands: @@ -50,25 +50,25 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create a Svelte component, to add Spreadsheet into the application. Let's create a new file in the ***src/*** directory and name it ***Spreadsheet.svelte***. +Now you need to create a Svelte component to add Spreadsheet into the application. Create a new file in the *src/* directory and name it *Spreadsheet.svelte*. #### Importing source files -Open the ***Spreadsheet.svelte*** file and import Spreadsheet source files. Note that: +Open the *Spreadsheet.svelte* file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the import paths look like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the import paths look like this: ~~~html title="Spreadsheet.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -138,7 +138,7 @@ body, #### Loading data -To add data into the Spreadsheet, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. Create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -183,7 +183,7 @@ export function getData() { } ~~~ -Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: +Then open the *App.svelte* file, import data, and pass it into the newly created `` component as **props**: ~~~html {3,5,8} title="App.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -140,7 +140,7 @@ body, #### Loading data -To add data into the Spreadsheet, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -185,7 +185,7 @@ export function getData() { } ~~~ -Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**: +Then open the *App.vue* file, import data, and initialize it with the inner `data()` method. After this you can pass data into the newly created `` component as **props**: ~~~html {3,7-9,14} title="App.vue"