diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index 2c807584..498b7e9d 100644 --- a/docs/api/api_overview.md +++ b/docs/api/api_overview.md @@ -34,6 +34,8 @@ Parameters: | [](api/spreadsheet_eachcell_method.md) | @getshort(api/spreadsheet_eachcell_method.md) | | [](api/spreadsheet_endedit_method.md) | @getshort(api/spreadsheet_endedit_method.md) | | [](api/spreadsheet_fitcolumn_method.md) | @getshort(api/spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(api/spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(api/spreadsheet_freezerows_method.md) | | [](api/spreadsheet_getactivesheet_method.md) | @getshort(api/spreadsheet_getactivesheet_method.md) | | [](api/spreadsheet_getfilter_method.md) | @getshort(api/spreadsheet_getfilter_method.md) | | [](api/spreadsheet_getformat_method.md) | @getshort(api/spreadsheet_getformat_method.md) | @@ -41,6 +43,8 @@ Parameters: | [](api/spreadsheet_getsheets_method.md) | @getshort(api/spreadsheet_getsheets_method.md) | | [](api/spreadsheet_getstyle_method.md) | @getshort(api/spreadsheet_getstyle_method.md) | | [](api/spreadsheet_getvalue_method.md) | @getshort(api/spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(api/spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(api/spreadsheet_hiderows_method.md) | | [](api/spreadsheet_hidesearch_method.md) | @getshort(api/spreadsheet_hidesearch_method.md) | | [](api/spreadsheet_insertlink_method.md) | @getshort(api/spreadsheet_insertlink_method.md) | | [](api/spreadsheet_islocked_method.md) | @getshort(api/spreadsheet_islocked_method.md) | @@ -58,8 +62,12 @@ Parameters: | [](api/spreadsheet_setstyle_method.md) | @getshort(api/spreadsheet_setstyle_method.md) | | [](api/spreadsheet_setvalidation_method.md) | @getshort(api/spreadsheet_setvalidation_method.md) | | [](api/spreadsheet_setvalue_method.md) | @getshort(api/spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(api/spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(api/spreadsheet_showrows_method.md) | | [](api/spreadsheet_startedit_method.md) | @getshort(api/spreadsheet_startedit_method.md) | | [](api/spreadsheet_undo_method.md) | @getshort(api/spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(api/spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(api/spreadsheet_unfreezerows_method.md) | | [](api/spreadsheet_unlock_method.md) | @getshort(api/spreadsheet_unlock_method.md) | ## Spreadsheet events @@ -70,6 +78,7 @@ Parameters: | [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) | | [](api/spreadsheet_aftercolumnadd_event.md) | @getshort(api/spreadsheet_aftercolumnadd_event.md) | | [](api/spreadsheet_aftercolumndelete_event.md) | @getshort(api/spreadsheet_aftercolumndelete_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) | | [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) | | [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) | | [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) | @@ -113,7 +122,6 @@ Parameters: | [](api/spreadsheet_exportmodulepath_config.md) | @getshort(api/spreadsheet_exportmodulepath_config.md) | | [](api/spreadsheet_formats_config.md) | @getshort(api/spreadsheet_formats_config.md) | | [](api/spreadsheet_importmodulepath_config.md) | @getshort(api/spreadsheet_importmodulepath_config.md) | -| [](api/spreadsheet_leftsplit_config.md) | @getshort(api/spreadsheet_leftsplit_config.md) | | [](api/spreadsheet_localization_config.md) | @getshort(api/spreadsheet_localization_config.md) | | [](api/spreadsheet_menu_config.md) | @getshort(api/spreadsheet_menu_config.md) | | [](api/spreadsheet_multisheets_config.md) | @getshort(api/spreadsheet_multisheets_config.md) | @@ -121,7 +129,7 @@ Parameters: | [](api/spreadsheet_rowscount_config.md) | @getshort(api/spreadsheet_rowscount_config.md) | | [](api/spreadsheet_timeformat_config.md) | @getshort(api/spreadsheet_timeformat_config.md) | | [](api/spreadsheet_toolbarblocks_config.md) | @getshort(api/spreadsheet_toolbarblocks_config.md) | -| [](api/spreadsheet_topsplit_config.md) | @getshort(api/spreadsheet_topsplit_config.md) | + ## Selection methods diff --git a/docs/api/overview/actions_overview.md b/docs/api/overview/actions_overview.md index 0fbf96e3..5f30c1cb 100644 --- a/docs/api/overview/actions_overview.md +++ b/docs/api/overview/actions_overview.md @@ -74,10 +74,13 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){ | **setValidation** | The action is executed when setting data validation for a cell | | **sortCells** | The action is executed when sorting data in spreadsheet | | **setCellStyle** | The action is executed when changing the style of a cell | +| **toggleVisibility** | The action is executed when hiding/showing columns/rows | +| **toggleFreeze** | The action is executed when freezing/unfreezing columns/rows | | **unmerge** | The action is executed when splitting cells | **Change log:** +- The **toggleFreeze** and **toggleVisibility** actions were added in v5.2 - The **merge**, **unmerge**, **filter**, **fitColumn**, **insertLink** actions were added in v5.0 **Related sample:** [Spreadsheet. Actions](https://snippet.dhtmlx.com/efcuxlkt) \ No newline at end of file diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index aab095f1..11a4ea39 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -12,6 +12,7 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee | [](../spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | | [](../spreadsheet_aftercolumnadd_event.md) | @getshort(../spreadsheet_aftercolumnadd_event.md) | | [](../spreadsheet_aftercolumndelete_event.md) | @getshort(../spreadsheet_aftercolumndelete_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) | diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index fb295ba7..6074a75e 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -18,12 +18,16 @@ description: You can have a Methods overview of the DHTMLX JavaScript Spreadshee | [](../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_getactivesheet_method.md) | @getshort(../spreadsheet_getactivesheet_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_getsheets_method.md) | @getshort(../spreadsheet_getsheets_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) | @@ -42,6 +46,10 @@ description: You can have a Methods overview of the DHTMLX JavaScript Spreadshee | [](../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 diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index ae776ae0..c0689b28 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -14,7 +14,6 @@ description: You can have a Properties overview of the DHTMLX JavaScript Spreads | [](../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_leftsplit_config.md) | @getshort(../spreadsheet_leftsplit_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) | @@ -22,4 +21,4 @@ description: You can have a Properties overview of the DHTMLX JavaScript Spreads | [](../spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | | [](../spreadsheet_timeformat_config.md) | @getshort(../spreadsheet_timeformat_config.md) | | [](../spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | -| [](../spreadsheet_topsplit_config.md) | @getshort(../spreadsheet_topsplit_config.md) | + diff --git a/docs/api/spreadsheet_afterdataloaded_event.md b/docs/api/spreadsheet_afterdataloaded_event.md new file mode 100644 index 00000000..88f0c0b7 --- /dev/null +++ b/docs/api/spreadsheet_afterdataloaded_event.md @@ -0,0 +1,40 @@ +--- +sidebar_label: afterDataLoaded +title: afterDataLoaded event +description: You can learn about the afterDataLoaded event in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# afterDataLoaded + +### Description + +@short: Fires after data loading is complete + +### Usage + +~~~jsx +afterDataLoaded: () => void; +~~~ + +### Example + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); +spreadsheet.parse(data); + +// subscribe to the "afterDataLoaded" event +spreadsheet.events.on("afterDataLoaded", () => { + dhx.message({ + text: "Data is successfully loaded into Spreadsheet!", + css: "dhx_message--success", + expire: 5000 + }); +}); +~~~ + +**Change log:** Added in v5.2 + +**Related articles:** [Event handling](handling_events.md) + +**Related sample:** [Spreadsheet. Data loaded event](https://snippet.dhtmlx.com/vxr7amz6) + diff --git a/docs/api/spreadsheet_freezecols_method.md b/docs/api/spreadsheet_freezecols_method.md new file mode 100644 index 00000000..5a6f7c0b --- /dev/null +++ b/docs/api/spreadsheet_freezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeCols() +title: freezeCols method +description: You can learn about the freezeCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# freezeCols() + +### Description + +@short: Fixes ("freezes") columns + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +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 API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md/) + +**Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) + +**Change log:** +Added in v5.2 diff --git a/docs/api/spreadsheet_freezerows_method.md b/docs/api/spreadsheet_freezerows_method.md new file mode 100644 index 00000000..dde77289 --- /dev/null +++ b/docs/api/spreadsheet_freezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeRows() +title: freezeRows method +description: You can learn about the freezeRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# freezeRows() + +### Description + +@short: Fixes ("freezes") rows + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +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 API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md/) + +**Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) + +**Change log:** +Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_hidecols_method.md b/docs/api/spreadsheet_hidecols_method.md new file mode 100644 index 00000000..b8dd25e9 --- /dev/null +++ b/docs/api/spreadsheet_hidecols_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: hideCols() +title: hideCols method +description: You can learn about the hideCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# hideCols() + +### Description + +@short: Hides columns + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +spreadsheet.hideCols("B2"); // the "B" column will be hidden +spreadsheet.hideCols("sheet2!B2"); // the "B" column in "sheet2" will be hidden +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 API:** [`showCols()`](api/spreadsheet_showcols_method.md) + +**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**Change log:** Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_hiderows_method.md b/docs/api/spreadsheet_hiderows_method.md new file mode 100644 index 00000000..e8e70070 --- /dev/null +++ b/docs/api/spreadsheet_hiderows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: hideRows() +title: hideRows method +description: You can learn about the hideRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# hideRows() + +### Description + +@short: Hides rows + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +spreadsheet.hideRows("B2"); // the "2" row will be hidden +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 API:** [`showRows()`](api/spreadsheet_showrows_method.md) + +**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**Change log:** Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_leftsplit_config.md b/docs/api/spreadsheet_leftsplit_config.md deleted file mode 100644 index 6832d26d..00000000 --- a/docs/api/spreadsheet_leftsplit_config.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -sidebar_label: leftSplit -title: leftSplit config -description: You can learn about the leftSplit config in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. ---- - -# leftSplit - -### Description - -@short: Optional. Sets the number of columns fixed to the left side of the spreadsheet - -### Usage - -~~~jsx -leftSplit?: number; -~~~ - -### Example - -~~~jsx {2} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { - leftSplit:3, - // other config parameters -}); -~~~ - -**Change log:** Added in v4.0 - -**Related articles:** [Configuration](configuration.md#frozen-rows-and-columns) - -**Related sample:** [Spreadsheet. Frozen columns](https://snippet.dhtmlx.com/iazmc27w) diff --git a/docs/api/spreadsheet_parse_method.md b/docs/api/spreadsheet_parse_method.md index c4e398fc..0aa550dc 100644 --- a/docs/api/spreadsheet_parse_method.md +++ b/docs/api/spreadsheet_parse_method.md @@ -39,8 +39,20 @@ parse({ { name?: string, id?: string, - rows?: array, - cols?: array, + cols?: [ + { + width?: number, + hidden?: boolean, + }, + // more column objects + ], + rows?: [ + { + height?: number, + hidden?: boolean, + }, + // more row objects + ], data: [ { cell: string, @@ -65,7 +77,11 @@ parse({ to: { column: index, row: index } }, // more objects - ] + ], + freeze?: { + col?: number, + row?: number, + } }, // more sheet objects ] @@ -95,8 +111,12 @@ If you need to create a data set *for several sheets* at once, specify data as a - `sheets` - (required) an array of **sheet** objects. Each object has the following properties: - `name` - (optional) the sheet name - `id` - (optional) the sheet id - - `rows` - (optional) an array of height objects. If not specified, the rows will have a height of 32px. - - `cols` - (optional) an array of width objects. If not specified, the columns will have a width of 120px. + - `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 + - `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 + - `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 - `value` - (required) the value of a cell @@ -116,6 +136,9 @@ If you need to create a data set *for several sheets* at once, specify data as a - `to` - an object which defines the position of the last cell from a range: - `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 :::info In case the [`multisheets`](api/spreadsheet_multisheets_config.md) configuration option is set to *false*, only one sheet will be created. @@ -148,21 +171,21 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); spreadsheet.parse(data); ~~~ -~~~jsx {38} title="Example 2. Load data into several sheets" +~~~jsx title="Example 2. Load data into several sheets" const data = { - sheets : [ + sheets: [ { name: "sheet 1", id: "sheet_1", rows: [ - { height: 50 }, // the height of the first row - { height: 50 }, // the height of the second row - // the height of the other rows is 32 + { height: 50, hidden: true }, // config of the first row + { height: 50 }, // config of the second row + // the height of other rows is 32 ], cols: [ - { width: 300 }, // the width of the first column - { width: 300 }, // the width of the second column - // the width of the other columns is 120 + { width: 300 }, // config of the first column + { width: 300, hidden: true }, // config of the second column + // the width of other columns is 120 ], data: [ { cell: "A1", value: "Country" }, @@ -173,7 +196,11 @@ const data = { { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, // merge cells A2, A3, A4, and A5 { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } } - ] + ], + freeze: { + col: 2, + row: 2 + }, }, { name: "sheet 2", @@ -229,7 +256,7 @@ A CSS class is set for a cell via the **css** property. ### List of properties -The list of properties you can specify in the **style** object: +The list of properties you can specify in the **styles** object: - *background* - *color* @@ -239,6 +266,7 @@ The list of properties you can specify in the **style** object: - *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: @@ -253,10 +281,11 @@ but in some cases they may not work in the way you expect (for example, when app **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 **sheet** object was added in v5.0 +- 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 **sheet** object were added in v4.2 +- 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_setstyle_method.md b/docs/api/spreadsheet_setstyle_method.md index 16c3781e..107ff591 100644 --- a/docs/api/spreadsheet_setstyle_method.md +++ b/docs/api/spreadsheet_setstyle_method.md @@ -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 -- `style` - (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) 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) ### Example diff --git a/docs/api/spreadsheet_showcols_method.md b/docs/api/spreadsheet_showcols_method.md new file mode 100644 index 00000000..4a4fd6da --- /dev/null +++ b/docs/api/spreadsheet_showcols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showCols() +title: showCols method +description: You can learn about the showCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# showCols() + +### Description + +@short: Shows hidden columns + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +spreadsheet.showCols("B2"); // the "B" column will become visible again +spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become visible again +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 API:** [`hideCols()`](api/spreadsheet_hidecols_method.md) + +**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**Change log:** Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_showrows_method.md b/docs/api/spreadsheet_showrows_method.md new file mode 100644 index 00000000..3782aec2 --- /dev/null +++ b/docs/api/spreadsheet_showrows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showRows() +title: showRows method +description: You can learn about the showRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# showRows() + +### Description + +@short: Shows hidden rows + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +spreadsheet.showRows("B2"); // the "2" row will become visible again +spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visible again +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 API:** [`hideRows()`](api/spreadsheet_hiderows_method.md) + +**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**Change log:** Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_sortcells_method.md b/docs/api/spreadsheet_sortcells_method.md index 03d687a8..924eef0c 100644 --- a/docs/api/spreadsheet_sortcells_method.md +++ b/docs/api/spreadsheet_sortcells_method.md @@ -27,7 +27,7 @@ sortCells(cell: string, dir: number): void; ~~~jsx {7,10} const spreadsheet = new dhx.Spreadsheet("spreadsheet", { - topSplit: 1 + // configuration parameters }); spreadsheet.parse(data); @@ -38,9 +38,6 @@ spreadsheet.sortCells("B2:B11", -1); spreadsheet.sortCells("Income!B2:B11, Report!B2:B11, Expenses!C2:C11", 1); ~~~ -:::info -Use the [topSplit](api/spreadsheet_topsplit_config.md) property if you need to exclude the top rows from sorting. -::: **Related sample:** [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index cc1823c8..2c47fd59 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -19,47 +19,48 @@ toolbarBlocks?: array; ### Default config ~~~jsx -toolbarBlocks: ["undo", "colors", "decoration", "align", "format", "actions", "helpers"] +toolbarBlocks: ["undo", "colors", "decoration", "align", "cell", "format", "actions"] ~~~ ### Example -~~~jsx {3-15} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { +~~~jsx {3-17} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { // full toolbar toolbarBlocks: [ "undo", "colors", "decoration", "align", + "cell", + "format", + "actions", "lock", "clear", - "rows", "columns", - "helpers", - "format", - "file" + "rows", + "file", + "help" ] }); ~~~ ### Details -You can specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: +You can specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example: -~~~jsx {2} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { - toolbarBlocks: ["helpers", "colors", "align", "decoration", "lock", "clear"] +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] }); ~~~ -![Custom toolbar](../assets/custom_toolbar.png) - Check how you can [customize the toolbar](customization.md/#toolbar). **Change log:** -- The *"actions"* block was added in v5.0 -- The *"help"* block was renamed to *"helpers"* in v5.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_topsplit_config.md b/docs/api/spreadsheet_topsplit_config.md deleted file mode 100644 index 6246500d..00000000 --- a/docs/api/spreadsheet_topsplit_config.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -sidebar_label: topSplit -title: topSplit config -description: You can learn about the topSplit config in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. ---- - -# topSplit - -### Description - -@short: Optional. Sets the number of rows fixed to the top of the spreadsheet - -### Usage - -~~~jsx -topSplit?: number; -~~~ - -### Default config - -~~~jsx -topSplit: 0 -~~~ - -### Example - -~~~jsx {2} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { - topSplit: 2, - // other config parameters -}); -~~~ - -**Change log:** Added in v4.3 - -**Related articles:** [Configuration](configuration.md#frozen-rows-and-columns) - -**Related sample:** [Spreadsheet. Frozen rows and columns](https://snippet.dhtmlx.com/iazmc27w) diff --git a/docs/api/spreadsheet_unfreezecols_method.md b/docs/api/spreadsheet_unfreezecols_method.md new file mode 100644 index 00000000..9cda7d04 --- /dev/null +++ b/docs/api/spreadsheet_unfreezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeCols() +title: unfreezeCols method +description: You can learn about the unfreezeCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# unfreezeCols() + +### Description + +@short: Unfreezes the fixed ("frozen") columns + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +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 API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md/) + +**Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) + +**Change log:** +Added in v5.2 \ No newline at end of file diff --git a/docs/api/spreadsheet_unfreezerows_method.md b/docs/api/spreadsheet_unfreezerows_method.md new file mode 100644 index 00000000..7d72afdb --- /dev/null +++ b/docs/api/spreadsheet_unfreezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeRows() +title: unfreezeRows method +description: You can learn about the unfreezeRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet. +--- + +# unfreezeRows() + +### Description + +@short: Unfreezes the fixed ("frozen") rows + +### Usage + +~~~jsx +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 + +### Example + +~~~jsx +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 API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md/) + +**Related sample:** [Spreadsheet. Freezing columns and rows via API](https://snippet.dhtmlx.com/a12xd1mn) + +**Change log:** +Added in v5.2 \ No newline at end of file diff --git a/docs/assets/add_column_button.png b/docs/assets/add_column_button.png index 40f70c3b..554bd4f8 100644 Binary files a/docs/assets/add_column_button.png and b/docs/assets/add_column_button.png differ diff --git a/docs/assets/add_column_context_menu.png b/docs/assets/add_column_context_menu.png index d1ea8fb2..0c683ddc 100644 Binary files a/docs/assets/add_column_context_menu.png and b/docs/assets/add_column_context_menu.png differ diff --git a/docs/assets/add_column_menu.png b/docs/assets/add_column_menu.png new file mode 100644 index 00000000..77604b01 Binary files /dev/null and b/docs/assets/add_column_menu.png differ diff --git a/docs/assets/add_row_button.png b/docs/assets/add_row_button.png index 929e4c6b..7a852664 100644 Binary files a/docs/assets/add_row_button.png and b/docs/assets/add_row_button.png differ diff --git a/docs/assets/add_row_context_menu.png b/docs/assets/add_row_context_menu.png index aedd787f..fe8298ea 100644 Binary files a/docs/assets/add_row_context_menu.png and b/docs/assets/add_row_context_menu.png differ diff --git a/docs/assets/add_row_menu.png b/docs/assets/add_row_menu.png new file mode 100644 index 00000000..0d0edea9 Binary files /dev/null and b/docs/assets/add_row_menu.png differ diff --git a/docs/assets/clear_cells_border.png b/docs/assets/clear_cells_border.png new file mode 100644 index 00000000..91b11caa Binary files /dev/null and b/docs/assets/clear_cells_border.png differ diff --git a/docs/assets/formula_popup.png b/docs/assets/formula_popup.png new file mode 100644 index 00000000..f353e8ac Binary files /dev/null and b/docs/assets/formula_popup.png differ diff --git a/docs/assets/freeze_columns_context_menu.png b/docs/assets/freeze_columns_context_menu.png new file mode 100644 index 00000000..26eb8328 Binary files /dev/null and b/docs/assets/freeze_columns_context_menu.png differ diff --git a/docs/assets/freeze_columns_menu.png b/docs/assets/freeze_columns_menu.png new file mode 100644 index 00000000..d5a1f9c7 Binary files /dev/null and b/docs/assets/freeze_columns_menu.png differ diff --git a/docs/assets/freeze_columns_toolbar.png b/docs/assets/freeze_columns_toolbar.png new file mode 100644 index 00000000..626d230e Binary files /dev/null and b/docs/assets/freeze_columns_toolbar.png differ diff --git a/docs/assets/freeze_rows_context_menu.png b/docs/assets/freeze_rows_context_menu.png new file mode 100644 index 00000000..859e02b7 Binary files /dev/null and b/docs/assets/freeze_rows_context_menu.png differ diff --git a/docs/assets/freeze_rows_menu.png b/docs/assets/freeze_rows_menu.png new file mode 100644 index 00000000..93f17072 Binary files /dev/null and b/docs/assets/freeze_rows_menu.png differ diff --git a/docs/assets/freeze_rows_toolbar.png b/docs/assets/freeze_rows_toolbar.png new file mode 100644 index 00000000..702de6c4 Binary files /dev/null and b/docs/assets/freeze_rows_toolbar.png differ diff --git a/docs/assets/hide_column_context_menu.png b/docs/assets/hide_column_context_menu.png new file mode 100644 index 00000000..7f97e325 Binary files /dev/null and b/docs/assets/hide_column_context_menu.png differ diff --git a/docs/assets/hide_columns_toolbar.png b/docs/assets/hide_columns_toolbar.png new file mode 100644 index 00000000..94fae011 Binary files /dev/null and b/docs/assets/hide_columns_toolbar.png differ diff --git a/docs/assets/hide_row_context_menu.png b/docs/assets/hide_row_context_menu.png new file mode 100644 index 00000000..041c1ae6 Binary files /dev/null and b/docs/assets/hide_row_context_menu.png differ diff --git a/docs/assets/hide_rows_toolbar.png b/docs/assets/hide_rows_toolbar.png new file mode 100644 index 00000000..f01080cb Binary files /dev/null and b/docs/assets/hide_rows_toolbar.png differ diff --git a/docs/assets/remove_column_button.png b/docs/assets/remove_column_button.png index 37647e0b..da2164a1 100644 Binary files a/docs/assets/remove_column_button.png and b/docs/assets/remove_column_button.png differ diff --git a/docs/assets/remove_column_context_menu.png b/docs/assets/remove_column_context_menu.png index 8a1f5cb0..754701e5 100644 Binary files a/docs/assets/remove_column_context_menu.png and b/docs/assets/remove_column_context_menu.png differ diff --git a/docs/assets/remove_column_menu.png b/docs/assets/remove_column_menu.png new file mode 100644 index 00000000..6e418cea Binary files /dev/null and b/docs/assets/remove_column_menu.png differ diff --git a/docs/assets/remove_row_button.png b/docs/assets/remove_row_button.png index 6ae639dd..c7eb5572 100644 Binary files a/docs/assets/remove_row_button.png and b/docs/assets/remove_row_button.png differ diff --git a/docs/assets/remove_row_context_menu.png b/docs/assets/remove_row_context_menu.png index fd16b3bf..e9a61dc6 100644 Binary files a/docs/assets/remove_row_context_menu.png and b/docs/assets/remove_row_context_menu.png differ diff --git a/docs/assets/remove_row_menu.png b/docs/assets/remove_row_menu.png new file mode 100644 index 00000000..89dafa61 Binary files /dev/null and b/docs/assets/remove_row_menu.png differ diff --git a/docs/assets/show_columns.png b/docs/assets/show_columns.png new file mode 100644 index 00000000..1fe97b98 Binary files /dev/null and b/docs/assets/show_columns.png differ diff --git a/docs/assets/show_columns_context_menu.png b/docs/assets/show_columns_context_menu.png new file mode 100644 index 00000000..14a9c493 Binary files /dev/null and b/docs/assets/show_columns_context_menu.png differ diff --git a/docs/assets/show_rows.png b/docs/assets/show_rows.png new file mode 100644 index 00000000..cfad2cd2 Binary files /dev/null and b/docs/assets/show_rows.png differ diff --git a/docs/assets/show_rows_context_menu.png b/docs/assets/show_rows_context_menu.png new file mode 100644 index 00000000..6ad95a3f Binary files /dev/null and b/docs/assets/show_rows_context_menu.png differ diff --git a/docs/assets/styled_cell_border.png b/docs/assets/styled_cell_border.png new file mode 100644 index 00000000..dabb1a4e Binary files /dev/null and b/docs/assets/styled_cell_border.png differ diff --git a/docs/assets/unfreeze_columns_context_menu.png b/docs/assets/unfreeze_columns_context_menu.png new file mode 100644 index 00000000..91715ac1 Binary files /dev/null and b/docs/assets/unfreeze_columns_context_menu.png differ diff --git a/docs/assets/unfreeze_columns_menu.png b/docs/assets/unfreeze_columns_menu.png new file mode 100644 index 00000000..c229841c Binary files /dev/null and b/docs/assets/unfreeze_columns_menu.png differ diff --git a/docs/assets/unfreeze_columns_toolbar.png b/docs/assets/unfreeze_columns_toolbar.png new file mode 100644 index 00000000..faec609f Binary files /dev/null and b/docs/assets/unfreeze_columns_toolbar.png differ diff --git a/docs/assets/unfreeze_rows_context_menu.png b/docs/assets/unfreeze_rows_context_menu.png new file mode 100644 index 00000000..a0cd5327 Binary files /dev/null and b/docs/assets/unfreeze_rows_context_menu.png differ diff --git a/docs/assets/unfreeze_rows_menu.png b/docs/assets/unfreeze_rows_menu.png new file mode 100644 index 00000000..2ef27b94 Binary files /dev/null and b/docs/assets/unfreeze_rows_menu.png differ diff --git a/docs/assets/unfreeze_rows_toolbar.png b/docs/assets/unfreeze_rows_toolbar.png new file mode 100644 index 00000000..0d845e5d Binary files /dev/null and b/docs/assets/unfreeze_rows_toolbar.png differ diff --git a/docs/configuration.md b/docs/configuration.md index 12c8341f..997eb626 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -10,13 +10,19 @@ You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. Th ## Toolbar -The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file". +The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file", "help". The structure of toolbar can be adjusted via the [](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: "helpers", "colors", "align", "decoration", "lock", "clear". +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". + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. @@ -33,19 +39,6 @@ When Spreadsheet is initialized, it has the initial configuration of grid which -## Frozen rows and columns - -You may need to fix (or "freeze") some columns or rows, so that they will become static when you scroll the page, while the rest of columns/rows remain movable. - -- To fix columns to the left side of the spreadsheet, use the [leftSplit](api/spreadsheet_leftsplit_config.md) property (available from v4.0) -- To fix rows on the top of the spreadsheet, use the [topSplit](api/spreadsheet_topsplit_config.md) property (available from v4.3) - -Check the example below: - - - - - ## Menu The menu of the Spreadsheet is hidden by default. You can switch it on/off via the corresponding configuration option [](api/spreadsheet_menu_config.md): diff --git a/docs/customization.md b/docs/customization.md index 532094a3..41cf0333 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -115,16 +115,16 @@ spreadsheet.toolbar.data.remove("control-id"); The [default toolbar](/#toolbar) contains the following blocks of controls: - the **Undo** block - - the *Undo* button (id:"undo") - - the *Redo* button (id:"redo") + - the *Undo* button (id: "undo") + - the *Redo* button (id: "redo") - the **Colors** block - - the *Text color* button (id:"color") - - the *Background color* button (id:"background") + - the *Text color* button (id: "color") + - the *Background color* button (id: "background") - the **Decoration** block - - the *Bold* button (id:"font-weight-bold") - - the *Italic* button (id:"font-style-italic") - - the *Underline* button (id:"text-decoration-underline") - - the *Strikethrough* button (id:"text-decoration-line-through") + - the *Bold* button (id: "font-weight-bold") + - the *Italic* button (id: "font-style-italic") + - the *Underline* button (id: "text-decoration-underline") + - the *Strikethrough* button (id: "text-decoration-line-through") - the **Align** block - the **Horizontal align** sub-block - the *Left* button (id: "halign-left") @@ -137,35 +137,43 @@ The [default toolbar](/#toolbar) contains the following blocks of controls: - the **Text wrapping** sub-block - the *Clip* button (id: "multiline-clip") - the *Wrap* button (id: "multiline-wrap") - - the **Merge/Unmerge** button (id: "merge") +- the **Cell** block + - the *Border* button (id: "border") + - the *Merge/Unmerge* button (id: "merge") - the **Format** block - - the *Format* menuItem (id:"format") + - the *Format* menuItem (id: "format") - the **Actions** block - - the *Filter* button (id:"filter") -- the **Helpers** block - - the *Link* button (id:"link") - - the *Help* button (id:"help") + - the *Filter* button (id: "filter") + - the *Insert link* button (id: "link") It is also possible to add the blocks enumerated below: - the **Lock** block - - the *Lock* button (id:"lock") + - the *Lock* button (id: "lock") - the **Clear** block - - the *Clear group* menuItem (id:"clear-group") - - the *Clear value* menuItem (id:"clear-value") - - the *Clear styles* menuItem (id:"clear-styles") - - the *Clear all* menuItem (id:"clear-all") + - the *Clear group* menuItem (id: "clear-group") + - the *Clear value* menuItem (id: "clear-value") + - the *Clear styles* menuItem (id: "clear-styles") + - the *Clear all* menuItem (id: "clear-all") - the **Rows** block - - the *Add row* button (id:"add-row") - - the *Remove row* button (id:"remove-row") + - the *Add row* button (id: "add-row") + - the *Remove row* button (id: "remove-row") + - the *Unfreeze rows* button (id: "unfreeze-rows") + - the *Freeze up to row [id]* (id: "freeze-rows") + - the *Hide row(s) [id]* (id: "hide-rows") - the **Columns** block - - the *Add column* button (id:"add-col") - - the *Remove column* button (id:"remove-col") + - the *Add column* button (id: "add-col") + - the *Remove column* button (id: "remove-col") + - the *Unfreeze columns* button (id: "unfreeze-cols") + - the *Freeze up to column [id]* (id: "freeze-cols") + - the *Hide column(s) [id]* (id: "hide-cols") - the **File** block - - the *Export* menuItem (id:"export") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"export-xlsx") - - the *Import* menuItem (id:"import") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"import-xlsx") + - the *Export* menuItem (id: "export") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx") + - the *Import* menuItem (id: "import") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") +- the **Help** block + - the *Help* button (id: "help") ### Adding controls @@ -232,34 +240,40 @@ spreadsheet.toolbar.data.remove("undo"); The [default menu](/#menu) has the following structure: -- the **File** menuItem (id:"edit") - - the *Export* menuItem (id:"download") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"export-xlsx") - - the *Import* menuItem (id:"import") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"import-xlsx") -- the **Edit** menuItem (id:"edit") - - the *Undo* menuItem (id:"undo") - - the *Redo* menuItem (id:"redo") +- the **File** menuItem (id: "edit") + - the *Import as...* menuItem (id: "import") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") + - the *Download as...* menuItem (id: "download") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx") +- the **Edit** menuItem (id: "edit") + - the *Undo* menuItem (id: "undo") + - the *Redo* menuItem (id: "redo") - the separator - - the *Lock* menuItem (id:"lock") + - the *Freeze* menuItem (id: "freeze") + - the *Unfreeze columns* menuItem (id: "unfreeze-cols") + - the *Freeze up to column [id]* (id: "freeze-cols") + - the separator (id: "freeze-sep") + - the *Unfreeze rows* menuItem (id: "unfreeze-rows") + - the *Freeze up to row [id]* (id: "freeze-rows") + - the *Lock* menuItem (id: "lock") - the separator - - the *Clear* menuItem (id:"clear") - - the *Clear value* menuItem (id:"clear-value") - - the *Clear styles* menuItem (id:"clear-styles") - - the *Clear all* menuItem (id:"clear-all") -- the **Insert** menuItem (id:"insert") - - the *Columns* menuItem (id:"columns") - - the *Add column* menuItem (id:"add-col") - - the *Remove column* menuItem (id:"remove-col") - - the *Rows* menuItem (id:"rows") - - the *Add row* menuItem (id:"add-row") - - the *Remove row* menuItem (id:"remove-row") - - the *Insert link* menuItem (id:"link") -- the **Format** menuItem (id:"configuration") - - the *Bold* menuItem (id:"font-weight-bold") - - the *Italic* menuItem (id:"font-style-italic") - - the *Underline* menuItem (id:"text-decoration-underline") - - the *Strikethrough* menuItem (id:"text-decoration-line-through") + - the *Clear* menuItem (id: "clear") + - the *Clear value* menuItem (id: "clear-value") + - the *Clear styles* menuItem (id: "clear-styles") + - the *Clear all* menuItem (id: "clear-all") +- the **Insert** menuItem (id: "insert") + - the *Columns* menuItem (id: "columns") + - the *Add column* menuItem (id: "add-col") + - the *Remove column* menuItem (id: "remove-col") + - the *Rows* menuItem (id: "rows") + - the *Add row* menuItem (id: "add-row") + - the *Remove row* menuItem (id: "remove-row") + - the *Insert link* menuItem (id: "link") +- the **Format** menuItem (id: "configuration") + - the *Bold* menuItem (id: "font-weight-bold") + - the *Italic* menuItem (id: "font-style-italic") + - the *Underline* menuItem (id: "text-decoration-underline") + - the *Strikethrough* menuItem (id: "text-decoration-line-through") - the separator - the *Horizontal align* menuItem (id: "halign") - the *Left* menuItem (id: "halign-left") @@ -272,16 +286,16 @@ The [default menu](/#menu) has the following structure: - the *Text wrapping* menuItem (id: "multiline") - the *Clip* menuItem (id: "multiline-clip") - the *Wrap* menuItem (id: "multiline-wrap") - - the *Format* menuItem (id:"format") + - the *Format* menuItem (id: "format") - the *Merge/Unmerge* menuItem (id: "merge") -- the **Data** menuItem (id:"data") - - the *Data validation* menuItem (id:"validation") - - the *Search* menuItem (id:"search") - - the *Filter* menuItem (id:"filter") - - the *Sort* menuItem (id:"sort") - - the *Sort A to Z* menuItem (id:"asc-sort") - - the *Sort Z to A* menuItem (id:"desc-sort") -- the **Help** menuItem (id:"help") +- the **Data** menuItem (id: "data") + - the *Data validation* menuItem (id: "validation") + - the *Search* menuItem (id: "search") + - the *Filter* menuItem (id: "filter") + - the *Sort* menuItem (id: "sort") + - the *Sort A to Z* menuItem (id: "asc-sort") + - the *Sort Z to A* menuItem (id: "desc-sort") +- the **Help** menuItem (id: "help") ### Adding controls @@ -333,22 +347,32 @@ spreadsheet.menu.data.remove("undo"); The [default context menu](/#context-menu) has the following structure: -- the **Lock** menuItem (id:"lock") -- the **Clear** menuItem (id:"clear") - - the *Clear value* menuItem (id:"clear-value") - - the *Clear styles* menuItem (id:"clear-styles") - - the *Clear all* menuItem (id:"clear-all") -- the **Columns** menuItem (id:"columns") - - the *Add column* menuItem (id:"add-col") - - the *Remove column* menuItem (id:"remove-col") - - the *Fit to data* menuItem (id:"fit-col") -- the **Rows** menuItem (id:"rows") - - the *Add row* menuItem (id:"add-row") - - the *Remove row* menuItem (id:"remove-row") -- the **Sort** menuItem (id:"sort") - - the *Sort A to Z* menuItem (id:"asc-sort") - - the *Sort Z to A* menuItem (id:"desc-sort") -- the **Insert link** menuItem (id:"link") +- the **Lock** menuItem (id: "lock") +- the **Clear** menuItem (id: "clear") + - the *Clear value* menuItem (id: "clear-value") + - the *Clear styles* menuItem (id: "clear-styles") + - the *Clear all* menuItem (id: "clear-all") +- the **Columns** menuItem (id: "columns") + - the *Add column* menuItem (id: "add-col") + - the *Remove column* menuItem (id: "remove-col") + - the *Fit to data* menuItem (id: "fit-col") + - the separator + - the *Unfreeze columns* menuItem (id: "unfreeze-cols") + - the *Freeze up to column [id]* menuItem (id: "freeze-cols") + - the *Show columns* menuItem (id: "show-cols") + - the *Hide column(s) [id]* menuItem (id: "hide-cols") +- the **Rows** menuItem (id: "rows") + - the *Add row* menuItem (id: "add-row") + - the *Remove row* menuItem (id: "remove-row") + - the separator + - the *Unfreeze rows* menuItem (id: "unfreeze-rows") + - the *Freeze up to row [id]* menuItem (id: "freeze-rows") + - the *Show rows* menuItem (id: "show-rows") + - the *Hide row(s) [id]* menuItem (id: "hide-rows") +- the **Sort** menuItem (id: "sort") + - the *Sort A to Z* menuItem (id: "asc-sort") + - the *Sort Z to A* menuItem (id: "desc-sort") +- the **Insert link** menuItem (id: "link") ### Adding controls diff --git a/docs/data_formatting.md b/docs/data_formatting.md index 2c996887..eeec21da 100644 --- a/docs/data_formatting.md +++ b/docs/data_formatting.md @@ -91,4 +91,22 @@ 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) \ No newline at end of file +![Clear option](assets/clear_option.png) + +## Styled borders for cells + +You can add a styled border(s) 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 +- 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) + +### 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 diff --git a/docs/functions.md b/docs/functions.md index 3b205b51..dc7ecc3b 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -1311,9 +1311,19 @@ 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 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: -```js +~~~js var formula = spreadsheet.getFormula("B2"); // -> "ABS(C2)" -``` +~~~ + +## Popup with formula description + +When you enter a formula, a popup with description of the function and its parameters appears. + +![Popup with formula description](assets/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. \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 946ebc73..f5de9de2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -17,7 +17,7 @@ There is a [User Guide](guides/#user-guides) provided to make work with Spreadsh ### Toolbar -The **Toolbar** section is rather flexible. It contains 6 default blocks of controls: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or change the order of the blocks. +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) diff --git a/docs/localization.md b/docs/localization.md index dfde137d..cda28a6f 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -27,7 +27,7 @@ const en = { italic: "Italic", underline: "Underline", strikethrough: "Strikethrough", - + link: "Link", halign: "Horizontal align", @@ -53,11 +53,24 @@ const en = { columns: "Columns", rows: "Rows", - addColumn: "Add column", + addColumn: "Add column left", removeColumn: "Remove column", fitToData: "Fit to data", - addRow: "Add row", + addRow: "Add row above", removeRow: "Remove row", + row: "row", + col: "col", + freeze: "Freeze", + freezeToCol: "Freeze up to column {col}", + freezeToRow: "Freeze up to row {row}", + unfreezeRows: "Unfreeze rows", + unfreezeCols: "Unfreeze columns", + hideCol: "Hide column {col}", + hideCols: "Hide columns {col}", + showCols: "Show columns", + hideRows: "Hide rows {row}", + hideRow: "Hide row {row}", + showRows: "Show rows", format: "Format", common: "Common", @@ -72,6 +85,22 @@ const en = { help: "Help", + custom: "Custom", + + border: "Border", + border_all: "All borders", + border_inner: "Inner borders", + border_horizontal: "Horizontal borders", + border_vertical: "Vertical borders", + border_outer: "Outer borders", + border_color: "Border color", + border_left: "Left border", + border_top: "Top border", + border_right: "Right border", + border_bottom: "Bottom border", + border_clear: "Clear borders", + border_style: "Border style", + // Tabbar deleteSheet: "Delete", renameSheet: "Rename", @@ -91,15 +120,16 @@ const en = { ascSort: "Sort A to Z", descSort: "Sort Z to A", - // Actions + //Actions copy: "Copy", edit: "Edit", insert: "Insert", remove: "Remove", linkCopied: "Link copied to clipboard", - // Filter - e:"Is empty", + + //filter + e: "Is empty", ne: "Is not empty", tc: "Text contains", tdc: "Text doesn't contain", @@ -114,17 +144,18 @@ const en = { lt: "Less than", leq: "Less or equal to", eq: "Is equal to", - neq:"Is not equal to", + neq: "Is not equal to", ib: "Is between", inb: "Is not between", none: "None", - empty: "Empty", value: "Value", values: "By values", condition: "By condition", and: "And", + blank: "(Blank)", + // Buttons cancel: "Cancel", save: "Save", @@ -142,6 +173,8 @@ const en = { spanPasteError: "You can't paste merges that cross the boundary of a frozen region", spanMergeLockedError: "You can't merge locked cells!", spanUnmergeLockedError: "You can't unmerge locked cells!", + spanOverFilteredRow: "You can't merge cells over a filtered row.", + removeAlert: "You can't remove last $name!", }; ~~~ @@ -149,7 +182,106 @@ const en = { To apply a different locale you need to: -- provide translation for all text labels in Spreadsheet, e.g. the Russian locale looks like this -- apply the new locale by calling the **dhx.i18n.setLocale()** method before initializing Spreadsheet +- provide translations for all text labels in Spreadsheet, e.g. for the Russian locale: + +~~~jsx +const ru = { + // language settings +}; +~~~ + +- apply the new locale by calling the `dhx.i18n.setLocale()` method before initializing Spreadsheet: + +~~~jsx +dhx.i18n.setLocale("spreadsheet", ru); +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: + +~~~jsx +const en = { + SUM: [ + [ + "Number1", + "Required. The first value to sum." + ], + [ + "Number2", + "Optional. The second value to sum." + ], + [ + "Number3", + "Optional. The third value to sum." + ] + ], + AVERAGE: [ + [ + "Number1", + "Required. A number or cell reference that refers to numeric values." + ], + [ + "Number2", + "Optional. A number or cell reference that refers to numeric values." + ] + ], + // more formulas' descriptions +}; +~~~ + +You can check the full default locale for formulas in the [HTML tab of the related snippet](https://snippet.dhtmlx.com/yn5hyyim). + +## Custom locale for formulas + +To apply a custom locale for Spreadsheet formulas, you need to use the `dhx.i18n.setLocale()` method in the following way: + +~~~jsx +dhx.i18n.setLocale( + "formulas", + locale: { + // the structure of the formulas in the locale + name: [param: string, description: string][] + } +): void; +~~~ + +You should pass the following parameters to the method: + + + + + + + + + + + + + + + + +
ParameterDescription
"formulas"(*required*) the name of the locale for formulas
locale(*required*) the locale object that contains formulas' descriptions as key:value pairs, where:
  • the key is the name of the function
  • the value is an array of parameters the function takes. Each parameter of the function is an array of two elements, where:
    • the first element is the name of the parameter
    • the second element is the description of the parameter
+ +Check the example below: + +~~~jsx +const de = { + AVERAGE: [ + ["Zahl1", "Erforderlich. Eine Zahl oder Zellreferenz, die sich auf numerische Werte bezieht."], + ["Zahl2", "Optional. Eine Zahl oder Zellreferenz, die auf numerische Werte verweist."] + ], + // other formulas' descriptions +}; + +dhx.i18n.setLocale("formulas", de); +~~~ + +## Example + +In this snippet you can see how to switch between locales: diff --git a/docs/migration.md b/docs/migration.md index 3a682ebb..98114431 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -6,6 +6,79 @@ description: You can learn about migration in the documentation of the DHTMLX Ja # Migration to newer versions +## 5.1 -> 5.2 + +### Freezing/unfreezing functionality + +In v5.2 the way of freezing/unfreezing columns and rows has been modified: + +- the `leftSplit` and `topSplit` configuration properties that have been used for fixing columns and rows are deprecated + +~~~jsx title="Before v5.2" +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + topSplit: 1, // the number of row to "freeze" + leftSplit: 1 // the number of columns to "freeze" +}); +~~~ + +- new API methods are introduced: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +~~~jsx title="From v5.2" +// for rows +spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen + +// for columns +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 +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +- 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 +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); +~~~ + +- new `freeze` property for the *sheets* object of the [`parse()`](api/spreadsheet_parse_method.md) method is added. It allows fixing rows and columns for particular sheets in the dataset, while parsing data into Spreadsheet: + +~~~jsx {10-13} title="From v5.2" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // more "sheet_1" settings + }, + // more sheets configuration objects + ] +}; + +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. diff --git a/docs/whats_new.md b/docs/whats_new.md index f22152bf..9612b11e 100644 --- a/docs/whats_new.md +++ b/docs/whats_new.md @@ -8,6 +8,56 @@ description: You can learn what's new in the DHTMLX JavaScript Spreadsheet libra If you are updating Spreadsheet from an older version, check [Migration to Newer Version](migration.md) for details. +## Version 5.2 + +Released on May 20, 2025 + +[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/) + +### Breaking changes + +The new release introduces some changes to the freezing/unfreezing functionality for columns and rows. Check the [Migration guide](migration.md/#51---52) to keep in step with the latest version. + +### Deprecated + +- The `leftSplit` and `topSplit` configuration properties are removed + +### New functionality + +- Editing cells: + - the ability to [create a styled border for a group of cells via UI](data_formatting.md/#styled-borders-for-cells) +- Freezing/unfreezing columns/rows: + - the ability to freeze/unfreeze columns and rows via [UI](work_with_rows_cols.md/#freezingunfreezing-rows-and-columns) + - the ability to freeze/unfreeze columns and rows via [API](working_with_ssheet.md/#freezingunfreezing-rows-and-columns) + - new methods: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + - new action: [`toggleFreeze`](api/overview/actions_overview.md/#list-of-actions) + - new `freeze` property for the *sheets* object of the [`parse()`](api/spreadsheet_parse_method.md) method +- Hiding/showing columns/rows: + - the ability to hide/show columns and rows via [UI](work_with_rows_cols.md/#hidingshowing-rows-and-columns) + - the ability to hide/show columns and rows via [API](working_with_ssheet.md/#hidingshowing-rows-and-columns) + - new methods: [`hideCols()`](api/spreadsheet_hidecols_method.md), [`showCols()`](api/spreadsheet_showcols_method.md), [`hideRows()`](api/spreadsheet_hiderows_method.md), [`showRows()`](api/spreadsheet_showrows_method.md) + - new action: [`toggleVisibility`](api/overview/actions_overview.md/#list-of-actions) + - new `hidden` property for the *cols* and *rows* configs of the *sheets* object of the [`parse()`](api/spreadsheet_parse_method.md) method +- Working with formulas: + - [popup with descriptions for formulas](functions.md/#popup-with-formula-description) is added + - new locale: [`formulas`](localization.md/#default-locale-for-formulas) is added +- File import: + - new [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md) event is added to indicate that data loading into Spreadsheet has been completed + +### Fixes + +- The issue with sorting +- The issue with the filter shifting to a new column +- The error that occurred on blocking a sheet adding with the "addSheet" action +- The issue with filtering blank cells +- The problem with editing a large spanned table +- The error that occurred on undoing an action in a cell +- The error that occurred on entering/editing a cell with the IF formula +- The script error that occurred after cutting and pasting a link +- The issue with changing the text alignment during export/import of an .xlsx file +- The issue with Spreadsheet losing focus after some actions +- Performance improvements + ## Version 5.1.8 Released on December 10, 2024 @@ -303,7 +353,7 @@ Version 4.3 doesn't bring any breaking changes but introduces a new way of handl ### New functionality - The ability to add a drop-down list of options into the cells via the [`setValidation()`](api/spreadsheet_setvalidation_method.md) method or via [UI](work_with_cells.md#using-drop-down-lists-in-cells) -- The ability to fix rows on the top of the spreadsheet via the [`topSplit`](api/spreadsheet_topsplit_config.md) property +- The ability to fix rows on the top of the spreadsheet via the `topSplit` property - The ability to sort data via the [`sortCells()`](api/spreadsheet_sortcells_method.md) method or via [UI](sorting_data.md) - [The ability to split long text into multiple lines](data_formatting.md#wrap-text-in-a-cell) (*Text wrapping* button is added into the toolbar) - Significantly extended list of supported [Date, Financial, Math, String functions](functions.md#information-functions) (marked with *added in v4.3* label) @@ -490,7 +540,7 @@ Released on October 19, 2020 - [Math functions](functions.md) - [TypeScript Support](using_typescript.md) -- The ability [to freeze columns on the left side of the spreadsheet](configuration.md#frozen-rows-and-columns) via the [leftSplit](api/spreadsheet_leftsplit_config.md) configuration property +- The ability to freeze columns on the left side of the spreadsheet via the `leftSplit` configuration property - [The Text format for displaying the content of a cell as text is added to default number formats](number_formatting.md#default-number-formats) - The ability to select multiple scattered ranges of cells by using ["Ctrl+Shift+Left Click"](hotkeys.md#selection) combination diff --git a/docs/work_with_rows_cols.md b/docs/work_with_rows_cols.md index e9c84ed0..ab8179d8 100644 --- a/docs/work_with_rows_cols.md +++ b/docs/work_with_rows_cols.md @@ -6,77 +6,89 @@ description: You can learn about how to work with rows and columns in the docume # Work with rows and columns -DHTMLX Spreadsheet allows adding and removing columns and rows into a sheet via both toolbar buttons and options of the context menu. +DHTMLX Spreadsheet allows adding/removing columns and rows, automatically fitting the column width to the content, freezing/unfreezing columns and rows, as well as hiding/showing columns and rows via toolbar buttons, menu options and the options of the context menu of a cell. -## Adding rows +## Adding/removing rows and columns + +### Adding rows To add a new row, take the following steps: -1\. Select a row by clicking on its header. +1\. Select a row (by clicking on its header) or a cell in the necessary row. + +2\. Choose one of the following actions: -2\. Choose one of the two actions: +- either click the **Rows** button in the toolbar and select the *Add row above* option -- click the **Add row** button in the toolbar +![Adding rows toolbar](assets/add_row_button.png) -![Adding rows](assets/add_row_button.png) +- or select the **Insert** menu option and choose *Rows -> Add row above* -- or right-click the row and choose *Rows -> Add row* +![Adding rows menu](assets/add_row_menu.png) -![Adding rows](assets/add_row_context_menu.png) +- or right-click the row or a cell in the row and choose *Rows -> Add row above* -{{note Note that a new row will be added above the selected one.}} +![Adding rows context menu](assets/add_row_context_menu.png) -## Removing rows +### Removing rows To remove a row, take the following steps: -1\. Select a row by clicking on its header. +1\. Select a row (by clicking on its header) or a cell in the row. -2\. Choose one of the two actions: +2\. Choose one of the following actions: -- click the **Remove row** button in the toolbar +- click the **Rows** button in the toolbar and select the *Remove row* option -![Removing rows](assets/remove_row_button.png) +![Removing rows toolbar](assets/remove_row_button.png) -- or right-click the row and choose *Rows -> Remove row* +- or select the **Insert** menu option and choose *Rows -> Remove row* -![Removing rows](assets/remove_row_context_menu.png) +![Removing rows menu](assets/remove_row_menu.png) -## Adding columns +- or right-click the row or a cell in the row and choose *Rows -> Remove row* -To add a new column, take the following steps: +![Removing rows context menu](assets/remove_row_context_menu.png) -1\. Select a column by clicking on its header. +### Adding columns -2\. Choose one of the two actions: +To add a new column, take the following steps: -- click the **Add column** button in the toolbar +1\. Select a column (by clicking on its header) or a cell in the necessary column. -![Adding columns](assets/add_column_button.png) +2\. Choose one of the following actions: -- or right-click the column and choose *Columns -> Add column* +- either click the **Columns** button in the toolbar and select the *Add column left* option -![Adding columns](assets/add_column_context_menu.png) +![Adding columns toolbar](assets/add_column_button.png) -{{note Note that a new column will be added to the left of the selected one.}} +- or select the **Insert** menu option and choose *Columns -> Add column left* +![Adding columns menu](assets/add_column_menu.png) +- or right-click the column or a cell in the column and choose *Columns -> Add column left* -## Removing columns +![Adding columns](assets/add_column_context_menu.png) + +### Removing columns To remove a column, take the following steps: -1\. Select a column by clicking on its header. +1\. Select a column (by clicking on its header) or a cell in the column. + +2\. Choose one of the following actions: + +- click the **Columns** button in the toolbar and select the *Remove column* option -2\. Choose one of the two actions: +![Adding columns toolbar](assets/remove_column_button.png) -- click the Remove column button in the toolbar +- or select the **Insert** menu option and choose *Columns -> Remove column* -![Adding columns](assets/remove_column_button.png) +![Removing columns menu](assets/remove_column_menu.png) -- or right-click the column and choose *Columns -> Remove column* +- or right-click the column or a cell in the column and choose *Columns -> Remove column* -![Adding columns](assets/remove_column_context_menu.png) +![Adding columns context menu](assets/remove_column_context_menu.png) ## AutoFit column width @@ -94,4 +106,150 @@ To change the column width so that it would automatically fit the longest conten 2\. Choose *Columns -> Fit to data* -![Autofit column width](assets/column_autofit.png) \ No newline at end of file +![Autofit column width](assets/column_autofit.png) + +## Freezing/unfreezing rows and columns + +### Freezing rows + +To freeze rows up to a certain row, take the following steps: + +1\. Select a row (by clicking on its header) or a cell in the necessary row. + +2\. Choose one of the following actions: + +- either click the **Rows** button in the toolbar and select the *Freeze up to row [id]* option + +![Freezing rows toolbar](assets/freeze_rows_toolbar.png) + +- or select the **Edit** menu option and choose *Freeze -> Freeze up to row [id]* + +![Freezing rows menu](assets/freeze_rows_menu.png) + +- or right-click a row or a cell in the row and choose *Rows -> Freeze up to row [id]* + +![Freezing rows context menu](assets/freeze_rows_context_menu.png) + +### Unfreezing rows + +(*In the images below rows are frozen up to the row 5*) + +To unfreeze rows, take one of the following steps: + +- either click the **Rows** button in the toolbar and select the *Unfreeze rows* option + +![Unfreezing rows toolbar](assets/unfreeze_rows_toolbar.png) + +- or select the **Edit** menu option and choose *Freeze -> Unfreeze rows* + +![Unfreezing rows menu](assets/unfreeze_rows_menu.png) + +- or right-click any cell and choose *Rows -> Unfreeze rows* + +![Unfreezing rows context menu](assets/unfreeze_rows_context_menu.png) + +### Freezing columns + +To freeze columns up to a certain column, take the following steps: + +1\. Select a column (by clicking on its header) or a cell in the necessary column. + +2\. Choose one of the following actions: + +- either click the **Columns** button in the toolbar and select the *Freeze up to column [id]* option + +![Freezing columns toolbar](assets/freeze_columns_toolbar.png) + +- or select the **Edit** menu option and choose *Freeze -> Freeze up to column [id]* + +![Freezing columns menu](assets/freeze_columns_menu.png) + +- or right-click a column or a cell in the column and choose *Columns -> Freeze up to column [id]* + +![Freezing columns context menu](assets/freeze_columns_context_menu.png) + +### Unfreezing columns + +(*In the images below columns are frozen up to the column D*) + +To unfreeze columns, take one of the following steps: + +- either click the **Columns** button in the toolbar and select the *Unfreeze columns* option + +![Unfreezing columns toolbar](assets/unfreeze_columns_toolbar.png) + +- or select the **Edit** menu option and choose *Freeze -> Unfreeze columns* + +![Unfreezing columns menu](assets/unfreeze_columns_menu.png) + +- or right-click any cell and choose *Columns -> Unfreeze columns* + +![Unfreezing columns context menu](assets/unfreeze_columns_context_menu.png) + +## Hiding/showing rows and columns + +### Hiding rows + +To hide a row, take the following steps: + +1\. Select a row (by clicking on its header) or a cell in the necessary row. + +2\. Choose one of the following actions: + +- either click the **Rows** button in the toolbar and select the *Hide row(s) [id]* option + +![Hiding rows toolbar](assets/hide_rows_toolbar.png) + +- or right-click a row or a cell in the row and choose *Rows -> Hide row(s) [id]* + +![Hiding rows context menu](assets/hide_row_context_menu.png) + +### Showing rows + +To show hidden rows, take one of the following steps: + +- either click the "arrows" icon that appears in the rows header instead of the hidden row/rows + +(*In the image below the rows 8 and 11 are hidden*) + +![Showing rows](assets/show_rows.png) + +- or select rows or several cells so that the hidden rows were included into the selection, right-click to call the context menu and choose *Rows -> Show rows* + +(*In the image below the row 8 is hidden*) + +![Showing rows context menu](assets/show_rows_context_menu.png) + +### Hiding columns + +To hide a column, take the following steps: + +1\. Select a column (by clicking on its header) or a cell in the necessary column. + +2\. Choose one of the following actions: + +- either click the **Columns** button in the toolbar and select the *Hide column(s) [id]* option + +![Hiding columns toolbar](assets/hide_columns_toolbar.png) + +- or right-click a column or a cell in the column and choose *Columns -> Hide column(s) [id]* + +![Hiding columns context menu](assets/hide_column_context_menu.png) + +### Showing columns + +To show hidden columns, take one of the following steps: + +- either click the "arrows" icon that appears in the columns header instead of the hidden column/columns + +(*In the image below the columns C and E are hidden*) + +![Showing columns](assets/show_columns.png) + +- or select columns or several cells so that the hidden columns were included into the selection, right-click to call the context menu and choose *Columns -> Show columns* + +(*In the image below the column C is hidden*) + +![Showing columns context menu](assets/show_columns_context_menu.png) + + diff --git a/docs/working_with_cells.md b/docs/working_with_cells.md index e0cf6b73..82630e94 100644 --- a/docs/working_with_cells.md +++ b/docs/working_with_cells.md @@ -26,7 +26,10 @@ spreadsheet.setValue("B6,A1:D1",5); spreadsheet.setValue("A1:D1",[1,2,3]); ~~~ -{{note Please note that 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.}} +:::note +Please note that 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 [`parse()`](api/spreadsheet_parse_method.md) method. +::: + ### Get values @@ -57,7 +60,7 @@ spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]); The drop-down list will limit the choice of the end user. It will show the *Invalid value* message when the user completes a cell with an unexpected value. :::info -The [](api/spreadsheet_setvalidation_method.md) method can also remove validation from the specified cells. [Check the details](../api/spreadsheet_setvalidation_method/#details). +The [`setValidation()`](api/spreadsheet_setvalidation_method.md) method can also remove validation from the specified cells. [Check the details](../api/spreadsheet_setvalidation_method/#details). ::: ## Inserting a hyperlink into a cell @@ -85,7 +88,7 @@ spreadsheet.insertLink("A2"); You can apply certain styling to a cell or a range of cells via the [](api/spreadsheet_setstyle_method.md) method. It takes two parameters: - **cells** - (*string*) the id(s) of a cell(s) or a range of cells -- **style** - (*object/array*) styles that should be applied to cells +- **styles** - (*object/array*) styles that should be applied to cells ~~~jsx // setting style for one cell @@ -98,7 +101,9 @@ spreadsheet.setStyle("B6,A1:D1", {color: "blue"}); spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); ~~~ -{{note The method allows setting the same style for the specified cells. In case you want to apply different styles to spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method.}} +:::note +The method allows setting the same style for the specified cells. In case you want to apply different styles to spreadsheet cells, you'd better use the [`parse()`](api/spreadsheet_parse_method.md) method. +::: ### Get styles diff --git a/docs/working_with_ssheet.md b/docs/working_with_ssheet.md index 4ea96cf5..68c3a5dd 100644 --- a/docs/working_with_ssheet.md +++ b/docs/working_with_ssheet.md @@ -69,6 +69,122 @@ To change the column width so that it would automatically adjust to the longest spreadsheet.fitColumn("G2"); ~~~ +## Freezing/unfreezing rows and columns + +You may need to fix (or "freeze") some columns or rows, so that they will become static when you scroll the page, while the rest of columns/rows remain movable. + +### Columns + +To freeze/unfreeze columns, use the related API methods: + +- [](api/spreadsheet_freezecols_method.md) +- [](api/spreadsheet_unfreezecols_method.md) + +Pass to the methods the id of the cell to define the id of a column. If the cell id isn't passed, the currently selected cell will be used. + +~~~jsx +// freezing columns +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 + +// unfreezing columns +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +### Rows + +To freeze/unfreeze rows, use the related API methods: + +- [](api/spreadsheet_freezerows_method.md) +- [](api/spreadsheet_unfreezerows_method.md) + +Pass to the methods the id of the cell to define the id of a row. If the cell id isn't passed, the currently selected cell will be used. + +~~~jsx +// freezing rows +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 + +// unfreezing rows +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen +~~~ + +### Freezing rows/columns in the dataset + +You can also fix rows and columns for particular sheets in the dataset, while parsing data into Spreadsheet. +For this, use the `freeze` property in the *sheets* object of the [`parse()`](api/spreadsheet_parse_method.md) method: + +~~~jsx {10-13} +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // more "sheet_1" settings + }, + // more sheets configuration objects + ] +}; + +spreadsheet.parse(data); +~~~ + +## Hiding/showing rows and columns + +You can hide and show particular rows and columns via the corresponding API methods. + +### Columns + +To hide/show a column, use the following methods: + +- [](api/spreadsheet_hidecols_method.md) +- [](api/spreadsheet_showcols_method.md) + +Pass to the methods the id of the cell to define the id of a column. If the cell id isn't passed, the currently selected cell will be used. + +~~~jsx +// hiding columns +spreadsheet.hideCols("B2"); // the "B" column will be hidden +spreadsheet.hideCols("sheet2!B2"); // the "B" column in "sheet2" will be hidden +spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden + +// showing columns +spreadsheet.showCols("B2"); // the "B" column will become visible again +spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become visible again +spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again +~~~ + +### Rows + +To hide/show a row, use the API methods below: + +- [](api/spreadsheet_hiderows_method.md) +- [](api/spreadsheet_showrows_method.md) + +Pass to the methods the id of the cell to define the id of a row. If the cell id isn't passed, the currently selected cell will be used. + +~~~jsx +// hiding rows +spreadsheet.hideRows("B2"); // the "2" row will be hidden +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 + +// showing rows +spreadsheet.showRows("B2"); // the "2" row will become visible again +spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visible again +spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again +~~~ + ## Filtering data ### Set filter diff --git a/sidebars.js b/sidebars.js index 90097b89..857abcc2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -58,6 +58,8 @@ module.exports = { "api/spreadsheet_eachcell_method", "api/spreadsheet_endedit_method", "api/spreadsheet_fitcolumn_method", + "api/spreadsheet_freezecols_method", + "api/spreadsheet_freezerows_method", "api/spreadsheet_getactivesheet_method", "api/spreadsheet_getfilter_method", "api/spreadsheet_getformat_method", @@ -65,6 +67,8 @@ module.exports = { "api/spreadsheet_getsheets_method", "api/spreadsheet_getstyle_method", "api/spreadsheet_getvalue_method", + "api/spreadsheet_hidecols_method", + "api/spreadsheet_hiderows_method", "api/spreadsheet_hidesearch_method", "api/spreadsheet_insertlink_method", "api/spreadsheet_islocked_method", @@ -82,9 +86,13 @@ module.exports = { "api/spreadsheet_setstyle_method", "api/spreadsheet_setvalidation_method", "api/spreadsheet_setvalue_method", + "api/spreadsheet_showcols_method", + "api/spreadsheet_showrows_method", "api/spreadsheet_sortcells_method", "api/spreadsheet_startedit_method", "api/spreadsheet_undo_method", + "api/spreadsheet_unfreezecols_method", + "api/spreadsheet_unfreezerows_method", "api/spreadsheet_unlock_method" ] }, @@ -102,6 +110,7 @@ module.exports = { "api/spreadsheet_afterclear_event", "api/spreadsheet_aftercolumnadd_event", "api/spreadsheet_aftercolumndelete_event", + "api/spreadsheet_afterdataloaded_event", "api/spreadsheet_aftereditend_event", "api/spreadsheet_aftereditstart_event", "api/spreadsheet_afterfocusset_event", @@ -157,15 +166,13 @@ module.exports = { "api/spreadsheet_exportmodulepath_config", "api/spreadsheet_formats_config", "api/spreadsheet_importmodulepath_config", - "api/spreadsheet_leftsplit_config", "api/spreadsheet_localization_config", "api/spreadsheet_menu_config", "api/spreadsheet_multisheets_config", "api/spreadsheet_readonly_config", "api/spreadsheet_rowscount_config", "api/spreadsheet_timeformat_config", - "api/spreadsheet_toolbarblocks_config", - "api/spreadsheet_topsplit_config" + "api/spreadsheet_toolbarblocks_config" ] }, {