diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 70a66c2..a0427f7 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,23 +6,23 @@ 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: +You can configure the Pivot table elements and the Configuration panel via the corresponding API. The available parameters let you: - 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 +- 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 -All instructions about working with data see here: [Working with data](/guides/working-with-data) +For instructions on working with data, 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 @@ -31,9 +31,9 @@ You can configure and/or customize the following elements of the Pivot table: ## Resizing the table -You can change the size of the table rows and columns, header and footer using the [`tableShape`](/api/config/tableshape-property) property. +To change the size of the table rows and columns, header, and footer, use the [`tableShape`](/api/config/tableshape-property) property. -The next sizes are applied by default: +The default sizes are: ~~~jsx const sizes = { @@ -81,15 +81,15 @@ To set the width of specific column(s), apply the `width` parameter of the [colu ## Autosizing 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. +The widget can set a minimum width for all columns, size the table data only, the table header only, or combine these modes. To configure autosizing, apply the `autoWidth` parameter of the [`columnShape`](/api/config/columnshape-property) property. -All parameters of `autoWidth` are optional and for detailed description of each parameter refer to the [columnShape](/api/config/columnshape-property) property. +All parameters of `autoWidth` are optional. For a detailed description of each parameter, refer to the [columnShape](/api/config/columnshape-property) property. -- use the `columns` parameter to define if the width of columns should be calculated automatically and which columns will be affected +- use the `columns` parameter to define if the column width is calculated automatically and which columns are 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 +- use `maxRows` to specify how many data rows the widget analyzes to detect the column size; the default is 20 rows -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), the widget analyzes each field of the same data only once to calculate the column width. If multiple columns rely on the same data (for example, the `oil` field with the `count` operation and the `oil` field with the `sum` operation), the widget analyzes only the first one and applies its width to the others. Example: @@ -131,9 +131,9 @@ const table = new pivot.Pivot("#root", { ### Adding 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. +To apply a template to cells, use the `templates` parameter of the [`tableShape`](/api/config/tableshape-property) property. The parameter takes an object where each key is a field id and the value is a function that returns a string. The widget applies the template to all columns based on the specified field. -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 example below applies a template to the `state` cells to show the combined name of a state (full name and abbreviation). ~~~jsx {10-15} const states = { @@ -174,9 +174,9 @@ const table = new pivot.Pivot("#root", { ### Adding 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. +To insert HTML content into table cells, use the [`pivot.template`](/api/helpers/template) helper. Define a template as a `cell` property of the `column` object, then apply it 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 example below adds icons (a star or a flag) to body cells based on the field (`id` or `user_score`): ~~~js function cellTemplate(value, method, row, column) { @@ -217,15 +217,21 @@ widget.api.intercept("render-table", ({ config: tableConfig }) => { ### Adding 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: +To define the format of text in headers, apply the `template` parameter of the [`headerShape`](/api/config/headershape-property) property. The parameter takes 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: -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)*): +~~~js +template: (label, id, subLabel) => label + (subLabel ? `(${subLabel})` : "") +~~~ + +For fields applied as values, the header shows the label and method (for example, *Oil(count)*). +If no other template is applied to columns, the header displays the value of the `label` parameter. A [`predicates`](/api/config/predicates-property) template, if applied, overrides the template of the `headerShape` property. + +In the example below, for the `values` fields the header displays the label and the method name (subLabel) and converts the result to lowercase (for example, *profit (sum)*): ~~~jsx {3-6} new pivot.Pivot("#pivot", { @@ -255,7 +261,7 @@ new pivot.Pivot("#pivot", { ### Adding 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. +To insert HTML content into header cells, use the [`pivot.template`](/api/helpers/template) helper. Define a template as a `cell` property of the header cell object, then apply it 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: @@ -296,7 +302,7 @@ widget.api.intercept("render-table", ({ config: tableConfig }) => { ## Making 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**. +You can collapse and expand columns that share one header. To make columns collapsible, set the `collapsible` parameter of the [`headerShape`](/api/config/headershape-property) property to `true`. ~~~jsx {4-6} const table = new pivot.Pivot("#root", { @@ -324,11 +330,11 @@ const table = new pivot.Pivot("#root", { ## Freezing 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. +The widget can freeze columns on the left or right side, which keeps them static and visible during scrolling. To freeze columns, set the `left` or `right` parameter of the `split` parameter ([`tableShape`](/api/config/tableshape-property) property) to `true`. See the details and examples below. ### Freezing 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 split columns equals the number of `rows` fields defined in the [`config`](/api/config/config-property) property. In the `tree` mode, only one column freezes regardless of how many `rows` fields are defined. In the sample below, 1 column is fixed initially on the left, which equals the number of fields defined for the `rows` area. ~~~jsx {19} const table = new pivot.Pivot("#root", { @@ -354,9 +360,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. +You can also apply a custom split via the [`render-table`](/api/events/render-table-event) event. Avoid splitting columns with colspans. -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. +In the sample below, the widget fixes all columns from the `rows` area and the first 4 columns from the `values` area initially. The number of split columns depends on the number of `rows` and `values` fields defined via the [`config`](/api/config/config-property) property. ~~~jsx {19-25} const table = new pivot.Pivot("#root", { @@ -388,7 +394,7 @@ table.api.on("render-table", (tableConfig) => { ### Freezing 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 +421,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. Avoid splitting columns with colspans. In the sample below, 2 columns on the right are fixed initially. ~~~jsx {20-25} const widget = new pivot.Pivot("#pivot", { @@ -447,7 +453,7 @@ widget.api.on("render-table", ({ config: tableConfig }) => { ## Sorting 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. A user can click the column header to sort data. To disable or enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. The example below disables sorting. ~~~jsx {19} const table = new pivot.Pivot("#root", { @@ -477,8 +483,8 @@ For more information about sorting data, refer to [Sorting data](/guides/working ## Enabling 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. +The widget can present data in a hierarchical format with expandable rows. To switch to the tree mode, set the `tree` parameter of the [`tableShape`](/api/config/tableshape-property) property to `true` (the default is `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", { @@ -517,9 +523,9 @@ const table = new pivot.Pivot("#root", { ## Expanding/collapsing 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. +To expand or collapse all rows, enable the `tree` mode via the [`tableShape`](/api/config/tableshape-property) property. Then access the Table widget API via the [`getTable`](/api/methods/gettable-method) method and use its [`close-row`](/api/table/close-row) and [`open-row`](/api/table/open-row) events. -The example below shows how to expand/collapse all data rows with the button click in the table tree mode. +The example below shows how to expand or collapse all data rows on a button click in the table tree mode. ~~~jsx const table = new pivot.Pivot("#root", { @@ -584,7 +590,7 @@ document.body.appendChild(closeAllButton); ## Changing 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**. +To change text orientation from default horizontal to vertical, use the [`headerShape`](/api/config/headershape-property) property and set its `vertical` parameter to `true`. ~~~jsx {4-6} const table = new pivot.Pivot("#root", { @@ -610,13 +616,13 @@ const table = new pivot.Pivot("#root", { }); ~~~ -## Controlling visibility of Configuration panel +## Controlling 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 is visible by default. The widget toggles its visibility on a button click out of the box, and you can control this behavior via the [`configPanel`](/api/config/configpanel-property) property or the [`show-config-panel`](/api/events/show-config-panel-event) event. -### Hiding Configuration panel +### Hiding the Configuration panel -To hide the panel, set the value of the [`configPanel`](/api/config/configpanel-property) property to **false**. +To hide the panel, set the value of the [`configPanel`](/api/config/configpanel-property) property to `false`. ~~~jsx // the configuration panel is hidden on init @@ -641,7 +647,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**. +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`. ~~~jsx {19-22} const table = new pivot.Pivot("#root", { @@ -670,7 +676,7 @@ table.api.exec("show-config-panel", { ### Disabling 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*). +To block visibility toggling on a button click, use the [`api.intercept()`](/api/internal/intercept-method) method to listen to the [`show-config-panel`](/api/events/show-config-panel-event) event and return *false*. Example: @@ -703,7 +709,7 @@ You can also control the visibility of the Configuration panel using the [`showC ### Actions with fields in the panel -In the Configuration panel it's possible to perform the next operations with fields: +The Configuration panel supports the following operations on fields: - [add-field](/api/events/add-field-event) - [delete-field](/api/events/delete-field-event) diff --git a/docs/guides/exporting-data.md b/docs/guides/exporting-data.md index effed77..3e6b8fa 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 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*/}); @@ -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: - + -**Related articles**: +**Related articles:** - [Date formatting](/guides/localization#date-formatting) - [`export`](/api/table/export) \ No newline at end of file diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a7252f8..aa0e52b 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,7 +6,7 @@ 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). @@ -14,14 +14,14 @@ This guide will give you detailed instructions on how to create Pivot on a page ## 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" @@ -30,7 +30,7 @@ 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"
@@ -38,7 +38,7 @@ Add a container for Pivot and give it an ID, for example *"root"*: ## 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 @@ -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: diff --git a/docs/guides/loading-data.md b/docs/guides/loading-data.md index 1b055c2..51bb969 100644 --- a/docs/guides/loading-data.md +++ b/docs/guides/loading-data.md @@ -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:** @@ -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. @@ -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: []}); @@ -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", { @@ -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: - + **Related samples:** - [Pivot 2. Date format](https://snippet.dhtmlx.com/shn1l794) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 2c3be82..312e7a8 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -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 = { @@ -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: @@ -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 @@ -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: @@ -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 @@ -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 = [ @@ -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: - + diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 3b2967c..ba40ffb 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -21,30 +21,29 @@ description: You can learn about the styling in the documentation of the DHTMLX ~~~ :::tip Note -Next versions of Pivot can bring some changes for the variables and their names. Please, do not forget to check the names after updating to the newer versions and modify them in your code to avoid problems with display of the component. +Future versions of Pivot may rename or change CSS variables. After each update, check the variable names and update your code to keep the component rendering correctly. ::: ## Built-in theme -The widget provides one built-in theme which is the **Material** theme. +Pivot ships with one built-in theme — Material. -You can apply the theme via adding the corresponding *CSS* classes to the widget container: +To apply the theme, add the corresponding CSS class to the widget container: -- **Material theme** -~~~html {} +~~~html
~~~ -or just include the theme on the page from the skins folder: +Or include the theme stylesheet from the skins folder: -~~~html {} +~~~html ~~~ ## Customize built-in theme -The example below demonstrates how to customize the **Material** theme that is applied to the Pivot table: +The example below shows how to customize the Material theme: ~~~html @@ -70,9 +69,7 @@ The example below demonstrates how to customize the **Material** theme that is a ## Custom style -You can change the appearance of Pivot by applying the corresponding CSS variables. - -The example below shows how to apply a custom style to Pivot: +To change the appearance of Pivot, apply the corresponding CSS variables. The example below shows how to apply a custom style to Pivot: ~~~html
@@ -91,20 +88,21 @@ The example below shows how to apply a custom style to Pivot: ## Scroll style -You can also apply a custom style to the scroll bar of Pivot. For this, you can use the `.wx-styled-scroll` CSS class. Before using it, check compatibility with the modern browsers [here](https://caniuse.com/css-scrollbar). +To apply a custom style to the Pivot scroll bar, use the `.wx-styled-scroll` CSS class. Check [browser compatibility](https://caniuse.com/css-scrollbar) before using it. -~~~html {} title="index.html" +~~~html title="index.html" -
+
~~~ ## Cell style -To apply a CSS class to the table body or footer cells, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. +To apply a CSS class to body or footer cells, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. To style header cells, use the `cellStyle` parameter of the [`headerShape`](/api/config/headershape-property) property. In both cases, `cellStyle` returns a string that Pivot uses as the CSS class name for the cell. + +The example below customizes cell styles as follows: -In the example below the styles of cells in the table body and headers are customized in the following way: -- for the table body cells, styles are applied dynamically based on cell values (e.g., "Down", "Up", "Idle") in the "status" field and on total values (greater than 40 or less than 5) -- the style of header cells is determined by the value in the "streaming" field, with specific styles applied for "no" or other values (the CSS class "status-down" is applied for the "no" value and "status-up" is applied for the not "no" value) +- for body cells, styles depend on cell values in the `status` field (`Down`, `Up`, `Idle`) and on total values (greater than 40 or less than 5) +- for header cells, the value in the `streaming` field selects the class — `status-down` for `no` and `status-up` for any other value ~~~jsx const widget = new pivot.Pivot("#pivot", { @@ -157,12 +155,13 @@ const widget = new pivot.Pivot("#pivot", { ## Marking values in cells -The widget API allows marking required values in cells. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following: -- create a CSS class to be applied to the marked cell -- add the CSS class name as the parameter of the `marks` object -- set its value which can be a custom function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. +The widget API can mark specific values in cells via the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. To mark cells: + +- Create a CSS class for the marked cell. +- Add the CSS class name as a parameter of the `marks` object. +- Set its value to a custom function or one of the predefined strings (`"max"`, `"min"`). The function takes the checked value and returns a boolean; when it returns `true`, Pivot assigns the CSS class to the cell. -In the example below, cells with min and max values are marked, and custom function is used to mark cells with values that are non-integer and greater than 2. +The example below marks cells with min and max values and uses a custom function to mark non-integer values greater than 2. ~~~jsx {18-26} const table = new pivot.Pivot("#root", { @@ -215,7 +214,7 @@ const table = new pivot.Pivot("#root", { ## Specific CSS classes -By default, in the table body numbers are aligned to the right with the help of the built-in `.wx-number` CSS class. The exception is the hierarchical column in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). To reset the default number alignment, change the related CSS class. +By default, the built-in `.wx-number` CSS class right-aligns numbers in the table body. The exception is the hierarchical column in the tree mode (when `tree` is set to `true` in the [`tableShape`](/api/config/tableshape-property) property). To reset the default number alignment, change the related CSS class. ~~~html ~~~ -It's also possible to customize the style of total columns via the ` .wx-total` CSS class: +You can also style total columns via the `.wx-total` CSS class: ~~~html