diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index 2c47fd59..6d263e34 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -19,7 +19,7 @@ toolbarBlocks?: array; ### Default config ~~~jsx -toolbarBlocks: ["undo", "colors", "decoration", "align", "cell", "format", "actions"] +toolbarBlocks: ["undo", "colors", "font", "decoration", "align", "cell", "format", "actions"] ~~~ ### Example @@ -30,6 +30,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { toolbarBlocks: [ "undo", "colors", + "font", "decoration", "align", "cell", @@ -59,6 +60,7 @@ Check how you can [customize the toolbar](customization.md/#toolbar). **Change log:** +- The *"font"* block was added in v6.0 - The *"cell"* block was added in v5.2 - The *"actions"* block was added in v5.0 diff --git a/docs/configuration.md b/docs/configuration.md index 997eb626..03892a61 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -10,13 +10,13 @@ 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", "cell", "format", "actions". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file", "help". +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"`, `"font"`, `"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. +The structure of toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. -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". +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", { @@ -28,26 +28,26 @@ Toolbar is [highly customizable](customization.md). You can add new controls, ch ## Editing bar -Since the structure of Spreadsheet is flexible, you can switch on/off the editing bar to get the desired look and feel of the component. Use the [](api/spreadsheet_editline_config.md) configuration option to hide/show +Since the structure of Spreadsheet is flexible, you can switch on/off the editing bar to get the desired look and feel of the component. Use the [`editLine`](api/spreadsheet_editline_config.md) configuration option to hide/show the editing bar. ## Number of rows and columns -When Spreadsheet is initialized, it has the initial configuration of grid which consists of 1000 columns and 25 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [](api/spreadsheet_colscount_config.md) and [](api/spreadsheet_rowscount_config.md) options for this purpose. +When Spreadsheet is initialized, it has the initial configuration of grid which consists of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose. ## 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): +The menu of the Spreadsheet is hidden by default. You can switch it on/off via the corresponding configuration option [`menu`](api/spreadsheet_menu_config.md): ## Read-only mode -It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [](api/spreadsheet_readonly_config.md) configuration option. +It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option. You can also [customize the readonly behavior of Spreadsheet](customization.md#custom-read-only-mode). @@ -57,7 +57,7 @@ You can also [customize the readonly behavior of Spreadsheet](customization.md#c There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". -You can redefine configuration of default formats or specify your own number format via the [](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article. +You can redefine configuration of default formats or specify your own number format via the [`formats`](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article. @@ -66,7 +66,7 @@ You can redefine configuration of default formats or specify your own number for DHTMLX Spreadsheet provides the possibility to import/export data in the Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data. After installing the necessary library, you need to set path to the **worker.js** file (either local or at CDN) -via the corresponding configuration option - [](api/spreadsheet_importmodulepath_config.md) or [](api/spreadsheet_exportmodulepath_config.md). +via the corresponding configuration option: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) or [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). All the details are given in the [Data Loading and Export](loading_data.md) article. diff --git a/docs/customization.md b/docs/customization.md index 8caed98f..aca5df7e 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -120,6 +120,8 @@ The [default toolbar](/#toolbar) contains the following blocks of controls: - the **Colors** block - the *Text color* button (id: "color") - the *Background color* button (id: "background") +- the **Font** block + - the *Font size* combobox (id: "font-size") - the **Decoration** block - the *Bold* button (id: "font-weight-bold") - the *Italic* button (id: "font-style-italic") @@ -234,6 +236,27 @@ In the example below the Undo button is removed from the toolbar: spreadsheet.toolbar.data.remove("undo"); ~~~ +### Custom font size + +You can redefine the list of available font sizes in the **Font** toolbar block by removing the existing items from the `"font-size"` combobox and adding your own: + +~~~jsx +const FONT_SIZES = [8, 10, 12, 14, 16, 20]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // configuration options +}); + +spreadsheet.toolbar.data.removeAll("font-size"); +spreadsheet.toolbar.data.add( + FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })), + -1, + "font-size" +); + +spreadsheet.parse(dataset); +~~~ + ## Menu ### Default controls