Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 48 additions & 42 deletions docs/guides/configuration.md

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions docs/guides/exporting-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 the table data to XLSX or CSV format, access the underlying Table widget instance inside Pivot via the [`getTable`](/api/methods/gettable-method) method and trigger the [`export`](/api/table/export) action through its API.

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 example below accesses the Table instance and triggers the `export` action via the [`api.exec()`](/api/internal/exec-method) method.

~~~jsx
const widget = new pivot.Pivot("#root", { /*setting*/});
Expand All @@ -29,11 +29,11 @@ widget.api.getTable().exec("export", {

## Example

In this snippet you can see how to export data:
The snippet below shows how to export data:

<iframe src="https://snippet.dhtmlx.com/zjuloqxd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
<iframe src="https://snippet.dhtmlx.com/zjuloqxd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

**Related articles**:
**Related articles:**

- [Date formatting](/guides/localization#date-formatting)
- [`export`](/api/table/export)
20 changes: 10 additions & 10 deletions docs/guides/initialization.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ 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:
This guide explains how to add Pivot to a page. Follow these 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).

## Including source files

See also how to download packages: [Downloading packages](/how-to-start#step-1-downloading-and-installing-packages).
For instructions on downloading packages, see [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*
- `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"
<script type="text/javascript" src="./dist/pivot.js"></script>
Expand All @@ -30,15 +30,15 @@ Make sure that you set correct relative paths to the source files:

## Creating container

Add a container for Pivot and give it an ID, for example *"root"*:
Add a container for Pivot and give it an ID, for example `"root"`:

~~~html title="index.html"
<div id="root"></div>
~~~

## Initializing Pivot

Initialize Pivot with the **pivot.Pivot** constructor. It takes two parameters:
Initialize Pivot with the `pivot.Pivot` constructor. It takes two parameters:

- an HTML container (the ID of the HTML container)
- an object with configuration properties
Expand All @@ -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).
For the full list of properties, see [Properties overview](api/overview/properties-overview.md).
:::

## Example

In this snippet you can see how to initialize **Pivot** with the initial data:
The snippet below shows how to initialize Pivot with initial data:

<iframe src="https://snippet.dhtmlx.com/y2buoahe?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
28 changes: 13 additions & 15 deletions docs/guides/loading-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ description: You can explore how to load data in the documentation of the DHTMLX

## Preparing data for loading

Pivot supports JSON data format. You can also load CSV data that will be converted to JSON.
Pivot supports the JSON data format. You can also load CSV data, which Pivot then converts to JSON.

The following types of information can be loaded into Pivot:
Pivot accepts the following data:

- [`data`](/api/config/data-property) - an array of objects, where each object represents the data row
- [`data`](/api/config/data-property) an array of objects, where each object represents a data row

**Example:**

Expand Down Expand Up @@ -71,12 +71,12 @@ const data = [
~~~

:::info
See also how to define fields and Pivot structure: [Working with data](/guides/working-with-data)
For details on defining fields and the Pivot structure, see [Working with data](/guides/working-with-data).
:::

## Loading data

You can load JSON data into Pivot from an external file or the server-side script after the component has been initialized.
After Pivot initializes, you can load JSON data into it from an external file or a server-side script.

To load local data from a separate file, first prepare the source file with data.

Expand Down Expand Up @@ -143,7 +143,7 @@ const { data, config, fields } = getData();
const table = new pivot.Pivot("#root", { data, config, fields });
~~~

To get server data, you can send the request for data using the native **fetch** method (or any other way):
To load server data, send a request via the native `fetch` method (or any other approach):

~~~jsx
const table = new pivot.Pivot("#root", {fields:[], data: []});
Expand All @@ -159,15 +159,13 @@ Promise.all([

## Loading CSV data

You can load CSV data and convert it to JSON and then continue working with this data in the Pivot table.
Pivot can work with CSV data after you convert it to JSON via an external JavaScript parsing library.

To convert data, you should use an external parsing library for JS to convert data from CSV to JSON.
The example below uses the external [PapaParse](https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js) library to load and convert data on a button click. The `convert()` function takes the following parameters:

In the example below we apply the external [PapaParse](https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js) library and enable loading and converting data on a button click. In this example we use the `convert()` function which takes the following parameters:

- `data` - a string with CSV data
- `headers` - an array with the names of fields for CSV data
- `meta` - an object where keys are the names of fields and values are the data types
- `data` — a string with CSV data
- `headers` — an array with the names of fields for CSV data
- `meta` — an object where keys are field names and values are data types

~~~jsx
const table = new pivot.Pivot("#root", {
Expand Down Expand Up @@ -263,9 +261,9 @@ document.body.appendChild(importButton);

## Example

In this snippet you can see how to load JSON and CSV data:
The snippet below shows how to load JSON and CSV data:

<iframe src="https://snippet.dhtmlx.com/wo6w9hf9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
<iframe src="https://snippet.dhtmlx.com/wo6w9hf9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

**Related samples:**
- [Pivot 2. Date format](https://snippet.dhtmlx.com/shn1l794)
Expand Down
26 changes: 13 additions & 13 deletions docs/guides/localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ description: You can learn about the localization in the documentation of the DH

# Localization

You can localize all labels in the interface of JavaScript Pivot. For this purpose you need to create a new locale or modify a built-in one and apply it to Pivot.
You can localize all labels in the JavaScript Pivot interface. To do so, create a new locale or modify a built-in one, then apply it to Pivot.

## Default locale

The **English** locale is applied by default:
The default locale is English:

~~~jsx
const en = {
Expand Down Expand Up @@ -158,7 +158,7 @@ const en = {

## Applying locales

You can access built-in locales via the pivot object. Pivot provides three built-in locales: en, de, cn.
You can access built-in locales via the `pivot` object. Pivot ships with three built-in locales: `en`, `de`, `cn`.

Example:

Expand All @@ -169,10 +169,10 @@ new pivot.Pivot({
});
~~~

To apply a custom locale, you need to:
To apply a custom locale:

- create a custom locale object (or modify the default one) and provide translations for all text labels (it can be any language you need)
- apply the new locale to Pivot via its [`locale`](/api/config/locale-property) property or use the [`setLocale()`](/api/methods/setlocale-method) method
- Create a custom locale object (or modify the default one) and provide translations for all text labels in any language you need.
- Apply the new locale to Pivot via the [`locale`](/api/config/locale-property) property or the [`setLocale()`](/api/methods/setlocale-method) method.

~~~jsx
// create Pivot
Expand All @@ -187,7 +187,7 @@ widget.setLocale(ko);

## Date formatting

Pivot accepts a date as a Date object (make sure to parse a date to a Date object). By default, the `dateFormat` of the current locale is applied. To redefine the format for all date fields in Pivot, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y".
Pivot accepts a date as a `Date` object make sure to parse incoming values into `Date`. Pivot applies the `dateFormat` of the current locale by default. To redefine the format for all date fields in Pivot, set the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is `"%d.%m.%Y"`.

Example:

Expand Down Expand Up @@ -232,7 +232,7 @@ const table = new pivot.Pivot("#root", {
});
~~~

In case you need to set a custom format to a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. Refer to [Applying formats to fields](/guides/working-with-data/#applying-formats-to-fields).
If you need to set a custom format for a specific field, use the `format` parameter of the [`fields`](/api/config/fields-property) property. See [Applying formats to fields](/guides/working-with-data/#applying-formats-to-fields).

## Date and time format specification

Expand Down Expand Up @@ -263,12 +263,12 @@ Pivot uses the following characters for setting the date and time format:
| %c | displays date and time in the ISO 8601 date format| 2024-10-04T05:04:09 |


To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u".
To present a date and time as `2024-09-20 16:47:08.128`, specify `"%Y-%m-%d %H:%i:%s.%u"`.

## Number formatting

By default, all fields with the number type are localized according to the locale (the value in the `lang` field of the locale). Pivot uses [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification. By default the fraction digits are limited to 3 and group separation is applied for the integer part.
In case you do not need to format specific fields with numeric values or need to set a custom format, use the the `format` parameter of the [`fields`](/api/config/fields-property) property. It can be either *false* to cancel formatting or an object with format settings (refer to [Applying formats to fields](/guides/working-with-data/#applying-formats-to-fields)).
Pivot localizes all `number` fields by default, based on the value in the `lang` field of the locale. Number formatting follows the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification: the default limits fraction digits to 3 and applies group separation to the integer part.
If you want to skip formatting for specific numeric fields or set a custom format, use the `format` parameter of the [`fields`](/api/config/fields-property) property. Set it to `false` to cancel formatting, or pass an object with format settings (see [Applying formats to fields](/guides/working-with-data/#applying-formats-to-fields)).

~~~jsx
const fields = [
Expand All @@ -278,6 +278,6 @@ const fields = [

## Example

In this snippet you can see how to switch between several locales:
The snippet below shows how to switch between several locales:

<iframe src="https://snippet.dhtmlx.com/aj5zmxpv?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
<iframe src="https://snippet.dhtmlx.com/aj5zmxpv?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
Loading