[add] hiding/showing cols/rows api, update related guides

docs/api/api_overview.md

@@ -43,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)       |
@@ -60,6 +62,8 @@ 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)   |

docs/api/overview/actions_overview.md

@@ -74,12 +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                                                                                                                                                |
-| **toggleFreeze**     | The action is executed when freezing/unfreezing columns/rows                                                                                                       |
+| **toggleVisibility** | The action is executed when hiding/showing a column or a row                                                                                                                                            |
+| **toggleFreeze**     | The action is executed when freezing/unfreezing columns/rows                                                                                                                                            |
 | **unmerge**          | The action is executed when splitting cells                                                                                                                                                             |
 
 **Change log:**
 
-- The **toggleFreeze** action was added in v5.2
+- 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)

docs/api/overview/methods_overview.md

@@ -26,6 +26,8 @@ description: You can have a Methods overview of the DHTMLX JavaScript Spreadshee
 | [](../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)     |
@@ -44,6 +46,8 @@ 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)   |

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 column "B" in "sheet2" will be hidden
+spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden
+~~~
+
+
+**Related article:** [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

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 article:** [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

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,
@@ -99,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
@@ -163,14 +179,14 @@ const data = {
             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" },

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 column "B" in "sheet2" will become visible again
+spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again
+~~~
+
+**Related article:** [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

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 article:** [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

docs/work_with_rows_cols.md

@@ -8,7 +8,9 @@ description: You can learn about how to work with rows and columns in the docume
 
 DHTMLX Spreadsheet allows adding and removing columns and rows into a sheet via both toolbar buttons and options of the context menu.
 
-## Adding rows
+## Adding/removing rows and columns
+
+### Adding rows
 
 To add a new row, take the following steps:
 
@@ -28,7 +30,7 @@ To add a new row, take the following steps:
 Note that a new row will be added above the selected one.
 :::
 
-## Removing rows
+### Removing rows
 
 To remove a row, take the following steps:
 
@@ -44,7 +46,7 @@ To remove a row, take the following steps:
 
 ![Removing rows](assets/remove_row_context_menu.png)
 
-## Adding columns
+### Adding columns
 
 To add a new column, take the following steps:
 
@@ -64,7 +66,7 @@ To add a new column, take the following steps:
 Note that a new column will be added to the left of the selected one.
 :::
 
-## Removing columns
+### Removing columns
 
 To remove a column, take the following steps:
 
@@ -104,7 +106,7 @@ To change the column width so that it would automatically fit the longest conten
 
 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.
+1\. Select a column (by clicking on its header) or a cell in the necessary column.
 
 2\. Choose one of the following actions:
 
@@ -174,4 +176,52 @@ To unfreeze columns, take one of the following steps:
 
 - or right-click any column/cell and choose *Columns -> Unfreeze columns*
 
-![Unfreezing columns context menu](assets/unfreeze_columns_context_menu.png)
+![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/cell and choose *Rows -> Hide row(s) [id]*
+
+![Hiding rows context menu](assets/hide_row_context_menu.png)
+
+### Showing rows
+
+To show a hidden row/rows, 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)
+
+### 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/cell and choose *Columns -> Hide column(s) [id]*
+
+![Hiding columns context menu](assets/hide_column_context_menu.png)
+
+### Showing columns
+
+To show a hidden column/columns, 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)
+
+