diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 1298491..d208c4b 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -14,7 +14,7 @@ This guide will give you detailed instructions on how to create Pivot on a page ## Including source files -[Download the package](https://dhtmlx.com/docs/products/dhtmlxPivot/download.shtml) and unpack it into a folder of your project. +See also how to download packages: [Downloading packages](/how-to-start) To create a Pivot app, you need to include 2 source files on your page: diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-exporting-data.md index a1b7279..51deb8e 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-exporting-data.md @@ -6,6 +6,8 @@ description: You can explore how to load and export data in the documentation of ## Preparing data for loading +Pivot supports JSON data format. You can also load CSV data that will be converted to JSON. + The following types of information can be loaded into Pivot: - [`data`](/api/config/data-property) - an array of objects, where each object represents the data row @@ -74,7 +76,7 @@ See also how to define fields and Pivot structure: [Working with data](/guides/w ## Loading data -You can load data into Pivot from an external file or the server-side script after the component has been initialized. +You can load JSON data into Pivot from an external file or the server-side script after the component has been initialized. To load local data from a separate file, first prepare the source file with data. diff --git a/docs/guides/typescript-support.md b/docs/guides/typescript-support.md index 592749d..00e8052 100644 --- a/docs/guides/typescript-support.md +++ b/docs/guides/typescript-support.md @@ -6,9 +6,11 @@ description: You can learn about using typescript with the DHTMLX JavaScript Piv # TypeScript support +TBD + Starting from v1.0, the library of DHTMLX Pivot provides an ability to use TypeScript definitions. The built-in support of TypeScript works out of the box. -:::note +:::info You can try out the functionality right in our Snippet Tool. TODO!!! ::: diff --git a/docs/how-to-start.md b/docs/how-to-start.md index 5c1ba66..3e7041c 100644 --- a/docs/how-to-start.md +++ b/docs/how-to-start.md @@ -10,7 +10,25 @@ This clear and comprehensive tutorial will guide your through the steps you need ![pivot-main](/assets/pivot_main.png) -## Step 1. Including source files +## Step 1. Downloading packages + +[Download packages](https://dhtmlx.com/docs/products/dhtmlxPivot/download.shtml) and unpack it into a folder of your project. + +To install the necessary packages from npm, use the following commands. + +For licensed packages: + +~~~js +npm install @dhx/pivot +~~~ + +For trial packages: + +~~~js +npm install @dhx/trial-pivot +~~~ + +## Step 2. Including source files Start from creating an HTML file and call it *index.html*. Then proceed to include Pivot source files into the created file. @@ -55,7 +73,7 @@ To get Pivot under the proprietary license, refer to **[Support Center](https:// If you want to integrate JavaScript Pivot into React, Angular or Vue projects, refer to the corresponding [**Examples on CodeSandbox**](https://codesandbox.io/u/DHTMLX) for more information. ::: -## Step 2. Creating Pivot +## Step 3. Creating Pivot Now you are ready to add Pivot to the page. First, let's create the DIV container for Pivot. @@ -78,7 +96,7 @@ Now you are ready to add Pivot to the page. First, let's create the DIV containe ~~~ -## Step 3. Configuring Pivot +## Step 4. Configuring Pivot Next you can specify configuration properties you want the Pivot component to have when initialized. diff --git a/docs/news/migration.md b/docs/news/migration.md index 25fdd2a..d229ee1 100644 --- a/docs/news/migration.md +++ b/docs/news/migration.md @@ -6,4 +6,35 @@ description: You can learn about the Migration to Newer Versions in the document # Migration to newer versions -TODO!!! +## 1.5.6 -> 2.0 + +This list of changes will help you migrate from the previous version Pivot 1.5.6 to the totally renewed version Pivot 2.0 + +### Changed API + +#### Properties + +New properties do not fully duplicate the previous ones but provide more extended functionality + +- fieldList -> [fields](/api/config/fields-property) +- fields -> [config](/api/config/config-property) +- mark -> the `marks` parameter of the [tableShape](/api/config/tableshape-property) property +- types -> [methods](/api/config/methods-property) +- layout -> [columnShape](/api/config/columnshape-property), [headerShape](/api/config/headershape-property), [readonly](/api/config/readonly-property) +- customFormat -> [predicates](/api/config/predicates-property) - custom pre-processing functions for data + +#### Events + +- filterApply -> [apply-filter](/api/events/apply-filter-event) +- fieldClick -> there's no an identical event but you can refer to [update-field](/api/events/update-value-event) + +### Removed API + +- [Methods from version 1.5.6](https://docs.dhtmlx.com/pivot/api__refs__pivot_methods.html) are deprecated, all new methods you can find here: [Methods](/api/overview/main-overview#pivot-methods) +- Events: `change`, `fieldClick`, `applyButtonClick` are no longer available in Pivot 2.0 but you can find more extended functionality in a new version (refer to [Pivot events](/api/overview/events-overview)) + + + + + + diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md index 355149c..abc6fb3 100644 --- a/docs/news/whats_new.md +++ b/docs/news/whats_new.md @@ -6,23 +6,24 @@ description: You can explore what's new in DHTMLX Pivot and its release history # What's new -## Version 1.0 +TBD!!! + +## Version 2.0 Released on Month Day, 2024 [Review of release on the blog](https://dhtmlx.com/blog/) -### Initial functionality +### New functionality + +- New events are added: - **Configuring the table structure**: - - defining rows, columns, and values by applying the **config** property - - adding, deleting, reordering fields + - reordering fields - updating the current config - the rendering feature that allows altering the final table configuration on the fly or prevent the rendering of the table altogether - **Showing and hiding the configuration panel** - **Configuring the look and behavior of columns**: - - the sorting feature - - configuring the width - setting autowidth with the ability to set maxRows to be processed for the autoWidth calculation - the firstOnly feature when each field of the same data is analyzed only once to calculate the column width (by default) - **Configuring the look and behavior of headers**: @@ -30,21 +31,13 @@ Released on Month Day, 2024 - changing text orientation - making dimension groups in the table collapsible - **Configuring the look of the table**: - - applying templates to cells, headers - - marking cells - configuring the sizes: rowHeight, headerHeight, footerHeight, colWidth - - the table tree mode - generating the total column and footer - hiding the duplicate values in the table view - fixing columns from the left making them static while scrolling - **Working with data**: - - loading data - - converting data from CSV to JSON - exporting data to the xlsx or csv format - - sorting data - - adding and applying filters - limiting loaded data - - applying and customizing maths methods - - processing data with predicates -- **Localization** and setting date format -- **Styling** (cell style, header template, scroll style, ability to customize the Material theme) \ No newline at end of file + - applying and customizing an extended list of maths methods + - processing data with predicates (applying custom pre-processing functions for data) + - setting date format via locale diff --git a/sidebars.js b/sidebars.js index 02c48f3..f708692 100644 --- a/sidebars.js +++ b/sidebars.js @@ -8,7 +8,7 @@ module.exports = { type: "doc", id: "how-to-start" }, - /*{ + { type: "category", label: "What's new and migration", collapsible: true, @@ -24,11 +24,7 @@ module.exports = { 'news/whats_new', 'news/migration' ] - },*/ - { - type: 'doc', - id: 'news/whats_new' - }, + }, { type: "category", label: "API",