diff --git a/docs/angular_integration.md b/docs/angular_integration.md index 1c403a7b..40b43e43 100644 --- a/docs/angular_integration.md +++ b/docs/angular_integration.md @@ -53,7 +53,7 @@ Now you should get the DHTMLX Spreadsheet source code. First of all, stop the ap ### Step 1. Package installation -Download the [**trial Spreadsheet package**](/how_to_start/#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 steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. ### Step 2. Component creation @@ -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/) 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,11 +210,11 @@ 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](spreadsheet/api/overview/events_overview.md) to check the full list of available properties. +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. #### 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](/spreadsheet/api/overview/events_overview/). +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). Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in: @@ -279,6 +279,6 @@ platformBrowserDynamic() After that, you can start the app to see Spreadsheet loaded with data on a page. -![Spreadsheet initialization](assets/integrations/trial_spreadsheet.png) +![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). diff --git a/docs/api/eventsbus_on_method.md b/docs/api/eventsbus_on_method.md index 97139e27..7d3abedd 100644 --- a/docs/api/eventsbus_on_method.md +++ b/docs/api/eventsbus_on_method.md @@ -35,7 +35,7 @@ spreadsheet.events.on("StyleChange", function(id){ ~~~ :::info -See the full list of the Spreadsheet events [here](api/api_overview.md/#spreadsheet-events). +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. ::: diff --git a/docs/api/overview/eventbus_overview.md b/docs/api/overview/eventbus_overview.md index 4c76f9c2..5cfb089e 100644 --- a/docs/api/overview/eventbus_overview.md +++ b/docs/api/overview/eventbus_overview.md @@ -8,7 +8,7 @@ description: You can check an Event Bus methods overview of the DHTMLX JavaScrip | Name | Description | | ---------------------------------- | ----------------------------------------- | -| [](../eventsbus_detach_method.md) | @getshort(../eventsbus_detach_method.md) | -| [](../eventsbus_fire_method.md) | @getshort(../eventsbus_fire_method.md) | -| [](../eventsbus_on_method.md) | @getshort(../eventsbus_on_method.md) | +| [](api/eventsbus_detach_method.md) | @getshort(../eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(../eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(../eventsbus_on_method.md) | diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index b2fc3887..85cc579b 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -8,18 +8,18 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee | Name | Description | | :--------------------------------------------- | :---------------------------------------------------- | -| [](../spreadsheet_afteraction_event.md) | @getshort(../spreadsheet_afteraction_event.md) | -| [](../spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | -| [](../spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) | -| [](../spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) | -| [](../spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) | -| [](../spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) | -| [](../spreadsheet_afterselectionset_event.md) | @getshort(../spreadsheet_afterselectionset_event.md) | -| [](../spreadsheet_aftersheetchange_event.md) | @getshort(../spreadsheet_aftersheetchange_event.md) | -| [](../spreadsheet_beforeaction_event.md) | @getshort(../spreadsheet_beforeaction_event.md) | -| [](../spreadsheet_beforeclear_event.md) | @getshort(../spreadsheet_beforeclear_event.md) | -| [](../spreadsheet_beforeeditend_event.md) | @getshort(../spreadsheet_beforeeditend_event.md) | -| [](../spreadsheet_beforeeditstart_event.md) | @getshort(../spreadsheet_beforeeditstart_event.md) | -| [](../spreadsheet_beforefocusset_event.md) | @getshort(../spreadsheet_beforefocusset_event.md) | -| [](../spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) | -| [](../spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | \ No newline at end of file +| [](api/spreadsheet_afteraction_event.md) | @getshort(../spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(../spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(../spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(../spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(../spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(../spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(../spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(../spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | \ No newline at end of file diff --git a/docs/api/overview/export_overview.md b/docs/api/overview/export_overview.md index 5a9586b6..2b72faa1 100644 --- a/docs/api/overview/export_overview.md +++ b/docs/api/overview/export_overview.md @@ -8,5 +8,5 @@ description: You can check an Export methods overview of the DHTMLX JavaScript S | Name | Description | | ----------------------------- | ------------------------------------ | -| [](../export_json_method.md) | @getshort(../export_json_method.md) | -| [](../export_xlsx_method.md) | @getshort(../export_xlsx_method.md) | +| [](api/export_json_method.md) | @getshort(../export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(../export_xlsx_method.md) | diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index cb50cdbe..2dc43702 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -8,43 +8,43 @@ description: You can check a Methods overview of the DHTMLX JavaScript Spreadshe | Name | Description | | :------------------------------------------ | :------------------------------------------------- | -| [](../spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) | -| [](../spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) | -| [](../spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) | -| [](../spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) | -| [](../spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) | -| [](../spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) | -| [](../spreadsheet_eachcell_method.md) | @getshort(../spreadsheet_eachcell_method.md) | -| [](../spreadsheet_endedit_method.md) | @getshort(../spreadsheet_endedit_method.md) | -| [](../spreadsheet_fitcolumn_method.md) | @getshort(../spreadsheet_fitcolumn_method.md) | -| [](../spreadsheet_freezecols_method.md) | @getshort(../spreadsheet_freezecols_method.md) | -| [](../spreadsheet_freezerows_method.md) | @getshort(../spreadsheet_freezerows_method.md) | -| [](../spreadsheet_getfilter_method.md) | @getshort(../spreadsheet_getfilter_method.md) | -| [](../spreadsheet_getformat_method.md) | @getshort(../spreadsheet_getformat_method.md) | -| [](../spreadsheet_getformula_method.md) | @getshort(../spreadsheet_getformula_method.md) | -| [](../spreadsheet_getstyle_method.md) | @getshort(../spreadsheet_getstyle_method.md) | -| [](../spreadsheet_hidecols_method.md) | @getshort(../spreadsheet_hidecols_method.md) | -| [](../spreadsheet_hiderows_method.md) | @getshort(../spreadsheet_hiderows_method.md) | -| [](../spreadsheet_hidesearch_method.md) | @getshort(../spreadsheet_hidesearch_method.md) | -| [](../spreadsheet_getvalue_method.md) | @getshort(../spreadsheet_getvalue_method.md) | -| [](../spreadsheet_insertlink_method.md) | @getshort(../spreadsheet_insertlink_method.md) | -| [](../spreadsheet_islocked_method.md) | @getshort(../spreadsheet_islocked_method.md) | -| [](../spreadsheet_load_method.md) | @getshort(../spreadsheet_load_method.md) | -| [](../spreadsheet_lock_method.md) | @getshort(../spreadsheet_lock_method.md) | -| [](../spreadsheet_mergecells_method.md) | @getshort(../spreadsheet_mergecells_method.md) | -| [](../spreadsheet_parse_method.md) | @getshort(../spreadsheet_parse_method.md) | -| [](../spreadsheet_redo_method.md) | @getshort(../spreadsheet_redo_method.md) | -| [](../spreadsheet_search_method.md) | @getshort(../spreadsheet_search_method.md) | -| [](../spreadsheet_serialize_method.md) | @getshort(../spreadsheet_serialize_method.md) | -| [](../spreadsheet_setfilter_method.md) | @getshort(../spreadsheet_setfilter_method.md) | -| [](../spreadsheet_setformat_method.md) | @getshort(../spreadsheet_setformat_method.md) | -| [](../spreadsheet_setstyle_method.md) | @getshort(../spreadsheet_setstyle_method.md) | -| [](../spreadsheet_setvalidation_method.md) | @getshort(../spreadsheet_setvalidation_method.md) | -| [](../spreadsheet_setvalue_method.md) | @getshort(../spreadsheet_setvalue_method.md) | -| [](../spreadsheet_showcols_method.md) | @getshort(../spreadsheet_showcols_method.md) | -| [](../spreadsheet_showrows_method.md) | @getshort(../spreadsheet_showrows_method.md) | -| [](../spreadsheet_startedit_method.md) | @getshort(../spreadsheet_startedit_method.md) | -| [](../spreadsheet_undo_method.md) | @getshort(../spreadsheet_undo_method.md) | -| [](../spreadsheet_unfreezecols_method.md) | @getshort(../spreadsheet_unfreezecols_method.md) | -| [](../spreadsheet_unfreezerows_method.md) | @getshort(../spreadsheet_unfreezerows_method.md) | -| [](../spreadsheet_unlock_method.md) | @getshort(../spreadsheet_unlock_method.md) | \ No newline at end of file +| [](api/spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(../spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(../spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(../spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(../spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(../spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(../spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(../spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(../spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(../spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(../spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(../spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(../spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(../spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(../spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(../spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(../spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(../spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(../spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(../spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(../spreadsheet_redo_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(../spreadsheet_search_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(../spreadsheet_serialize_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(../spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(../spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(../spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(../spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(../spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(../spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(../spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(../spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(../spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(../spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(../spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(../spreadsheet_unlock_method.md) | \ No newline at end of file diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index c3b89a1f..c7d84d98 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -8,15 +8,15 @@ description: You can check a Properties overview of the DHTMLX JavaScript Spread | Name | Description | | --------------------------------------------- | ---------------------------------------------------- | -| [](../spreadsheet_colscount_config.md) | @getshort(../spreadsheet_colscount_config.md) | -| [](../spreadsheet_editline_config.md) | @getshort(../spreadsheet_editline_config.md) | -| [](../spreadsheet_exportmodulepath_config.md) | @getshort(../spreadsheet_exportmodulepath_config.md) | -| [](../spreadsheet_formats_config.md) | @getshort(../spreadsheet_formats_config.md) | -| [](../spreadsheet_importmodulepath_config.md) | @getshort(../spreadsheet_importmodulepath_config.md) | -| [](../spreadsheet_localization_config.md) | @getshort(../spreadsheet_localization_config.md) | -| [](../spreadsheet_menu_config.md) | @getshort(../spreadsheet_menu_config.md) | -| [](../spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) | -| [](../spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) | -| [](../spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | -| [](../spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | +| [](api/spreadsheet_colscount_config.md) | @getshort(../spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(../spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(../spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(../spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(../spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(../spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(../spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | diff --git a/docs/api/overview/selection_overview.md b/docs/api/overview/selection_overview.md index 8310e875..53061618 100644 --- a/docs/api/overview/selection_overview.md +++ b/docs/api/overview/selection_overview.md @@ -8,8 +8,8 @@ description: You can check a Selection methods overview of the DHTMLX JavaScript | Name | Description | | :--------------------------------------------- | :---------------------------------------------------- | -| [](../selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) | -| [](../selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) | -| [](../selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) | -| [](../selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) | -| [](../selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) | +| [](api/selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) | diff --git a/docs/api/overview/sheetmanager_overview.md b/docs/api/overview/sheetmanager_overview.md index d2247905..11498829 100644 --- a/docs/api/overview/sheetmanager_overview.md +++ b/docs/api/overview/sheetmanager_overview.md @@ -8,10 +8,10 @@ description: You can check a Sheet Manager API overview of the DHTMLX JavaScript | Name | Description | | :---------------------------------------- | :----------------------------------------------- | -| [](../sheetmanager_add_method.md) | @getshort(../sheetmanager_add_method.md) | -| [](../sheetmanager_clear_method.md) | @getshort(../sheetmanager_clear_method.md) | -| [](../sheetmanager_get_method.md) | @getshort(../sheetmanager_get_method.md) | -| [](../sheetmanager_getactive_method.md) | @getshort(../sheetmanager_getactive_method.md) | -| [](../sheetmanager_getall_method.md) | @getshort(../sheetmanager_getall_method.md) | -| [](../sheetmanager_remove_method.md) | @getshort(../sheetmanager_remove_method.md) | -| [](../sheetmanager_setactive_method.md) | @getshort(../sheetmanager_setactive_method.md) | +| [](api/sheetmanager_add_method.md) | @getshort(../sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(../sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(../sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(../sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(../sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(../sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(../sheetmanager_setactive_method.md) | diff --git a/docs/api/spreadsheet_addformula_method.md b/docs/api/spreadsheet_addformula_method.md index f67c267e..b689c852 100644 --- a/docs/api/spreadsheet_addformula_method.md +++ b/docs/api/spreadsheet_addformula_method.md @@ -52,4 +52,4 @@ spreadsheet.parse([ **Related sample:** [Spreadsheet. Add custom formula](https://snippet.dhtmlx.com/wvxdlahp) -**Related articles:** [Formulas and functions](/functions/#custom-formulas) +**Related articles:** [Formulas and functions](functions.md#custom-formulas) diff --git a/docs/api/spreadsheet_clear_method.md b/docs/api/spreadsheet_clear_method.md index 85be4732..f49a8fe6 100644 --- a/docs/api/spreadsheet_clear_method.md +++ b/docs/api/spreadsheet_clear_method.md @@ -28,6 +28,6 @@ spreadsheet.clear(); **Change log:** Added in v4.2 -**Related articles:** [Clearing spreadsheet](working_with_ssheet.md/#clearing-spreadsheet) +**Related articles:** [Clearing spreadsheet](working_with_ssheet.md#clearing-spreadsheet) **Related sample:** [Spreadsheet. Clear](https://snippet.dhtmlx.com/szmtjn72) diff --git a/docs/api/spreadsheet_freezecols_method.md b/docs/api/spreadsheet_freezecols_method.md index 5a6f7c0b..7c34a912 100644 --- a/docs/api/spreadsheet_freezecols_method.md +++ b/docs/api/spreadsheet_freezecols_method.md @@ -27,9 +27,9 @@ spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#freezingunfreezing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) -**Related API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md/) +**Related API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md) **Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) diff --git a/docs/api/spreadsheet_freezerows_method.md b/docs/api/spreadsheet_freezerows_method.md index dde77289..a4ef9116 100644 --- a/docs/api/spreadsheet_freezerows_method.md +++ b/docs/api/spreadsheet_freezerows_method.md @@ -27,9 +27,9 @@ spreadsheet.freezeRows("B2"); // the rows up to the "2" row will be fixed spreadsheet.freezeRows("sheet2!B2"); // the rows up to the "2" row in "sheet2" will be fixed ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#freezingunfreezing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) -**Related API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md/) +**Related API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) **Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) diff --git a/docs/api/spreadsheet_hidecols_method.md b/docs/api/spreadsheet_hidecols_method.md index b8dd25e9..edf46cf4 100644 --- a/docs/api/spreadsheet_hidecols_method.md +++ b/docs/api/spreadsheet_hidecols_method.md @@ -29,7 +29,7 @@ spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`showCols()`](api/spreadsheet_showcols_method.md) diff --git a/docs/api/spreadsheet_hiderows_method.md b/docs/api/spreadsheet_hiderows_method.md index e8e70070..62223315 100644 --- a/docs/api/spreadsheet_hiderows_method.md +++ b/docs/api/spreadsheet_hiderows_method.md @@ -28,7 +28,7 @@ spreadsheet.hideRows("sheet2!B2"); // the "2" row in "sheet2" will be hidden spreadsheet.hideRows("B2:C4"); // the rows from "2" to "4" will be hidden ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`showRows()`](api/spreadsheet_showrows_method.md) diff --git a/docs/api/spreadsheet_localization_config.md b/docs/api/spreadsheet_localization_config.md index 40d79fb0..8a2c811d 100644 --- a/docs/api/spreadsheet_localization_config.md +++ b/docs/api/spreadsheet_localization_config.md @@ -83,4 +83,4 @@ DHTMLX Spreadsheet uses the following characters for setting a date format: **Change log:** - Added in v5.1 -**Related article:** [Number, date, time, currency localization](spreadsheet/number_formatting.md#number-date-time-currency-localization) \ No newline at end of file +**Related article:** [Number, date, time, currency localization](number_formatting.md#number-date-time-currency-localization) \ No newline at end of file diff --git a/docs/api/spreadsheet_parse_method.md b/docs/api/spreadsheet_parse_method.md index 0aa550dc..d444f980 100644 --- a/docs/api/spreadsheet_parse_method.md +++ b/docs/api/spreadsheet_parse_method.md @@ -95,7 +95,7 @@ If you need to create a data set *for one sheet* only, specify data as an **arra - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. 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 +- `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 @@ -121,7 +121,7 @@ If you need to create a data set *for several sheets* at once, specify data as a - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. 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 + - `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 diff --git a/docs/api/spreadsheet_showcols_method.md b/docs/api/spreadsheet_showcols_method.md index 4a4fd6da..9828ff07 100644 --- a/docs/api/spreadsheet_showcols_method.md +++ b/docs/api/spreadsheet_showcols_method.md @@ -28,7 +28,7 @@ spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become vis spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`hideCols()`](api/spreadsheet_hidecols_method.md) diff --git a/docs/api/spreadsheet_showrows_method.md b/docs/api/spreadsheet_showrows_method.md index 3782aec2..172c6d24 100644 --- a/docs/api/spreadsheet_showrows_method.md +++ b/docs/api/spreadsheet_showrows_method.md @@ -28,7 +28,7 @@ spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visibl spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`hideRows()`](api/spreadsheet_hiderows_method.md) diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index 6d263e34..f23824c9 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -56,7 +56,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { }); ~~~ -Check how you can [customize the toolbar](customization.md/#toolbar). +Check how you can [customize the toolbar](customization.md#toolbar). **Change log:** diff --git a/docs/api/spreadsheet_unfreezecols_method.md b/docs/api/spreadsheet_unfreezecols_method.md index 9cda7d04..613a5cd3 100644 --- a/docs/api/spreadsheet_unfreezecols_method.md +++ b/docs/api/spreadsheet_unfreezecols_method.md @@ -27,9 +27,9 @@ spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfroz spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#freezingunfreezing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) -**Related API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md/) +**Related API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md) **Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) diff --git a/docs/api/spreadsheet_unfreezerows_method.md b/docs/api/spreadsheet_unfreezerows_method.md index 7d72afdb..fd63351b 100644 --- a/docs/api/spreadsheet_unfreezerows_method.md +++ b/docs/api/spreadsheet_unfreezerows_method.md @@ -27,9 +27,9 @@ spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md/#freezingunfreezing-rows-and-columns) +**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) -**Related API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md/) +**Related API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md) **Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) diff --git a/docs/customization.md b/docs/customization.md index e70e4b11..627615db 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -190,7 +190,7 @@ spreadsheet.toolbar.data.add({ }); ~~~ -![Custom Toolbar Button](assets/custom_toolbar_button.png) +![DHTMLX Spreadsheet toolbar with a custom Remove all button added through customization](/img/custom_toolbar_button.png) **Related sample**: [Spreadsheet. Custom toolbar button](https://snippet.dhtmlx.com/qopk6lta) @@ -224,7 +224,7 @@ spreadsheet.toolbar.data.update("undo", { icon: "fa fa-undo" }); spreadsheet.toolbar.data.update("redo", { icon: "fa fa-redo" }); ~~~ -![Custom Toolbar Icons](assets/custom_toolbar_icons.png) +![DHTMLX Spreadsheet toolbar with custom Undo and Redo icons from Font Awesome](/img/custom_toolbar_icons.png) **Related sample**: [Spreadsheet. Custom toolbar icons](https://snippet.dhtmlx.com/mvnx43o0) @@ -343,7 +343,7 @@ spreadsheet.menu.data.add({ }); ~~~ -![Custom Menu Item](assets/custom_menuitem.png) +![DHTMLX Spreadsheet menu with a custom Validate option for checking numbers](/img/custom_menuitem.png) **Related sample**: [Spreadsheet. Menu data](https://snippet.dhtmlx.com/2mlv2qaz) @@ -356,7 +356,7 @@ spreadsheet.menu.data.update("undo", { icon: "fa fa-undo" }); spreadsheet.menu.data.update("redo", { icon: "fa fa-redo" }); ~~~ -![Custom Menu Icons](assets/custom_menu_icons.png) +![DHTMLX Spreadsheet menu with custom Undo and Redo icons from Font Awesome](/img/custom_menu_icons.png) ### Deleting controls @@ -411,7 +411,7 @@ spreadsheet.contextMenu.data.add({ }); ~~~ -![Custom Context Menu Item](assets/custom_context_menuitem.png) +![DHTMLX Spreadsheet context menu with a custom Paint format option](/img/custom_context_menuitem.png) **Related sample**: [Spreadsheet. Context menu](https://snippet.dhtmlx.com/atl9gd4h) @@ -423,7 +423,7 @@ In the example below the default icons of the Lock menuItem is changed to the Fo spreadsheet.contextMenu.data.update("lock", { icon: "fa fa-key" }); ~~~ -![Custom Context Menu Icon](assets/custom_context_icon.png) +![DHTMLX Spreadsheet context menu with a custom Lock icon from Font Awesome](/img/custom_context_icon.png) ### Deleting controls diff --git a/docs/data_formatting.md b/docs/data_formatting.md index eeec21da..8d1fd75f 100644 --- a/docs/data_formatting.md +++ b/docs/data_formatting.md @@ -10,7 +10,7 @@ description: You can learn about data formatting in the documentation of the DHT The toolbar of DHTMLX Spreadsheet contains several sections with buttons for modifying the style of data in a cell. -![Color](assets/color.png) +![DHTMLX Spreadsheet toolbar color and text style buttons for text color, background, bold, and italic](/img/color.png) What you can do: @@ -31,11 +31,11 @@ To align data in a cell horizontally, take the following steps: - Click the "Horizontal align" button in the toolbar and pick *Left*, *Center*, or *Right* -![Alignment](assets/align.png) +![DHTMLX Spreadsheet toolbar with the Horizontal align dropdown showing Left, Center, and Right](/img/align.png) - Or go to: *Format* -> *Horizontal align* -> Pick *Left*, *Center*, or *Right* in the menu -![Horizontal alignment](assets/horizontal_alignment.png) +![DHTMLX Spreadsheet Format menu with the Horizontal align submenu options](/img/horizontal_alignment.png) ### Vertical alignment @@ -47,11 +47,11 @@ To align data in a cell vertically, take the following steps: - Click the "Vertical align" button in the toolbar and pick *Top*, *Center*, or *Bottom* -![Vertical alignment](assets/vertical_align.png) +![DHTMLX Spreadsheet toolbar with the Vertical align dropdown showing Top, Center, and Bottom](/img/vertical_align.png) - Or go to: *Format* -> *Vertical align* -> Pick *Top*, *Center*, or *Bottom* in the menu -![Vertical alignment](assets/vertical_alignment.png) +![DHTMLX Spreadsheet Format menu with the Vertical align submenu options](/img/vertical_alignment.png) ### Wrap text in a cell @@ -63,11 +63,11 @@ You can wrap text in cells in the following way: - Click the "Text wrapping" button in the toolbar and pick *Clip* or *Wrap* -![Wrap text](assets/wrap.png) +![DHTMLX Spreadsheet toolbar with the Text wrapping dropdown showing Clip and Wrap](/img/wrap.png) - Or go to: *Format* -> *Text wrapping* -> Pick *Clip* or *Wrap* in the menu -![Wrap text](assets/text_wrapping.png) +![DHTMLX Spreadsheet Format menu with the Text wrapping submenu showing Clip and Wrap](/img/text_wrapping.png) :::tip When you change the width of the column, text wrapping adjusts automatically. @@ -83,7 +83,7 @@ To clear styles applied to data in a cell, or values entered into cells, or remo - Use the **Clear** button in the toolbar. - Choose the desired option in the drop-down list: -![Clear button](assets/clear_button.png) +![DHTMLX Spreadsheet toolbar with the Clear button dropdown for clearing values or styles](/img/clear_button.png) 2\. via the context menu of a cell: @@ -91,7 +91,7 @@ To clear styles applied to data in a cell, or values entered into cells, or remo - Right-click the selection to call the context menu. - Choose the **Clear** option and then select one of the options in the drop-down list: -![Clear option](assets/clear_option.png) +![DHTMLX Spreadsheet context menu with the Clear option for clearing value, styles, or all](/img/clear_option.png) ## Styled borders for cells @@ -102,11 +102,11 @@ You can add a styled border(s) for a cell or a group of cells. - Select the necessary cell or a group of cells to set a styled border(s) for - Click the **Border** button in the toolbar and choose the desired type of the border, its color and style -![Styled border](assets/styled_cell_border.png) +![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) ### 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 -![Clear border](assets/clear_cells_border.png) \ No newline at end of file +![DHTMLX Spreadsheet Border toolbar button with the Clear borders option highlighted](/img/clear_cells_border.png) \ No newline at end of file diff --git a/docs/data_search.md b/docs/data_search.md index f166540e..de9a48af 100644 --- a/docs/data_search.md +++ b/docs/data_search.md @@ -11,4 +11,4 @@ To open a search bar, use one of two options: - Set focus on any cell and press **Ctrl (Cmd) + F** - Or go to: *Data* -> *Search* -![Data search](assets/search_data.png) \ No newline at end of file +![DHTMLX Spreadsheet search bar with a text input for finding data](/img/search_data.png) \ No newline at end of file diff --git a/docs/excel_import_export.md b/docs/excel_import_export.md index 4da8939b..c844a5a4 100644 --- a/docs/excel_import_export.md +++ b/docs/excel_import_export.md @@ -12,13 +12,13 @@ You can load data from an Excel file into Spreadsheet. There is quite a simple w 1\. Click the **Import** button in the toolbar and select *Microsoft Excel (.xlsx)* -![Import xlsx](assets/import_xlsx.png) +![DHTMLX Spreadsheet toolbar with the Import button for Microsoft Excel XLSX files](/img/import_xlsx.png) or: Go to: *File -> Import As... -> Microsoft Excel (.xlsx)* in the menu -![File import](assets/file_import.png) +![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. @@ -28,12 +28,12 @@ The data you've entered into Spreadsheet can be exported to an Excel file. Compl 1\. Click the **Export** button in the toolbar: -![Export_xlsx](assets/export_xlsx.png) +![DHTMLX Spreadsheet toolbar with the Export button for saving to Microsoft Excel XLSX](/img/export_xlsx.png) or: Go to: *File -> Download As... -> Microsoft Excel (.xlsx)* in the menu -![File export](assets/file_export.png) +![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. diff --git a/docs/filtering_data.md b/docs/filtering_data.md index f94c94af..18a5ab66 100644 --- a/docs/filtering_data.md +++ b/docs/filtering_data.md @@ -12,11 +12,11 @@ To activate the filtering functionality, you can use either of two ways: - Set focus on a cell or select a range of cells and click the **Filter** button in the toolbar -![Filter via toolbar](assets/filter_button.png) +![DHTMLX Spreadsheet toolbar with the Filter button to enable data filtering](/img/filter_button.png) - Set focus on a cell or select a range of cells and go to: *Data -> Filter* in the menu -![Filter via menu](assets/filter_menu.png) +![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. @@ -28,13 +28,13 @@ After that, a **filter** icon appears on the right side of the header of each co - Specify the filter criterion and click **Apply** -![Filter by condition](assets/filter_by_condition.png) +![DHTMLX Spreadsheet column filter dropdown with comparison operators such as Greater than](/img/filter_by_condition.png) ### Clearing a filter To clear a filter, click the **filter** icon in the column header, select _By condition: **None**_, and then click **Apply**. -![Clear filter](assets/clear_filter_bycondition.png) +![DHTMLX Spreadsheet filter dialog with the By condition None option for clearing filters](/img/clear_filter_bycondition.png) ## Filtering by values @@ -42,7 +42,7 @@ To clear a filter, click the **filter** icon in the column header, select _By co - Click the **Unselect all** button -![Filter by values](assets/unselect_all_button.png) +![DHTMLX Spreadsheet column filter with the Unselect all button and value checkboxes](/img/unselect_all_button.png) - Select the check boxes for the values you want to show and click **Apply** @@ -50,7 +50,7 @@ To clear a filter, click the **filter** icon in the column header, select _By co To clear a filter, click the **filter** icon in the column header, click the **Select all** button, and then click **Apply**. -![Clear filter](assets/clear_filter_by_values.png) +![DHTMLX Spreadsheet column filter dialog with the Select all button for clearing value filters](/img/clear_filter_by_values.png) ## Removing filters diff --git a/docs/functions.md b/docs/functions.md index af45830a..2baecfb5 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -1446,11 +1446,11 @@ var formula = spreadsheet.getFormula("B2"); When you enter a formula, a popup with description of the function and its parameters appears. -![Popup with formula description](assets/formula_popup.png) +![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). -You can modify the default locale for the popup with formula parameters and add a custom locale. Check the details in the [Localization](localization.md/#default-locale-for-formulas) guide. +You can modify the default locale for the popup with formula parameters and add a custom locale. Check the details in the [Localization](localization.md#default-locale-for-formulas) guide. ## Custom formulas diff --git a/docs/guides.md b/docs/guides.md index ee2293ea..b921481e 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -33,7 +33,7 @@ Shows the ways of loading data into Spreadsheet, handling events and using main ### Frameworks & integrations -- [React Spreadsheet](/react/) - official React component with props, events, and TypeScript support +- [React Spreadsheet](react.md) - official React component with props, events, and TypeScript support - [Integration with Angular](angular_integration.md) - GitHub demo of using Spreadsheet in an Angular app - [Integration with Svelte](svelte_integration.md) - GitHub demo of using Spreadsheet in a Svelte app - [Integration with Vue.js](vuejs_integration.md) - GitHub demo of using Spreadsheet in a Vue app diff --git a/docs/how_to_start.md b/docs/how_to_start.md index 5eb4b4f1..a84a258a 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -8,7 +8,7 @@ description: You can learn how to start with the DHTMLX JavaScript Spreadsheet l 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. -![Spreadsheet init](assets/how_to_start.png) +![DHTMLX Spreadsheet initialized with a sample data table in a browser window](/img/how_to_start.png) ## Step 1. Including source files @@ -142,6 +142,6 @@ spreadsheet.parse(data); 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. -- [](index.md) +- [Spreadsheet overview](/) - [](guides.md) - [](api/api_overview.md) diff --git a/docs/index.md b/docs/index.md index f5de9de2..5f8699ec 100644 --- a/docs/index.md +++ b/docs/index.md @@ -10,7 +10,7 @@ description: You can have an overview of the JavaScript Spreadsheet library in t 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. :::tip -There is a [User Guide](guides/#user-guides) provided to make work with Spreadsheet easy for your end users +There is a [User Guide](guides.md#user-guides) provided to make work with Spreadsheet easy for your end users ::: ## Spreadsheet structure @@ -19,7 +19,7 @@ There is a [User Guide](guides/#user-guides) provided to make work with Spreadsh The **Toolbar** section is rather flexible. It contains several default blocks of controls: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or set your own order of the blocks. -![Spreadsheet Toolbar](assets/overview_toolbar.png) +![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. @@ -30,7 +30,7 @@ The **editing line** can be used for two purposes: - to edit the content of the selected cell - to control changes made in the currently edited cell -![Spreadsheet Editing Line](assets/overview_editline.png) +![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). @@ -38,13 +38,13 @@ You can switch the editing line off, if necessary via the corresponding [configu **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. -![Spreadsheet Grid](assets/spreadsheet_init.png) +![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. -![Spreadsheet Context Menu](assets/overview_contextmenu.png) +![DHTMLX Spreadsheet context menu with Lock, Clear, Columns, Rows, Sort, and Insert link options](/img/overview_contextmenu.png) The [structure of Context menu is customizable](customization.md#context-menu) as well. You can add custom controls, update the controls' configuration and remove unnecessary controls. @@ -54,7 +54,7 @@ The **Menu** section contains several blocks that combine most frequently used o By default the **Menu** section is hidden, but you can switch it on via the related [configuration option](configuration.md#menu). -![Spreadsheet Menu](assets/overview_menu.png) +![DHTMLX Spreadsheet menu section combining frequently used toolbar and context menu options](/img/overview_menu.png) You can [modify the structure of the menu](customization.md#menu) by using custom controls, updating the controls' configuration and removing unnecessary controls. diff --git a/docs/initialization.md b/docs/initialization.md index e20d67c9..9c3879b4 100644 --- a/docs/initialization.md +++ b/docs/initialization.md @@ -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 in the [Spreadsheet API overview](api/api_overview.md#spreadsheet-properties) article. 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 8ebafbba..b3a04f51 100644 --- a/docs/loading_data.md +++ b/docs/loading_data.md @@ -205,11 +205,11 @@ It is possible to load a file in the Excel format with the **.xlsx** extension i - Menu: File -> Import as..-> Microsoft Excel(.xlsx) -![Import from Excel menu](assets/file_import.png) +![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) - Toolbar: Import -> Microsoft Excel(.xlsx) -![Import from Excel toolbar](assets/import_xlsx.png) +![DHTMLX Spreadsheet toolbar with the Import button for Microsoft Excel XLSX files](/img/import_xlsx.png) #### How to import data @@ -292,11 +292,11 @@ DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into a - Menu: File -> Download as..-> Microsoft Excel(.xlsx) -![Export to Excel menu](assets/file_export.png) +![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) - Toolbar: Export -> Microsoft Excel(.xlsx) -![Export from Excel toolbar](assets/export_xlsx.png) +![DHTMLX Spreadsheet toolbar with the Export button for saving to Microsoft Excel XLSX](/img/export_xlsx.png) #### How to export data diff --git a/docs/localization.md b/docs/localization.md index 39e928e0..ad7f9c20 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -218,7 +218,7 @@ const en = { }; ~~~ -[Check the full default locale for formulas](/formulas_locale/). +[Check the full default locale for formulas](formulas_locale.md). **Related sample**: [Spreadsheet. Localization](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) diff --git a/docs/merge_cells.md b/docs/merge_cells.md index 3efdb6cb..0262d96c 100644 --- a/docs/merge_cells.md +++ b/docs/merge_cells.md @@ -14,7 +14,7 @@ To merge cells, take the steps below: 2\. Click the **Merge** button in the toolbar -![Merge cells via toolbar](assets/merge_cells.png) +![DHTMLX Spreadsheet toolbar with the Merge button for merging a range of cells](/img/merge_cells.png) or @@ -22,7 +22,7 @@ or 2\. Go to: *Format -> Merge* in the menu -![Merge cells via menu](assets/merge_cells_via_menu.png) +![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. @@ -36,7 +36,7 @@ To split a merged cell, take the steps below: 2\. Click the **Unmerge** button in the toolbar -![Split cells via toolbar](assets/unmerge_cells.png) +![DHTMLX Spreadsheet toolbar with the Unmerge button for splitting merged cells](/img/unmerge_cells.png) or @@ -44,4 +44,4 @@ or 2\. Go to: *Format -> Unmerge* in the menu -![Split cells via menu](assets/unmerge_cells_via_menu.png) \ No newline at end of file +![DHTMLX Spreadsheet Format menu with the Unmerge option for splitting merged cells](/img/unmerge_cells_via_menu.png) \ No newline at end of file diff --git a/docs/migration.md b/docs/migration.md index a542e59b..5d120eb5 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -21,7 +21,7 @@ The following properties of `ISpreadsheetConfig` are deprecated and removed. Che The following methods of the `ISpreadsheet` instance are deprecated and removed. -Use the new [`sheets` module (Sheet Manager) API](/api/overview/sheetmanager_overview/) instead: +Use the new [`sheets` module (Sheet Manager) API](api/overview/sheetmanager_overview.md) instead:
@@ -100,7 +100,7 @@ spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfroz spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen ~~~ -- new action is added: [`toggleFreeze`](api/overview/actions_overview.md/#list-of-actions) +- new action is added: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) ~~~jsx title="From v5.2" // using the `toggleFreeze` action with the beforeAction/afterAction events @@ -216,7 +216,7 @@ At the moment, there is a set of events which must be used in an old way as they ## 4.1 -> 4.2 -In v4.2, the [Align](customization.md/#default-controls) block of the Spreadsheet toolbar is divided into two sub-blocks: Horizontal align and Vertical align. Thus, the list of ids of the default controls of the Align block is changed and extended: +In v4.2, the [Align](customization.md#default-controls) block of the Spreadsheet toolbar is divided into two sub-blocks: Horizontal align and Vertical align. Thus, the list of ids of the default controls of the Align block is changed and extended: `Before v4.2`: @@ -242,7 +242,7 @@ The **Vertical align** sub-block of the **Align** block: ### Localization -Note, that the [locale options](localization.md/) for the **Align** block have been also updated: +Note, that the [locale options](localization.md) for the **Align** block have been also updated: `Before v4.2`: diff --git a/docs/number_formatting.md b/docs/number_formatting.md index a1a61abd..43a5c321 100644 --- a/docs/number_formatting.md +++ b/docs/number_formatting.md @@ -8,7 +8,7 @@ description: You can study the developer guide about number formatting in the do DHTMLX Spreadsheet supports number formatting that you can apply for numeric values in cells. -![Number format](assets/number_format_options.png) +![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. @@ -69,7 +69,7 @@ spreadsheet.parse({ }); ~~~ -Check [the full list of available characters used to make formats](/api/spreadsheet_localization_config/#characters-for-setting-date-format). +Check [the full list of available characters used to make formats](api/spreadsheet_localization_config.md#characters-for-setting-date-format). ## Time format @@ -96,7 +96,7 @@ spreadsheet.parse({ ## Number, date, time, currency localization -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`](spreadsheet/api/spreadsheet_localization_config.md) property. It is an object with the following properties: +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 `"." | "," | " " | ""` diff --git a/docs/number_formatting_guide.md b/docs/number_formatting_guide.md index 7524857d..1b7b307d 100644 --- a/docs/number_formatting_guide.md +++ b/docs/number_formatting_guide.md @@ -54,8 +54,8 @@ Follow the steps below to apply a particular number format to Spreadsheet data v - Select a cell or several cells that you want to format. - Click the **Number format** button: -![Number format button](assets/number_format_button.png) +![DHTMLX Spreadsheet toolbar with the Number format button for applying numeric formatting](/img/number_format_button.png) - Select the format you want to apply among the suggested options: -![Number format](assets/number_format_options.png) +![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) diff --git a/docs/react/events.md b/docs/react/events.md index c6aceae7..8b2c5893 100644 --- a/docs/react/events.md +++ b/docs/react/events.md @@ -9,7 +9,7 @@ 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/) for the imperative API. +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. ::: ## Action events @@ -18,8 +18,8 @@ Fired for any user action (cell edits, formatting, structural changes, etc.). | Prop | Cancellable | Description | |------|:-----------:|-------------| -| `onBeforeAction` | Yes | Fires before any user action executes. Return `false` to cancel. Handler: [`BeforeActionHandler`](/react/types#handler-type-aliases). JS API: [`beforeAction`](/api/spreadsheet_beforeaction_event/). | -| `onAfterAction` | No | Fires after any user action completes. Handler: [`AfterActionHandler`](/react/types#handler-type-aliases). JS API: [`afterAction`](/api/spreadsheet_afteraction_event/). | +| `onBeforeAction` | Yes | Fires before any user action executes. Return `false` to cancel. Handler: [`BeforeActionHandler`](react/types.md#handler-type-aliases). JS API: [`beforeAction`](api/spreadsheet_beforeaction_event.md). | +| `onAfterAction` | No | Fires after any user action completes. Handler: [`AfterActionHandler`](react/types.md#handler-type-aliases). JS API: [`afterAction`](api/spreadsheet_afteraction_event.md). | **Example: Block row deletion** @@ -51,12 +51,12 @@ Fired when the cell selection or focus changes. | Prop | Cancellable | Description | |------|:-----------:|-------------| -| `onBeforeSelectionSet` | Yes | Fires before a cell is added to the selection. Handler: [`BeforeCellHandler`](/react/types#handler-type-aliases). JS API: [`beforeSelectionSet`](/api/spreadsheet_beforeselectionset_event/). | -| `onAfterSelectionSet` | No | Fires after a cell is added to the selection. Handler: [`AfterCellHandler`](/react/types#handler-type-aliases). JS API: [`afterSelectionSet`](/api/spreadsheet_afterselectionset_event/). | -| `onBeforeSelectionRemove` | Yes | Fires before a cell is removed from the selection. Handler: [`BeforeCellHandler`](/react/types#handler-type-aliases). | -| `onAfterSelectionRemove` | No | Fires after a cell is removed from the selection. Handler: [`AfterCellHandler`](/react/types#handler-type-aliases). | -| `onBeforeFocusSet` | Yes | Fires before the focused cell changes. Handler: [`BeforeCellHandler`](/react/types#handler-type-aliases). JS API: [`beforeFocusSet`](/api/spreadsheet_beforefocusset_event/). | -| `onAfterFocusSet` | No | Fires after the focused cell changes. Handler: [`AfterCellHandler`](/react/types#handler-type-aliases). JS API: [`afterFocusSet`](/api/spreadsheet_afterfocusset_event/). | +| `onBeforeSelectionSet` | Yes | Fires before a cell is added to the selection. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSelectionSet`](api/spreadsheet_beforeselectionset_event.md). | +| `onAfterSelectionSet` | No | Fires after a cell is added to the selection. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterSelectionSet`](api/spreadsheet_afterselectionset_event.md). | +| `onBeforeSelectionRemove` | Yes | Fires before a cell is removed from the selection. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). | +| `onAfterSelectionRemove` | No | Fires after a cell is removed from the selection. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). | +| `onBeforeFocusSet` | Yes | Fires before the focused cell changes. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeFocusSet`](api/spreadsheet_beforefocusset_event.md). | +| `onAfterFocusSet` | No | Fires after the focused cell changes. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterFocusSet`](api/spreadsheet_afterfocusset_event.md). | **Example: Track selected cell** @@ -77,10 +77,10 @@ Fired when cell editing begins or ends. | Prop | Cancellable | Description | |------|:-----------:|-------------| -| `onBeforeEditStart` | Yes | Fires before cell editing begins. Handler: [`BeforeEditHandler`](/react/types#handler-type-aliases). JS API: [`beforeEditStart`](/api/spreadsheet_beforeeditstart_event/). | -| `onAfterEditStart` | No | Fires after cell editing begins. Handler: [`AfterEditHandler`](/react/types#handler-type-aliases). JS API: [`afterEditStart`](/api/spreadsheet_aftereditstart_event/). | -| `onBeforeEditEnd` | Yes | Fires before cell editing ends. Return `false` to cancel and keep editing. Handler: [`BeforeEditHandler`](/react/types#handler-type-aliases). JS API: [`beforeEditEnd`](/api/spreadsheet_beforeeditend_event/). | -| `onAfterEditEnd` | No | Fires after cell editing ends and the value is committed. Handler: [`AfterEditHandler`](/react/types#handler-type-aliases). JS API: [`afterEditEnd`](/api/spreadsheet_aftereditend_event/). | +| `onBeforeEditStart` | Yes | Fires before cell editing begins. Handler: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditStart`](api/spreadsheet_beforeeditstart_event.md). | +| `onAfterEditStart` | No | Fires after cell editing begins. Handler: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditStart`](api/spreadsheet_aftereditstart_event.md). | +| `onBeforeEditEnd` | Yes | Fires before cell editing ends. Return `false` to cancel and keep editing. Handler: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditEnd`](api/spreadsheet_beforeeditend_event.md). | +| `onAfterEditEnd` | No | Fires after cell editing ends and the value is committed. Handler: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditEnd`](api/spreadsheet_aftereditend_event.md). | **Example: Validate before committing** @@ -101,8 +101,8 @@ Fired when the active sheet tab changes. | Prop | Cancellable | Description | |------|:-----------:|-------------| -| `onBeforeSheetChange` | Yes | Fires before the active sheet changes. Handler: [`BeforeSheetHandler`](/react/types#handler-type-aliases). JS API: [`beforeSheetChange`](/api/spreadsheet_beforesheetchange_event/). | -| `onAfterSheetChange` | No | Fires after the active sheet changes. Handler: [`AfterSheetHandler`](/react/types#handler-type-aliases). JS API: [`afterSheetChange`](/api/spreadsheet_aftersheetchange_event/). | +| `onBeforeSheetChange` | Yes | Fires before the active sheet changes. Handler: [`BeforeSheetHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSheetChange`](api/spreadsheet_beforesheetchange_event.md). | +| `onAfterSheetChange` | No | Fires after the active sheet changes. Handler: [`AfterSheetHandler`](react/types.md#handler-type-aliases). JS API: [`afterSheetChange`](api/spreadsheet_aftersheetchange_event.md). | **Example: Track active sheet** @@ -121,7 +121,7 @@ Fired when spreadsheet data is loaded. | Prop | Description | |------|-------------| -| `onAfterDataLoaded` | Fires after data loading completes (via `sheets` or `loadUrl`). JS API: [`afterDataLoaded`](/api/spreadsheet_afterdataloaded_event/). | +| `onAfterDataLoaded` | Fires after data loading completes (via `sheets` or `loadUrl`). JS API: [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md). | **Example: Show loading state** @@ -140,7 +140,7 @@ Fired during user input in cells or the formula bar. | Prop | Description | |------|-------------| -| `onGroupFill` | Fires during auto-fill (drag-fill) operations. Handler: `(focusedCell: string, selectedCell: string) => void`. JS API: [`groupFill`](/api/spreadsheet_groupfill_event/). | +| `onGroupFill` | Fires during auto-fill (drag-fill) operations. Handler: `(focusedCell: string, selectedCell: string) => void`. JS API: [`groupFill`](api/spreadsheet_groupfill_event.md). | | `onEditLineInput` | Fires on input in the formula/edit line. Handler: `(value: string) => void`. | | `onCellInput` | Fires on input in a cell during editing. Handler: `(cell: string, value: string) => void`. | diff --git a/docs/react/index.md b/docs/react/index.md index 2746c4be..c435d5b5 100644 --- a/docs/react/index.md +++ b/docs/react/index.md @@ -10,8 +10,8 @@ The official declarative React wrapper for DHTMLX Spreadsheet. Build spreadsheet ## Get started -- [Installation](/react/installation/) - install the evaluation or commercial package -- [Quick start](/react/quick-start/) - build your first spreadsheet app step by step +- [Installation](react/installation.md) - install the evaluation or commercial package +- [Quick start](react/quick-start.md) - build your first spreadsheet app step by step - [Online examples](https://dhtmlx.com/react/demos/spreadsheet/) - check live demos of React Spreadsheet features :::info @@ -20,26 +20,26 @@ You can also explore the [GitHub demo repository](https://github.com/DHTMLX/reac ## API reference -- [Props reference](/react/props/) - all component props with types and defaults -- [Events reference](/react/events/) - event callback props grouped by category -- [Types reference](/react/types/) - TypeScript interfaces, enums, and type aliases +- [Props reference](react/props.md) - all component props with types and defaults +- [Events reference](react/events.md) - event callback props grouped by category +- [Types reference](react/types.md) - TypeScript interfaces, enums, and type aliases ## Data model -The [`sheets`](/react/props#data-props) prop is the single source of truth for all spreadsheet data. Each sheet is a [`SheetData`](/react/types#sheetdata) object containing cells, row/column configuration, merged ranges, frozen panes, filters, and sorting. +The [`sheets`](react/props.md#data-props) prop is the single source of truth for all spreadsheet data. Each sheet is a [`SheetData`](react/types.md#sheetdata) object containing cells, row/column configuration, merged ranges, frozen panes, filters, and sorting. ## State management Learn how to keep spreadsheet data in sync with your application state: -- [State management basics](/react/state/state-management-basics/) - controlled props, event callbacks, the ref escape hatch -- [Redux toolkit](/react/state/redux-toolkit/) - step-by-step integration guide +- [State management basics](react/state/state-management-basics.md) - controlled props, event callbacks, the ref escape hatch +- [Redux toolkit](react/state/redux-toolkit.md) - step-by-step integration guide ## Framework integrations -- [Next.js](/react/nextjs/) - using React Spreadsheet with Next.js App Router +- [Next.js](react/nextjs.md) - using React Spreadsheet with Next.js App Router ## Theming and localization -- [Themes](/react/themes/) - built-in themes and custom CSS overrides -- [Localization](/react/localization/) - UI translations and number/date formatting +- [Themes](react/themes.md) - built-in themes and custom CSS overrides +- [Localization](react/localization.md) - UI translations and number/date formatting diff --git a/docs/react/installation.md b/docs/react/installation.md index 1c57f191..0afa317b 100644 --- a/docs/react/installation.md +++ b/docs/react/installation.md @@ -81,4 +81,4 @@ TypeScript type definitions are bundled with the package. No additional `@types/ ## Next steps -- [Quick start](/react/quick-start/) - build your first spreadsheet app step by step +- [Quick start](react/quick-start.md) - build your first spreadsheet app step by step diff --git a/docs/react/localization.md b/docs/react/localization.md index eb3dcff7..1a5de5e8 100644 --- a/docs/react/localization.md +++ b/docs/react/localization.md @@ -19,7 +19,7 @@ These props are independent: you can use either or both. ## UI localization (spreadsheetLocale) -The `spreadsheetLocale` prop accepts a [`SpreadsheetLocale`](/react/types#spreadsheetlocale) object with two properties: +The `spreadsheetLocale` prop accepts a [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) object with two properties: - `locale` - a `Record` of UI string overrides - `formulas` - a `Record` of localized formula names grouped by category @@ -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/) configuration property. +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. ~~~tsx @@ -38,9 +38,9 @@ These props are applied immediately without destroying the widget. No data loss | Prop | Type | Description | |------|------|-------------| -| `rowsCount` | `number` | Number of rows in the grid. See JS API: [`rowsCount`](/api/spreadsheet_rowscount_config/). | -| `colsCount` | `number` | Number of columns in the grid. See JS API: [`colsCount`](/api/spreadsheet_colscount_config/). | -| `readonly` | `boolean` | Enable read-only mode. See JS API: [`readonly`](/api/spreadsheet_readonly_config/). | +| `rowsCount` | `number` | Number of rows in the grid. See JS API: [`rowsCount`](api/spreadsheet_rowscount_config.md). | +| `colsCount` | `number` | Number of columns in the grid. See JS API: [`colsCount`](api/spreadsheet_colscount_config.md). | +| `readonly` | `boolean` | Enable read-only mode. See JS API: [`readonly`](api/spreadsheet_readonly_config.md). | ## Data props @@ -48,7 +48,7 @@ The `sheets` prop is the single source of truth for all spreadsheet content. Cha | Prop | Type | Description | |------|------|-------------| -| `sheets` | [`SheetData[]`](/react/types#sheetdata) | The single source of truth for all spreadsheet data. Each entry represents a sheet with its cells, structure, and metadata. Changes are applied incrementally. | +| `sheets` | [`SheetData[]`](react/types.md#sheetdata) | The single source of truth for all spreadsheet data. Each entry represents a sheet with its cells, structure, and metadata. Changes are applied incrementally. | | `styles` | `Record>` | Shared CSS style definitions referenced by `CellData.css`. Keys are class names, values are CSS property maps. See [Styles example](#styles-example). | | `activeSheet` | `Id` | Id of the active (visible) sheet. Changing this switches the displayed sheet tab. | @@ -62,7 +62,7 @@ Controls the search bar state from outside the component. Use it together with ` | Prop | Type | Description | |------|------|-------------| -| `search` | [`SearchConfig`](/react/types#searchconfig) | Controlled search state. Pass a `SearchConfig` object to trigger/update search. Pass `undefined` to dismiss the search bar. | +| `search` | [`SearchConfig`](react/types.md#searchconfig) | Controlled search state. Pass a `SearchConfig` object to trigger/update search. Pass `undefined` to dismiss the search bar. | ## Data loading props @@ -79,7 +79,7 @@ Controls the visual theme applied to the spreadsheet. Since `theme` is a runtime | Prop | Type | Description | |------|------|-------------| -| `theme` | [`SpreadsheetTheme`](/react/types#spreadsheettheme) | Color theme. Built-in values: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. Also accepts custom theme name strings. See [Themes](/react/themes/). | +| `theme` | [`SpreadsheetTheme`](react/types.md#spreadsheettheme) | Color theme. Built-in values: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. Also accepts custom theme name strings. See [Themes](react/themes.md). | ## Container props diff --git a/docs/react/quick-start.md b/docs/react/quick-start.md index 9eaf99ec..8ff50ff9 100644 --- a/docs/react/quick-start.md +++ b/docs/react/quick-start.md @@ -21,7 +21,7 @@ cd my-spreadsheet-app npm install @dhtmlx/trial-react-spreadsheet ~~~ -For other package variants, see [Installation](/react/installation/). +For other package variants, see [Installation](react/installation.md). ## Create demo data @@ -99,9 +99,9 @@ Open the URL shown in your terminal (typically `http://localhost:5173`) to see t ## Related API and guides -- [Props reference](/react/props/) - configure the spreadsheet behavior -- [Events reference](/react/events/) - respond to user actions -- [Types reference](/react/types/) - TypeScript interfaces and enums -- [Data & state management](/react/state/) - manage spreadsheet data in application state +- [Props reference](react/props.md) - configure the spreadsheet behavior +- [Events reference](react/events.md) - respond to user actions +- [Types reference](react/types.md) - TypeScript interfaces and enums +- [Data & state management](react/state.md) - manage spreadsheet data in application state You can also explore the [GitHub demo repository](https://github.com/DHTMLX/react-spreadsheet-examples) for a complete working example. diff --git a/docs/react/state/index.md b/docs/react/state/index.md index aa1bc9d0..6d0b4faf 100644 --- a/docs/react/state/index.md +++ b/docs/react/state/index.md @@ -10,12 +10,12 @@ This section covers patterns for managing spreadsheet data in sync with your app ## Start here -- [State management basics](/react/state/state-management-basics/) - core patterns: controlled props, event callbacks, the ref escape hatch, and performance tips +- [State management basics](react/state/state-management-basics.md) - core patterns: controlled props, event callbacks, the ref escape hatch, and performance tips ## State library guides -- [Redux Toolkit](/react/state/redux-toolkit/) - step-by-step integration with Redux Toolkit +- [Redux Toolkit](react/state/redux-toolkit.md) - step-by-step integration with Redux Toolkit ## Key concept -The `sheets` prop is the **single source of truth** for all spreadsheet data. Pass an array of [`SheetData`](/react/types#sheetdata) objects, and the wrapper diffs your data against the current widget state, applying only the changes. Use immutable updates (spread operators, functional `setState` updaters) so React can detect changes efficiently. +The `sheets` prop is the **single source of truth** for all spreadsheet data. Pass an array of [`SheetData`](react/types.md#sheetdata) objects, and the wrapper diffs your data against the current widget state, applying only the changes. Use immutable updates (spread operators, functional `setState` updaters) so React can detect changes efficiently. diff --git a/docs/react/state/redux-toolkit.md b/docs/react/state/redux-toolkit.md index 3ccbc245..72741ef5 100644 --- a/docs/react/state/redux-toolkit.md +++ b/docs/react/state/redux-toolkit.md @@ -11,7 +11,7 @@ This tutorial shows how to manage spreadsheet data in a Redux Toolkit store. ## Prerequisites - Familiarity with React, TypeScript, and [Redux Toolkit](https://redux-toolkit.js.org/) basics -- Completed the [State management basics](/react/state/state-management-basics/) guide +- Completed the [State management basics](react/state/state-management-basics.md) guide ## Setup @@ -178,6 +178,6 @@ const getCellValue = (cell: string) => { ## Related API and guides -- [Props reference](/react/props/) - all component props -- [Events reference](/react/events/) - event callback props -- [State management basics](/react/state/state-management-basics/) - core patterns +- [Props reference](react/props.md) - all component props +- [Events reference](react/events.md) - event callback props +- [State management basics](react/state/state-management-basics.md) - core patterns diff --git a/docs/react/state/state-management-basics.md b/docs/react/state/state-management-basics.md index 6f29d752..f9528c59 100644 --- a/docs/react/state/state-management-basics.md +++ b/docs/react/state/state-management-basics.md @@ -84,7 +84,7 @@ function App() { ## The ref escape hatch -For operations that don't map to declarative props, use the [`SpreadsheetRef`](/react/types#spreadsheetref) to access the underlying widget instance: +For operations that don't map to declarative props, use the [`SpreadsheetRef`](react/types.md#spreadsheetref) to access the underlying widget instance: - **Serialize data:** `ref.current?.instance?.serialize()` - **Undo/redo:** `ref.current?.instance?.undo()` / `ref.current?.instance?.redo()` diff --git a/docs/react/themes.md b/docs/react/themes.md index e4e27b70..7091fb48 100644 --- a/docs/react/themes.md +++ b/docs/react/themes.md @@ -10,7 +10,7 @@ React Spreadsheet ships with four built-in themes and supports custom themes thr ## Built-in themes -The [`SpreadsheetTheme`](/react/types#spreadsheettheme) type defines four built-in themes: +The [`SpreadsheetTheme`](react/types.md#spreadsheettheme) type defines four built-in themes: - `"light"` (default) - `"dark"` @@ -89,5 +89,5 @@ import "./custom-theme.css"; ## Related guides - [Themes](/themes/) - built-in theme overview for DHTMLX Spreadsheet -- [Base themes configuration](/themes/base_themes_configuration/) - configuring base themes -- [Custom theme](/themes/custom_theme/) - creating custom themes +- [Base themes configuration](themes/base_themes_configuration.md) - configuring base themes +- [Custom theme](themes/custom_theme.md) - creating custom themes diff --git a/docs/react/types.md b/docs/react/types.md index ee998265..2f98706e 100644 --- a/docs/react/types.md +++ b/docs/react/types.md @@ -150,7 +150,7 @@ Built-in color themes. Also accepts custom theme name strings. ## IExecuteConfig -Action execution configuration passed to [`onBeforeAction`](/react/events/#action-events) / [`onAfterAction`](/react/events/#action-events). Shape varies by action type. +Action execution configuration passed to [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events). Shape varies by action type. | Property | Type | Description | |----------|------|-------------| @@ -192,7 +192,7 @@ ref.current?.instance?.redo(); ## Actions enum -Known spreadsheet action identifiers. Used in [`onBeforeAction`](/react/events/#action-events) / [`onAfterAction`](/react/events/#action-events) for type-safe action matching. The `| string` union on handler params allows forward-compatibility with future actions. +Known spreadsheet action identifiers. Used in [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) for type-safe action matching. The `| string` union on handler params allows forward-compatibility with future actions. | Value | Description | |-------|-------------| diff --git a/docs/sorting_data.md b/docs/sorting_data.md index ea364d3d..92190b73 100644 --- a/docs/sorting_data.md +++ b/docs/sorting_data.md @@ -14,7 +14,7 @@ To sort spreadsheet data by a column, take the following steps: 2\. Choose *Sort* -> *Sort A to Z* or *Sort Z to A* -![Sort column](assets/sort_col.png) +![DHTMLX Spreadsheet column header context menu with Sort A to Z and Sort Z to A options](/img/sort_col.png) or @@ -22,7 +22,7 @@ or 2\. Go to: *Data* -> *Sort* -> *Sort A to Z* or *Sort Z to A* in the menu -![Sort column](assets/sort_col_menu.png) +![DHTMLX Spreadsheet Data menu with the Sort submenu showing Sort A to Z and Sort Z to A](/img/sort_col_menu.png) ## Sorting data by a range @@ -34,8 +34,8 @@ To sort spreadsheet data by a separate range, take the following steps: - Right-click a cell in the selected range and choose *Sort* -> *Sort A to Z* or *Sort Z to A* -![Sort column](assets/sort_range_menu.png) +![DHTMLX Spreadsheet context menu on a selected range with the Sort submenu](/img/sort_range_menu.png) - Or go to: *Data* -> *Sort* -> *Sort A to Z* or *Sort Z to A* in the menu -![Sort column](assets/sort_range.png) \ No newline at end of file +![DHTMLX Spreadsheet Data menu with the Sort submenu for sorting a selected cell range](/img/sort_range.png) \ No newline at end of file diff --git a/docs/svelte_integration.md b/docs/svelte_integration.md index 41a2a8f3..ac140103 100644 --- a/docs/svelte_integration.md +++ b/docs/svelte_integration.md @@ -58,7 +58,7 @@ Now you should get the DHTMLX Spreadsheet source code. First of all, stop the ap ### Step 1. Package installation -Download the [**trial Spreadsheet package**](/how_to_start/#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 steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. ### Step 2. Component creation @@ -196,7 +196,7 @@ Then open the ***App.svelte*** file, import data, and pass it into the new creat ~~~ -Go to the ***Spreadsheet.svelte*** file and apply the passed **props** to the Spreadsheet via the [`parse()`](/api/spreadsheet_parse_method/) method: +Go to the ***Spreadsheet.svelte*** file and apply the passed **props** to the Spreadsheet via the [`parse()`](api/spreadsheet_parse_method.md) method: ~~~html {6,13} title="Spreadsheet.svelte"