diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index f753eddc..498b7e9d 100644 --- a/docs/api/api_overview.md +++ b/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) | diff --git a/docs/api/overview/actions_overview.md b/docs/api/overview/actions_overview.md index 9390601e..ffb81236 100644 --- a/docs/api/overview/actions_overview.md +++ b/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) \ No newline at end of file diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index 557fa44f..6074a75e 100644 --- a/docs/api/overview/methods_overview.md +++ b/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) | diff --git a/docs/api/spreadsheet_hidecols_method.md b/docs/api/spreadsheet_hidecols_method.md new file mode 100644 index 00000000..dfaf342f --- /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 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 \ 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..8fa359b9 --- /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 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 \ No newline at end of file diff --git a/docs/api/spreadsheet_parse_method.md b/docs/api/spreadsheet_parse_method.md index 3cdc39e5..66597bf5 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, @@ -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" }, diff --git a/docs/api/spreadsheet_showcols_method.md b/docs/api/spreadsheet_showcols_method.md new file mode 100644 index 00000000..f8c1e27c --- /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 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 \ 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..8ed1cb6d --- /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 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 \ No newline at end of file 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/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_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/work_with_rows_cols.md b/docs/work_with_rows_cols.md index 841c62f7..a0279cdb 100644 --- a/docs/work_with_rows_cols.md +++ b/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) \ No newline at end of file +![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) + + diff --git a/docs/working_with_ssheet.md b/docs/working_with_ssheet.md index 95b1d303..699392b8 100644 --- a/docs/working_with_ssheet.md +++ b/docs/working_with_ssheet.md @@ -73,6 +73,25 @@ spreadsheet.fitColumn("G2"); 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. +### 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 second row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second 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 +~~~ + ### Columns To freeze/unfreeze columns, use the related API methods: @@ -83,26 +102,59 @@ To freeze/unfreeze columns, use the related API methods: 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 ~~~ +## Hiding/showing rows and columns + +You can hide and show particular rows and columns via the corresponding API methods. + ### Rows -To freeze/unfreeze rows, use the related API methods: +To hide/show a row, use the API methods below: -- [](api/spreadsheet_freezerows_method.md) -- [](api/spreadsheet_unfreezerows_method.md) +- [](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. +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 -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 +// 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 +~~~ + +### 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 ~~~ ## Filtering data diff --git a/sidebars.js b/sidebars.js index 8154485b..857abcc2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -67,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", @@ -84,6 +86,8 @@ 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",