From c491e15a78a34c99219accffdedffa55f3685b60 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Tue, 14 Apr 2026 08:38:08 +0300 Subject: [PATCH] Rewrite guides using optimised skill (/article-guide) --- docs/guides/configuration.md | 182 +++++++++++++----------- docs/guides/exporting-data.md | 12 +- docs/guides/initialization.md | 26 ++-- docs/guides/integration-with-angular.md | 70 ++++----- docs/guides/integration-with-react.md | 62 ++++---- docs/guides/integration-with-svelte.md | 62 ++++---- docs/guides/integration-with-vue.md | 62 ++++---- docs/guides/loading-data.md | 44 +++--- docs/guides/localization.md | 38 ++--- docs/guides/stylization.md | 54 +++---- docs/guides/typescript-support.md | 12 +- docs/guides/working-with-data.md | 173 +++++++++++----------- 12 files changed, 403 insertions(+), 394 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 70a66c2..7a9bb69 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,34 +6,34 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure Pivot appearance and functionality via the corresponding API, namely, you can configure the Pivot table elements and the configuration panel. The available parameters will allow you to: +Configure Pivot appearance and functionality with the following API: -- define the structure of the Pivot table and how data is aggregated via the [`config`](/api/config/config-property) property -- change the table configuration on the fly via the [`render-table`](/api/events/render-table-event) event -- configure the look of the Pivot table via the [`tableShape`](/api/config/tableshape-property) property -- configure the look and behavior of the Pivot columns via the [`columnShape`](/api/config/columnshape-property) property -- configure the look and behavior of headers in the Pivot table via the [`headerShape`](/api/config/headershape-property) property -- control the visibility of the configuration panel via the [`configPanel`](/api/config/configpanel-property) property -- apply the desired locale via the [`setLocale()`](/api/methods/setlocale-method) method (see the [Localization](/guides/localization) section) -- load data and fields via the corresponding [`data`](/api/config/data-property) and [`fields`](/api/config/fields-property) properties -- define how data should be modified before it's applied via the [`predicates`](/api/config/predicates-property) property -- define custom mathematical methods for data aggregation via the [`methods`](/api/config/methods-property) property -- control the maximum limit for the number of rows and columns in the final dataset via the [`limits`](/api/config/limits-property) property +- [`config`](/api/config/config-property) — define the Pivot table structure and data aggregation +- [`render-table`](/api/events/render-table-event) — change the table configuration on the fly +- [`tableShape`](/api/config/tableshape-property) — configure the look of the Pivot table +- [`columnShape`](/api/config/columnshape-property) — configure the look and behavior of columns +- [`headerShape`](/api/config/headershape-property) — configure the look and behavior of headers +- [`configPanel`](/api/config/configpanel-property) — control the visibility of the configuration panel +- [`setLocale()`](/api/methods/setlocale-method) — apply a locale (see [Localization](/guides/localization)) +- [`data`](/api/config/data-property), [`fields`](/api/config/fields-property) — load data and fields +- [`predicates`](/api/config/predicates-property) — define how data is modified before the table renders +- [`methods`](/api/config/methods-property) — define custom aggregation methods +- [`limits`](/api/config/limits-property) — control the maximum number of rows and columns in the dataset -All instructions about working with data see here: [Working with data](/guides/working-with-data) +For data-related configuration, see [Working with data](/guides/working-with-data). -You can configure and/or customize the following elements of the Pivot table: +You can configure the following elements of the Pivot table: - columns and rows - headers and footers - cells - the table sizes -## Resizing the table +## Resize the table -You can change the size of the table rows and columns, header and footer using the [`tableShape`](/api/config/tableshape-property) property. +Use the [`tableShape`](/api/config/tableshape-property) property to change the size of table rows, columns, headers, and footers. -The next sizes are applied by default: +The following sizes apply by default: ~~~jsx const sizes = { @@ -44,7 +44,7 @@ const sizes = { }; ~~~ -Example: +The following code snippet applies custom sizes: ~~~jsx {4-11} const table = new pivot.Pivot("#root", { @@ -79,19 +79,19 @@ const table = new pivot.Pivot("#root", { To set the width of specific column(s), apply the `width` parameter of the [columnShape property](/api/config/columnshape-property). ::: -## Autosizing columns to content +## Autosize columns to content -The widget allows setting the minimum width value for all columns and it also enables sizing for the table data only, the table header or combined auto sizing. To configure all these autosizing settings, you should apply the `autoWidth` parameter of the [`columnShape`](/api/config/columnshape-property) property. +Use the `autoWidth` parameter of the [`columnShape`](/api/config/columnshape-property) property to configure autosizing settings. The parameter controls the minimum column width and lets you enable autosizing based on data, headers, or both. -All parameters of `autoWidth` are optional and for detailed description of each parameter refer to the [columnShape](/api/config/columnshape-property) property. +All `autoWidth` parameters are optional. For a full parameter description, see [`columnShape`](/api/config/columnshape-property). -- use the `columns` parameter to define if the width of columns should be calculated automatically and which columns will be affected -- use the `auto` parameter to adjust the width to the header or cell content (or both) -- use `maxRows` to specify how many data rows will be applied to detect the size of a column; by default 20 rows are used +- `columns` — define which columns use automatic width calculation +- `auto` — adjust width to header content, cell content, or both +- `maxRows` — specify the number of data rows used to detect column size (default: 20) -If `firstOnly` is set to **true** (default), each field of the same data is analyzed only once to calculate the column width. In case of multiple columns based on the same data (e.g., the *oil* field with the *count* operation and the *oil* field with the *sum* operation), only data in the first one will be analyzed and the others will inherit this width. +If `firstOnly` is set to `true` (default), each field of the same data is analyzed only once to calculate the column width. In case of multiple columns based on the same data (e.g., the *oil* field with the *count* operation and the *oil* field with the *sum* operation), only data in the first one is analyzed and the others inherit this width. -Example: +The following code snippet enables autosizing for specific columns: ~~~jsx {18-30} const table = new pivot.Pivot("#root", { @@ -127,13 +127,13 @@ const table = new pivot.Pivot("#root", { }); ~~~ -## Applying templates to cells +## Apply templates to cells -### Adding templates via tableShape +### Add templates via tableShape -To set a template to cells, use the `templates` parameter of the [`tableShape`](/api/config/tableshape-property) property. It's an object where each key is a field id and the value is a function that returns a string. All columns based on the specified field will have the related template applied. +Use the `templates` parameter of the [`tableShape`](/api/config/tableshape-property) property to set a template for cells. The `templates` parameter is an object where each key is a field id and the value is a function that returns a string. All columns based on the specified field have the related template applied. -In the example below we apply the template to the *state* cells to show the combined name of a state (the full name and abbreviation). +The following code snippet applies a template to *state* cells to display the combined state name with abbreviation: ~~~jsx {10-15} const states = { @@ -172,11 +172,11 @@ const table = new pivot.Pivot("#root", { }); ~~~ -### Adding a template via the template helper +### Add a template via the template helper -You can insert HTML content to table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the `column` object. You need to apply the template right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. +Insert HTML content to table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the `column` object. Apply the template right before the table renders by intercepting the [`render-table`](/api/events/render-table-event) event with the [`api.intercept()`](/api/internal/intercept-method) method. -The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score): +The following code snippet adds star and flag icons to body cells based on the field (id, user_score): ~~~js function cellTemplate(value, method, row, column) { @@ -213,19 +213,19 @@ widget.api.intercept("render-table", ({ config: tableConfig }) => { }); ~~~ -## Applying templates to headers +## Apply templates to headers -### Adding templates via headerShape +### Add templates via headerShape -To define the format of text in headers, apply the `template` parameter of the [`headerShape`](/api/config/headershape-property) property. The parameter is the function that: +Use the `template` parameter of the [`headerShape`](/api/config/headershape-property) property to define the format of text in headers. The parameter is a function that: -- takes the field id, label and sublabel (the name of a method if any is applied) -- returns the processed value +- takes the field id, label, and sublabel (the name of a method if any is applied) +- returns the processed value -A default template is as follows: *template: (label, id, subLabel) => label + (subLabel ? `(${subLabel})` : "")*. By default, for the fields applied as values the label and method are shown (e.g., *Oil(count)*). -If no other template is applied to columns, the value of the `label` parameter is displayed. If any [`predicates`](/api/config/predicates-property) template is applied, it will override the template of the `headerShape` property. +The default template is: *template: (label, id, subLabel) => label + (subLabel ? `(${subLabel})` : "")*. By default, for fields applied as values, the label and method appear (e.g., *Oil(count)*). +If no other template is applied to columns, the value of the `label` parameter is displayed. If a [`predicates`](/api/config/predicates-property) template is applied, it overrides the template of the `headerShape` property. -In the example below for the **values** fields the header will display the label, the method name (subLabel) and converts the result to lowercase (e.g., *profit (sum)*): +The following code snippet sets a custom header template that displays the label, method name, and converts the result to lowercase (e.g., *profit (sum)*): ~~~jsx {3-6} new pivot.Pivot("#pivot", { @@ -253,11 +253,11 @@ new pivot.Pivot("#pivot", { }); ~~~ -### Adding templates via the template helper +### Add templates via the template helper -You can insert HTML content to header cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header cell object. You need to apply the template right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. +Insert HTML content to header cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header cell object. Apply the template right before the table renders by intercepting the [`render-table`](/api/events/render-table-event) event with the [`api.intercept()`](/api/internal/intercept-method) method. -The example below shows how to add icons to: +The following code snippet adds icons to: - the header labels based on the field name (for example, if the field is "id", it adds the globe icon next to the header value) - the column headers based on the value (colored arrow indicators are added) @@ -294,9 +294,9 @@ widget.api.intercept("render-table", ({ config: tableConfig }) => { }); ~~~ -## Making columns collapsible +## Make columns collapsible -It's possible to collapse/expand columns that are under one header. To make columns collapsible, use the value of the `collapsible` parameter of the [`headerShape`](/api/config/headershape-property) property by setting it to **true**. +Collapse and expand columns that share a header. Use the `collapsible` parameter of the [`headerShape`](/api/config/headershape-property) property and set it to `true`. ~~~jsx {4-6} const table = new pivot.Pivot("#root", { @@ -322,13 +322,13 @@ const table = new pivot.Pivot("#root", { }); ~~~ -## Freezing columns +## Freeze columns -The widget allows freezing columns on the left or right side, which makes the columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` or `right` parameter to **true**. More details with examples, see below. +Use the `split` parameter of the [`tableShape`](/api/config/tableshape-property) property to freeze columns on the left or right side. Frozen columns stay visible while scrolling. Set the `left` or `right` parameter to `true`. For more details and examples, see the sections below. -### Freezing columns on the left +### Freeze columns on the left -The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. In the sample below, 1 column is fixed initially on the left, which is equal to the number of fields defined for the "rows" area. +The number of frozen columns equals the number of row fields defined in the [`config`](/api/config/config-property) property. In `tree` mode, only one column is frozen regardless of the number of row fields. In the sample below, 1 column is fixed on the left, which equals the number of fields defined for the "rows" area. ~~~jsx {19} const table = new pivot.Pivot("#root", { @@ -354,9 +354,9 @@ const table = new pivot.Pivot("#root", { }); ~~~ -You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans. +Apply a custom split using the [`render-table`](/api/events/render-table-event) event. Splitting columns with colspans is not recommended. -In the sample below all columns from the "rows" area and first 4 columns from the "values" area are fixed initially. The number of columns that are split depends on the number of the rows and values fields that are defined via the [`config`](/api/config/config-property) property. +The following code snippet fixes all columns from the "rows" area and the first 4 columns from the "values" area. The number of split columns depends on the number of rows and values fields defined in the [`config`](/api/config/config-property) property. ~~~jsx {19-25} const table = new pivot.Pivot("#root", { @@ -386,9 +386,9 @@ table.api.on("render-table", (tableConfig) => { }); ~~~ -### Freezing columns on the right +### Freeze columns on the right -The `right` parameter of the [`tableShape`](/api/config/tableshape-property) property allows fixing total columns on the right. +Use the `right` parameter of the [`tableShape`](/api/config/tableshape-property) property to fix total columns on the right. ~~~jsx {4-7} const widget = new pivot.Pivot("#pivot", { @@ -415,7 +415,7 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ -To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans. In the sample below, 2 columns on the right are fixed initially. +To fix custom columns on the right, apply the table API via the [`render-table`](/api/events/render-table-event) event. Splitting columns with colspans is not recommended. The following code snippet fixes 2 columns on the right: ~~~jsx {20-25} const widget = new pivot.Pivot("#pivot", { @@ -445,9 +445,9 @@ widget.api.on("render-table", ({ config: tableConfig }) => { }) ~~~ -## Sorting in columns +## Sort data in columns -The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting. +Sorting is enabled by default. Users can click a column header to sort data. Use the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property to disable or enable sorting. The following code snippet disables sorting: ~~~jsx {19} const table = new pivot.Pivot("#root", { @@ -475,10 +475,10 @@ const table = new pivot.Pivot("#root", { For more information about sorting data, refer to [Sorting data](/guides/working-with-data#sorting-data). -## Enabling the tree mode +## Enable the tree mode -The widget allows presenting data in a hierarchical format with expandable rows. To switch to the tree mode, apply the `tree` parameter of the [`tableShape`](/api/config/tableshape-property) property by setting its value to **true** (default is **false**). -To specify the parent row, put its name first in the `rows` array of the [`config`](/api/config/config-property) property. +Use the `tree` parameter of the [`tableShape`](/api/config/tableshape-property) property to present data in a hierarchical format with expandable rows. Set the parameter to `true` to enable tree mode (default: `false`). +To specify the parent row, put its name first in the `rows` array of the [`config`](/api/config/config-property) property. ~~~jsx {3} const table = new pivot.Pivot("#root", { @@ -515,11 +515,11 @@ const table = new pivot.Pivot("#root", { }); ~~~ -## Expanding/collapsing all rows +## Expand and collapse all rows -To expand/collapse all rows, the **tree** mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property and you should use the [`close-row`](/api/table/close-row) and [`open-row`](/api/table/open-row) events of the Table widget getting access to its API via the [`getTable`](/api/methods/gettable-method) method. +Enable `tree` mode via the [`tableShape`](/api/config/tableshape-property) property, then use the [`close-row`](/api/table/close-row) and [`open-row`](/api/table/open-row) events of the Table widget. Access the Table API via the [`getTable`](/api/methods/gettable-method) method. -The example below shows how to expand/collapse all data rows with the button click in the table tree mode. +The following code snippet expands and collapses all data rows on button click in tree mode: ~~~jsx const table = new pivot.Pivot("#root", { @@ -554,7 +554,7 @@ const table = new pivot.Pivot("#root", { const api = table.api; const table = api.getTable(); -// setting all table branches closed on the table config update +// close all table branches on table config update api.intercept("render-table", (ev) => { ev.config.data.forEach((r) => (r.open = false)); @@ -582,9 +582,9 @@ document.body.appendChild(openAllButton); document.body.appendChild(closeAllButton); ~~~ -## Changing text orientation in headers +## Change text orientation in headers -To change text orientation from default horizontal to vertical, use the [`headerShape`](/api/config/headershape-property) property and set its `vertical` parameter to **true**. +Use the [`headerShape`](/api/config/headershape-property) property to change text orientation from horizontal to vertical. Set the `vertical` parameter to `true`. ~~~jsx {4-6} const table = new pivot.Pivot("#root", { @@ -610,16 +610,16 @@ const table = new pivot.Pivot("#root", { }); ~~~ -## Controlling visibility of Configuration panel +## Control visibility of the configuration panel -The Configuration panel is displayed by default. The widget provides the default functionality that allows controlling the visibility of the Configuration panel with the button click. It's made possible via the [`configPanel`](/api/config/configpanel-property) property or [`show-config-panel`](/api/events/show-config-panel-event) event. +The configuration panel appears by default. Use the [`configPanel`](/api/config/configpanel-property) property or the [`show-config-panel`](/api/events/show-config-panel-event) event to control its visibility. -### Hiding Configuration panel +### Hide the configuration panel -To hide the panel, set the value of the [`configPanel`](/api/config/configpanel-property) property to **false**. +Set the [`configPanel`](/api/config/configpanel-property) property to `false` to hide the panel on initialization. ~~~jsx -// the configuration panel is hidden on init +// hide the configuration panel on init const table = new pivot.Pivot("#root", { fields, data: dataset, @@ -641,7 +641,7 @@ const table = new pivot.Pivot("#root", { }); ~~~ -You can also trigger the [`show-config-panel`](/api/events/show-config-panel-event) event with the [`api.exec()`](/api/internal/exec-method) method, and set the `mode` parameter to **false**. +Trigger the [`show-config-panel`](/api/events/show-config-panel-event) event with the [`api.exec()`](/api/internal/exec-method) method and set the `mode` parameter to `false` to hide the panel programmatically. ~~~jsx {19-22} const table = new pivot.Pivot("#root", { @@ -662,17 +662,17 @@ const table = new pivot.Pivot("#root", { ] } }); -//hide the configuration panel +// hide the configuration panel table.api.exec("show-config-panel", { mode: false }); ~~~ -### Disabling the default toggling functionality +### Disable the default toggling functionality -You can block toggling the visibility of the Configuration panel on the button click via the [`api.intercept()`](/api/internal/intercept-method) method (by listening to the [`show-config-panel`](/api/events/show-config-panel-event) event and returning *false*). +Block toggling the configuration panel on button click via the [`api.intercept()`](/api/internal/intercept-method) method by listening to the [`show-config-panel`](/api/events/show-config-panel-event) event and returning `false`. -Example: +The following code snippet disables the toggle button: ~~~jsx {20-22} const table = new pivot.Pivot("#root", { @@ -699,22 +699,34 @@ table.api.intercept("show-config-panel", () => { }); ~~~ -You can also control the visibility of the Configuration panel using the [`showConfigPanel()`](/api/methods/showconfigpanel-method) method. +Use the [`showConfigPanel()`](/api/methods/showconfigpanel-method) method to control the visibility of the configuration panel programmatically. -### Actions with fields in the panel +### Manage fields in the panel -In the Configuration panel it's possible to perform the next operations with fields: +The configuration panel supports the following field operations: -- [add-field](/api/events/add-field-event) -- [delete-field](/api/events/delete-field-event) -- [update-field](/api/events/update-value-event) -- [move-field](/api/events/move-field-event) +- [`add-field`](/api/events/add-field-event) — add a field to the panel +- [`delete-field`](/api/events/delete-field-event) — remove a field from the panel +- [`update-value`](/api/events/update-value-event) — update a field value +- [`move-field`](/api/events/move-field-event) — reorder a field in the panel + +## Enable read-only mode + +Use the [`readonly`](/api/config/readonly-property) property to prevent users from changing the Pivot structure through the UI. Set the property to `true` to enable read-only mode (default: `false`). + +~~~jsx {6} +const table = new pivot.Pivot("#root", { + fields, + data, + config: { ... }, + readonly: true +}); +~~~ **Related samples:** + - [Pivot 2. Adding text templates for table and header cells](https://snippet.dhtmlx.com/n9ylp6b2) - [Pivot 2. Custom frozen (fixed) columns (your number)](https://snippet.dhtmlx.com/53erlmgp) - [Pivot 2. Expand and collapse all rows](https://snippet.dhtmlx.com/i4mi6ejn) - [Pivot 2. Frozen(fixed) columns on the left and right](https://snippet.dhtmlx.com/lahf729o) - [Pivot 2. Sorting](https://snippet.dhtmlx.com/j7vtief6) - - diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index effed77..5796cc2 100644 --- a/docs/guides/exporting-data.md +++ b/docs/guides/exporting-data.md @@ -6,9 +6,9 @@ description: You can explore how to export data in the documentation of the DHTM # Exporting data -To export the table data to the XLSX or CSV format, it's necessary to get access to the underlying Table widget instance inside Pivot and apply its API to export data. To do this, you should use the [`getTable`](/api/methods/gettable-method) method and execute the [`export`](/api/table/export) event. +To export table data to XLSX or CSV format, get access to the underlying Table widget instance inside Pivot and apply the Table API. Use the [`getTable`](/api/methods/gettable-method) method to access the Table instance, then execute the [`export`](/api/table/export) event. -In the example below we get access to the Table instance and trigger the `export`action using the [`api.exec()`](/api/internal/exec-method) method. +The following code snippet accesses the Table instance and triggers the `export` action with [`api.exec()`](/api/internal/exec-method): ~~~jsx const widget = new pivot.Pivot("#root", { /*setting*/}); @@ -29,11 +29,11 @@ widget.api.getTable().exec("export", { ## Example -In this snippet you can see how to export data: +The following code snippet exports data to XLSX and CSV: - + -**Related articles**: +**Related articles**: - [Date formatting](/guides/localization#date-formatting) -- [`export`](/api/table/export) \ No newline at end of file +- [`export`](/api/table/export) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a7252f8..e31ce1c 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,29 +6,29 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide will give you detailed instructions on how to create Pivot on a page to enrich your application with features of the Pivot table. Take the following steps to get a ready-to-use component: +Use this guide to create Pivot on a page and add a Pivot table to your application. Take the following steps to get a ready-to-use component: -1. [Include the Pivot source files on a page](#including-source-files). -2. [Create a container for Pivot](#creating-container). -3. [Initialize Pivot with a constructor](#initializing-pivot). +1. [Include the Pivot source files on a page](#include-source-files). +2. [Create a container for Pivot](#create-a-container). +3. [Initialize Pivot with a constructor](#initialize-pivot). -## Including source files +## Include source files See also how to download packages: [Downloading packages](/how-to-start#step-1-downloading-and-installing-packages). -To create a Pivot app, you need to include 2 source files on your page: +To create a Pivot app, include 2 source files on your page: - *pivot.js* - *pivot.css* -Make sure that you set correct relative paths to the source files: +Set correct relative paths to the source files: ~~~html title="index.html" ~~~ -## Creating container +## Create a container Add a container for Pivot and give it an ID, for example *"root"*: @@ -36,11 +36,11 @@ Add a container for Pivot and give it an ID, for example *"root"*:
~~~ -## Initializing Pivot +## Initialize Pivot -Initialize Pivot with the **pivot.Pivot** constructor. It takes two parameters: +Initialize Pivot with the `pivot.Pivot` constructor. The constructor takes two parameters: -- an HTML container (the ID of the HTML container) +- the ID of the HTML container - an object with configuration properties ~~~jsx @@ -65,11 +65,11 @@ const table = new pivot.Pivot("#root", { ## Configuration properties :::info -The full list of properties to configure **Pivot** can be found [**here**](api/overview/properties-overview.md). +The full list of properties to configure Pivot can be found [here](api/overview/properties-overview.md). ::: ## Example -In this snippet you can see how to initialize **Pivot** with the initial data: +The following code snippet initializes Pivot with initial data: diff --git a/docs/guides/integration-with-angular.md b/docs/guides/integration-with-angular.md index f043e0d..7a9bd0d 100644 --- a/docs/guides/integration-with-angular.md +++ b/docs/guides/integration-with-angular.md @@ -7,38 +7,38 @@ description: You can learn about the integration with Angular in the documentati # Integration with Angular :::tip -You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). +Be familiar with the basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, refer to the [**Angular documentation**](https://v17.angular.io/docs). ::: DHTMLX Pivot is compatible with **Angular**. We have prepared code examples on how to use DHTMLX Pivot with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-pivot-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Angular CLI**](https://v1.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [**Angular CLI**](https://v1.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). ::: -Create a new **my-angular-pivot-app** project using Angular CLI. Run the following command for this purpose: +Create a new *my-angular-pivot-app* project using Angular CLI: ~~~json ng new my-angular-pivot-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating the new Angular app. ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +The command installs all the necessary tools. No additional commands are required. -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-angular-pivot-app ~~~ -Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager: +Install dependencies and start the dev server with the [**yarn**](https://yarnpkg.com/) package manager: ~~~jsx yarn @@ -47,23 +47,23 @@ yarn start // or yarn dev The app should run on a localhost (for instance `http://localhost:3000`). -## Creating Pivot +## Create Pivot -Now you should get the DHTMLX Pivot source code. First of all, stop the app and proceed with installing the Pivot package. +Get the DHTMLX Pivot source code. Stop the dev server and install the Pivot package. ### Step 1. Package installation -Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Pivot is available 30 days only. - -### Step 2. Component creation +Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow the steps in the README file. Note that the trial version is available for 30 days only. -Now you need to create an Angular component, to add Pivot into the application. Create the **pivot** folder in the ***src/app/*** directory, add a new file into it and name it ***pivot.component.ts***. Then complete the steps described below. +### Step 2. Create the component + +Create an Angular component to add Pivot to the application. Create the *pivot* folder in the *src/app/* directory, add a new file into it, and name it *pivot.component.ts*. Then complete the steps described below. #### Import source files -Open the file and import Pivot source files. Note that: +Open *pivot.component.ts* and import Pivot source files. Note that: -- if you use PRO version and install the Pivot package from a local folder, the imported path looks like this: +- if you use the PRO version installed from a local folder, use this import path: ~~~jsx import { Pivot } from 'dhx-pivot-package'; @@ -75,11 +75,11 @@ import { Pivot } from 'dhx-pivot-package'; import { Pivot } from '@dhx/trial-pivot'; ~~~ -In this tutorial you can see how to configure the **trial** version of Pivot. +This tutorial uses the **trial** version of Pivot. #### Set the container and initialize Pivot -To display Pivot on the page, you need to set the container to render the component inside and initialize Pivot using the corresponding constructor: +To display Pivot on the page, set the container and initialize Pivot with the corresponding constructor: ~~~jsx {1,8,12-13,18-19} title="pivot.component.ts" import { Pivot } from '@dhx/trial-pivot'; @@ -109,9 +109,9 @@ export class PivotComponent implements OnInit, OnDestroy { } ~~~ -#### Adding styles +#### Add styles -To display Pivot correctly, you need to provide the corresponding styles. For this purpose, you can create the ***pivot.component.css*** file in the ***src/app/pivot/*** directory and specify important styles for Pivot and its container: +To display Pivot correctly, create *pivot.component.css* in the *src/app/pivot/* directory and specify the required styles: ~~~css title="pivot.component.css" /* import Pivot styles */ @@ -132,9 +132,9 @@ body { } ~~~ -#### Loading data +#### Load data -To add data into Pivot, you need to provide a data set. You can create the ***data.ts*** file in the ***src/app/pivot/*** directory and add some data into it: +To load data into Pivot, create *data.ts* in the *src/app/pivot/* directory and add data: ~~~jsx title="data.ts" export function getData() { @@ -172,7 +172,7 @@ export function getData() { "state": "Colorado", "expenses": 45, "type": "Decaf" - }, // othe data items + }, // other data items ]; const fields: any = [ @@ -192,7 +192,7 @@ export function getData() { }; ~~~ -Then open the ***pivot.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of Pivot within the `ngOnInit()` method, as shown below. +Open *pivot.component.ts*, import the data file, and add the data properties to the Pivot configuration object in the `ngOnInit()` method: ~~~jsx {2,18,20-21} title="pivot.component.ts" import { Pivot } from '@dhx/trial-pivot'; @@ -236,13 +236,13 @@ export class PivotComponent implements OnInit, OnDestroy { } ~~~ -Now the Pivot component is ready to use. When the element will be added to the page, it will initialize the Pivot with data. You can provide necessary configuration settings as well. Visit our [Pivot API docs](/api/overview/properties-overview/) to check the full list of available properties. +The Pivot component is ready to use. When the element is added to the page, Pivot initializes with data. Provide additional configuration settings as needed. See the [Pivot API docs](/api/overview/properties-overview/) for the full list of available properties. -#### Handling events +#### Handle events -When a user makes some action in the Pivot, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events-overview/). +User actions in Pivot trigger events. Handle these events to detect actions and run custom code. See the [full list of events](/api/overview/events-overview/). -Open the ***pivot.component.ts*** file and complete the `ngOnInit()` method as in: +Open *pivot.component.ts* and add event handling to the `ngOnInit()` method: ~~~jsx {18-20} title="pivot.component.ts" // ... @@ -272,9 +272,9 @@ ngOnDestroy(): void { } ~~~ -### Step 3. Adding Pivot into the app +### Step 3. Add Pivot to the app -To add the ***PivotComponent*** into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +Open *src/app/app.component.ts* and replace the default code with the following: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -288,7 +288,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *PivotComponent* as shown below: +Create *app.module.ts* in the *src/app/* directory and specify *PivotComponent*: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -305,7 +305,7 @@ import { PivotComponent } from "./pivot/pivot.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Open *src/main.ts* and replace the existing code with the following: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -315,8 +315,8 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see Pivot loaded with data on a page. +Start the app to see Pivot loaded with data on a page. ![Pivot initialization](../assets/trial_pivot.png) -Now you know how to integrate DHTMLX Pivot with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-pivot-demo). +Customize the code for your specific requirements. Find the final example on [**GitHub**](https://github.com/DHTMLX/angular-pivot-demo). diff --git a/docs/guides/integration-with-react.md b/docs/guides/integration-with-react.md index cfc984d..d1e0dad 100644 --- a/docs/guides/integration-with-react.md +++ b/docs/guides/integration-with-react.md @@ -7,32 +7,32 @@ description: You can learn about the integration with React in the documentation # Integration with React :::tip -You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). +Be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, refer to the [**React documentation**](https://react.dev/learn). ::: DHTMLX Pivot is compatible with **React**. We have prepared code examples on how to use DHTMLX Pivot with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-pivot-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). ::: -You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-pivot-app**: +Create a basic **React** project or use **React with Vite**. Name the project *my-react-pivot-app*: ~~~json npx create-react-app my-react-pivot-app ~~~ -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-react-pivot-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with a package manager: - if you use [**yarn**](https://yarnpkg.com/), run the following commands: @@ -50,30 +50,30 @@ npm run dev The app should run on a localhost (for instance `http://localhost:3000`). -## Creating Pivot +## Create Pivot -Now you should get the DHTMLX Pivot source code. First of all, stop the app and proceed with installing the Pivot package. +Get the DHTMLX Pivot source code. Stop the dev server and install the Pivot package. ### Step 1. Package installation -Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Pivot is available 30 days only. +Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow the steps in the README file. Note that the trial version is available for 30 days only. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a React component, to add a Pivot into the application. Create a new file in the ***src/*** directory and name it ***Pivot.jsx***. +Create a React component to add Pivot to the application. Add a new file to the *src/* directory and name it *Pivot.jsx*. #### Import source files -Open the ***Pivot.jsx*** file and import Pivot source files. Note that: +Open *Pivot.jsx* and import Pivot source files. Note that: -- if you use PRO version and install the Pivot package from a local folder, the import paths look like this: +- if you use the PRO version installed from a local folder, use these import paths: ~~~jsx title="Pivot.jsx" import { Pivot } from 'dhx-pivot-package'; import 'dhx-pivot-package/dist/pivot.css'; ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***pivot.min.css***. +Depending on the package, source files may be minified. In that case, import *pivot.min.css* instead of *pivot.css*. - if you use the trial version of Pivot, specify the following paths: @@ -82,11 +82,11 @@ import { Pivot } from '@dhx/trial-pivot'; import "@dhx/trial-pivot/dist/pivot.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of Pivot. +This tutorial uses the **trial** version of Pivot. -#### Setting the container and adding Pivot +#### Set the container and add Pivot -To display Pivot on the page, you need to create the container for Pivot, and initialize this component using the corresponding constructor: +To display Pivot on the page, create the container and initialize the component: ~~~jsx {2,6,9-10} title="Pivot.jsx" import { useEffect, useRef } from "react"; @@ -109,9 +109,9 @@ export default function PivotComponent(props) { } ~~~ -#### Adding styles +#### Add styles -To display Pivot correctly, you need to specify important styles for Pivot and its container in the main css file of the project: +Add the following styles to the main CSS file to display Pivot correctly: ~~~css title="index.css" /* specify styles for initial page */ @@ -130,9 +130,9 @@ body, } ~~~ -#### Loading data +#### Load data -To add data into the Pivot, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To load data into Pivot, create a *data.js* file in the *src/* directory and add data: ~~~jsx title="data.js" export function getData() { @@ -170,7 +170,7 @@ export function getData() { "state": "Colorado", "expenses": 45, "type": "Decaf" - }, // othe data items + }, // other data items ]; const fields = [ @@ -190,7 +190,7 @@ export function getData() { }; ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**: +Open *App.js*, import data, and pass the data to the `` component as props: ~~~jsx {2,5-6} title="App.js" import Pivot from "./Pivot"; @@ -204,7 +204,7 @@ function App() { export default App; ~~~ -Go to the ***Pivot.jsx*** file and apply the passed **props** to the Pivot configuration object: +Open *Pivot.jsx* and apply the props to the Pivot configuration object: ~~~jsx {5,10-11} title="Pivot.jsx" import { useEffect, useRef } from "react"; @@ -240,13 +240,13 @@ export default function PivotComponent(props) { } ~~~ -Now the Pivot component is ready to use. When the element will be added to the page, it will initialize the Pivot with data. You can provide necessary configuration settings as well. Visit our [Pivot API docs](/api/overview/properties-overview/) to check the full list of available properties. +The Pivot component is ready to use. When the element is added to the page, Pivot initializes with data. Provide additional configuration settings as needed. See the [Pivot API docs](/api/overview/properties-overview/) for the full list of available properties. -#### Handling events +#### Handle events -When a user makes some action in the Pivot, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events-overview/). +User actions in Pivot trigger events. Handle these events to detect actions and run custom code. See the [full list of events](/api/overview/events-overview/). -Open ***Pivot.jsx*** and complete the `useEffect()` method in the following way: +Open *Pivot.jsx* and add event handling to the `useEffect()` method: ~~~jsx {19-21} title="Pivot.jsx" // ... @@ -278,8 +278,8 @@ useEffect(() => { // ... ~~~ -After that, you can start the app to see Pivot loaded with data on a page. +Start the app to see Pivot loaded with data on a page. ![Pivot initialization](../assets/trial_pivot.png) -Now you know how to integrate DHTMLX Pivot with React. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/react-pivot-demo). +Customize the code for your specific requirements. Find the final example on [**GitHub**](https://github.com/DHTMLX/react-pivot-demo). diff --git a/docs/guides/integration-with-svelte.md b/docs/guides/integration-with-svelte.md index d0510d2..94e46ff 100644 --- a/docs/guides/integration-with-svelte.md +++ b/docs/guides/integration-with-svelte.md @@ -7,26 +7,26 @@ description: You can learn about the integration with Svelte in the documentatio # Integration with Svelte :::tip -You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/). +Be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, refer to the [**Svelte documentation**](https://svelte.dev/). ::: DHTMLX Pivot is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX Pivot with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-pivot-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). ::: -To create a **Svelte** JS project, run the following command: +To create a **Svelte** project, run the following command: ~~~json npm create vite@latest ~~~ -Let's name the project as **my-svelte-pivot-app**. +Name the project *my-svelte-pivot-app*. -### Installation of dependencies +### Install dependencies Go to the app directory: @@ -34,7 +34,7 @@ Go to the app directory: cd my-svelte-pivot-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with a package manager: - if you use [**yarn**](https://yarnpkg.com/), run the following commands: @@ -52,23 +52,23 @@ npm run dev The app should run on a localhost (for instance `http://localhost:3000`). -## Creating Pivot +## Create Pivot -Now you should get the DHTMLX Pivot source code. First of all, stop the app and proceed with installing the Pivot package. +Get the DHTMLX Pivot source code. Stop the dev server and install the Pivot package. ### Step 1. Package installation -Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Pivot is available 30 days only. +Download the [**trial Pivot package**](/how-to-start/#installing-trial-pivot-via-npm-or-yarn) and follow the steps in the README file. Note that the trial version is available for 30 days only. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a Svelte component, to add Pivot into the application. Let's create a new file in the ***src/*** directory and name it ***Pivot.svelte***. +Create a Svelte component to add Pivot to the application. Add a new file to the *src/* directory and name it *Pivot.svelte*. #### Import source files -Open the ***Pivot.svelte*** file and import Pivot source files. Note that: +Open *Pivot.svelte* and import Pivot source files. Note that: -- if you use PRO version and install the Pivot package from a local folder, the import paths look like this: +- if you use the PRO version installed from a local folder, use these import paths: ~~~html title="Pivot.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***pivot.min.css***. +Depending on the package, source files may be minified. In that case, import *pivot.min.css* instead of *pivot.css*. - if you use the trial version of Pivot, specify the following paths: @@ -88,11 +88,11 @@ import '@dhx/trial-pivot/dist/pivot.css'; ~~~ -In this tutorial you can see how to configure the **trial** version of Pivot. +This tutorial uses the **trial** version of Pivot. -#### Setting the container and adding Pivot +#### Set the container and add Pivot -To display Pivot on the page, you need to create the container for Pivot, and initialize this component using the corresponding constructor: +To display Pivot on the page, create the container and initialize the component: ~~~html {3,6,10-11,19} title="Pivot.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***pivot.min.css***. +Depending on the package, source files may be minified. In that case, import *pivot.min.css* instead of *pivot.css*. - if you use the trial version of Pivot, specify the following paths: @@ -90,11 +90,11 @@ import '@dhx/trial-pivot/dist/pivot.css';