Skip to content

Rewrite guides using optimised skill (/article-guide) #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serhiipylypchuk1991 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rewrite guides using optimised skill (/article-guide) #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
182 changes: 97 additions & 85 deletions docs/guides/configuration.md
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions docs/guides/exporting-data.md
View file
Open in desktop
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 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*/});
Expand All @@ -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:

<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)
- [`export`](/api/table/export)
26 changes: 13 additions & 13 deletions docs/guides/initialization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,41 @@ 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"
<script type="text/javascript" src="./dist/pivot.js"></script>
<link rel="stylesheet" href="./dist/pivot.css">
~~~

## Creating container
## Create a container

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

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
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).
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:

<iframe src="https://snippet.dhtmlx.com/y2buoahe?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
70 changes: 35 additions & 35 deletions docs/guides/integration-with-angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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 */
Expand All @@ -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() {
Expand Down Expand Up @@ -172,7 +172,7 @@ export function getData() {
"state": "Colorado",
"expenses": 45,
"type": "Decaf"
}, // othe data items
}, // other data items
];

const fields: any = [
Expand All @@ -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';
Expand Down Expand Up @@ -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"
// ...
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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";
Expand All @@ -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).
Loading