Skip to content
Merged

Next #54

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
2 changes: 1 addition & 1 deletion docs/guides/integration-with-angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,6 @@ platformBrowserDynamic()

Start the app to see Pivot render the data on the page.

![Pivot initialization](../assets/trial_pivot.png)
![DHTMLX Pivot rendered in an Angular application with sample data](../assets/trial_pivot.png)

Pivot is now integrated with Angular. Customize the configuration to suit the project requirements. For the final example, see [**angular-pivot-demo on GitHub**](https://github.com/DHTMLX/angular-pivot-demo).
2 changes: 1 addition & 1 deletion docs/guides/integration-with-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,6 @@ useEffect(() => {

Start the app to see Pivot render the data on the page.

![Pivot initialization](../assets/trial_pivot.png)
![DHTMLX Pivot rendered in a React application with sample data](../assets/trial_pivot.png)

Pivot is now integrated with React. Customize the configuration to suit the project requirements. For the final example, see [**react-pivot-demo on GitHub**](https://github.com/DHTMLX/react-pivot-demo).
2 changes: 1 addition & 1 deletion docs/guides/integration-with-svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,6 @@ onDestroy(() => {

Start the app to see Pivot render the data on the page.

![Pivot initialization](../assets/trial_pivot.png)
![DHTMLX Pivot rendered in a Svelte application with sample data](../assets/trial_pivot.png)

Pivot is now integrated with Svelte. Customize the configuration to suit the project requirements. For the final example, see [**svelte-pivot-demo on GitHub**](https://github.com/DHTMLX/svelte-pivot-demo).
2 changes: 1 addition & 1 deletion docs/guides/integration-with-vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,6 @@ export default {

Start the app to see Pivot render the data on the page.

![Pivot initialization](../assets/trial_pivot.png)
![DHTMLX Pivot rendered in a Vue application with sample data](../assets/trial_pivot.png)

Pivot is now integrated with Vue. Customize the configuration to suit the project requirements. For the final example, see [**vue-pivot-demo on GitHub**](https://github.com/DHTMLX/vue-pivot-demo).
2 changes: 1 addition & 1 deletion docs/how-to-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: You can explore how to start working with DHTMLX Pivot in the docum

This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a full-functional Pivot on a page.

![pivot-main](/assets/pivot_main.png)
![DHTMLX Pivot interface showing the Configuration panel and data table](/assets/pivot_main.png)

## Step 1. Downloading and installing packages

Expand Down
14 changes: 7 additions & 7 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ JavaScript Pivot library is a ready-made component for creating Pivot tables fro

The Pivot UI consists of the two main components: the Configuration panel and the table with data.

![Main](assets/pivot-main.png)
![DHTMLX Pivot interface showing the Configuration panel and data table](assets/pivot-main.png)

## Configuration panel

Expand All @@ -25,7 +25,7 @@ The Configuration panel allows adding columns and rows to the table as well as v

To hide the Configuration panel, click the **Hide Settings** button:

![config_panel](assets/config_panel.png)
![DHTMLX Pivot Configuration panel with the Values, Columns, and Rows areas](assets/config_panel.png)

### Values area

Expand Down Expand Up @@ -66,15 +66,15 @@ To add a new field, in the required area, click the "+" button and select the na

To remove an item, click the delete button ("x").

![add_remove](assets/add_remove.png)
![Adding and removing fields in the DHTMLX Pivot Configuration panel](assets/add_remove.png)

To change the order of values/rows/columns in the table, drag an item to the desired position. The closer an item is to the left in the area's toolbar list, the higher its priority and position in the table.

![priority](assets/priority.png)
![Changing the order and priority of fields in a DHTMLX Pivot area](assets/priority.png)

To set operations that will be applied to all data of the column of the table, in the **Values** area, click the value operation for the required field in the drop-down list, and select the required option from the list.

![operations](assets/operations.png)
![Selecting a data aggregation operation for a value field in DHTMLX Pivot](assets/operations.png)

### Filters

Expand All @@ -86,13 +86,13 @@ Filters appear as drop-down lists for each field in all areas. The Pivot provide

To filter data in the table, click the filter sign of one of the items in the required area, and then select the operator and set the value to filter by, and then click **Apply**. The fields to which filtering is applied will be marked with a special filter sign.

![filters](assets/filter.png)
![Filtering data of a field in DHTMLX Pivot](assets/filter.png)

## Table

Data in the table is displayed as configured in the Configuration panel. The **sorting** in columns is enabled by clicking the column header:

![table](assets/table.png)
![Sorting data by a column header in the DHTMLX Pivot table](assets/table.png)

## What's next

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,6 @@ platformBrowserDynamic()

Starten Sie die App, um zu sehen, wie Pivot die Daten auf der Seite rendert.

![Pivot-Initialisierung](../assets/trial_pivot.png)
![In einer Angular-Anwendung gerendertes DHTMLX Pivot mit Beispieldaten](../assets/trial_pivot.png)

Pivot ist nun in Angular integriert. Passen Sie die Konfiguration an die Anforderungen Ihres Projekts an. Das vollständige Beispiel finden Sie in der [**angular-pivot-demo auf GitHub**](https://github.com/DHTMLX/angular-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,6 @@ useEffect(() => {

Starten Sie die Anwendung, um zu sehen, wie Pivot die Daten auf der Seite rendert.

![Pivot-Initialisierung](../assets/trial_pivot.png)
![In einer React-Anwendung gerendertes DHTMLX Pivot mit Beispieldaten](../assets/trial_pivot.png)

Pivot ist nun in React integriert. Passen Sie die Konfiguration an die Projektanforderungen an. Das vollständige Beispiel finden Sie in der [**react-pivot-demo auf GitHub**](https://github.com/DHTMLX/react-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,6 @@ onDestroy(() => {

Starten Sie die App, um zu sehen, wie Pivot die Daten auf der Seite rendert.

![Pivot-Initialisierung](../assets/trial_pivot.png)
![In einer Svelte-Anwendung gerendertes DHTMLX Pivot mit Beispieldaten](../assets/trial_pivot.png)

Pivot ist nun in Svelte integriert. Passen Sie die Konfiguration an die Anforderungen Ihres Projekts an. Das vollständige Beispiel finden Sie in der [**svelte-pivot-demo auf GitHub**](https://github.com/DHTMLX/svelte-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,6 @@ export default {

Starten Sie die App, um zu sehen, wie Pivot die Daten auf der Seite rendert.

![Pivot-Initialisierung](../assets/trial_pivot.png)
![In einer Vue-Anwendung gerendertes DHTMLX Pivot mit Beispieldaten](../assets/trial_pivot.png)

Pivot ist nun in Vue integriert. Passen Sie die Konfiguration an die Anforderungen Ihres Projekts an. Das vollständige Beispiel finden Sie in der [**vue-pivot-Demo auf GitHub**](https://github.com/DHTMLX/vue-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Erfahren Sie, wie Sie mit DHTMLX Pivot arbeiten – in der Dokument

Dieses klare und umfassende Tutorial führt Sie durch die Schritte, die erforderlich sind, um ein voll funktionsfähiges Pivot auf einer Seite einzurichten.

![pivot-main](/assets/pivot_main.png)
![DHTMLX Pivot-Oberfläche mit Konfigurationsbereich und Datentabelle](/assets/pivot_main.png)

## Schritt 1. Pakete herunterladen und installieren {#step-1-downloading-and-installing-packages}

Expand Down
14 changes: 7 additions & 7 deletions i18n/de/docusaurus-plugin-content-docs/current/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Die JavaScript Pivot-Bibliothek ist eine fertige Komponente zur Erstellung von P

Die Pivot-Oberfläche besteht aus zwei Hauptkomponenten: dem Konfigurationsbereich und der Datentabelle.

![Main](assets/pivot-main.png)
![DHTMLX Pivot-Oberfläche mit Konfigurationsbereich und Datentabelle](assets/pivot-main.png)

## Konfigurationsbereich {#configuration-panel}

Expand All @@ -25,7 +25,7 @@ Im Konfigurationsbereich können Sie der Tabelle Spalten und Zeilen sowie Wertef

Um den Konfigurationsbereich auszublenden, klicken Sie auf die Schaltfläche **Einstellungen ausblenden**:

![config_panel](assets/config_panel.png)
![DHTMLX Pivot-Konfigurationsbereich mit den Bereichen Werte, Spalten und Zeilen](assets/config_panel.png)

### Wertebereich {#values-area}

Expand Down Expand Up @@ -66,15 +66,15 @@ Um ein neues Feld hinzuzufügen, klicken Sie im gewünschten Bereich auf die Sch

Um ein Element zu entfernen, klicken Sie auf die Löschen-Schaltfläche („x").

![add_remove](assets/add_remove.png)
![Felder im DHTMLX Pivot-Konfigurationsbereich hinzufügen und entfernen](assets/add_remove.png)

Um die Reihenfolge von Werten, Zeilen oder Spalten in der Tabelle zu ändern, ziehen Sie ein Element an die gewünschte Position. Je weiter links sich ein Element in der Symbolleistenliste des Bereichs befindet, desto höher ist seine Priorität und Position in der Tabelle.

![priority](assets/priority.png)
![Reihenfolge und Priorität von Feldern in einem DHTMLX Pivot-Bereich ändern](assets/priority.png)

Um Operationen festzulegen, die auf alle Daten einer Tabellenspalte angewendet werden, klicken Sie im **Wertebereich** auf die Wertoperation des gewünschten Felds in der Dropdown-Liste und wählen Sie die gewünschte Option aus der Liste aus.

![operations](assets/operations.png)
![Auswahl einer Datenaggregationsoperation für ein Wertefeld in DHTMLX Pivot](assets/operations.png)

### Filter {#filters}

Expand All @@ -86,13 +86,13 @@ Filter werden als Dropdown-Listen für jedes Feld in allen Bereichen angezeigt.

Um Daten in der Tabelle zu filtern, klicken Sie auf das Filtersymbol eines der Elemente im gewünschten Bereich, wählen Sie dann den Operator aus, legen Sie den Filterwert fest und klicken Sie auf **Anwenden**. Felder, auf die eine Filterung angewendet wird, werden mit einem speziellen Filtersymbol markiert.

![filters](assets/filter.png)
![Filtern von Felddaten in DHTMLX Pivot](assets/filter.png)

## Tabelle {#table}

Die Daten in der Tabelle werden so angezeigt, wie sie im Konfigurationsbereich eingestellt wurden. Die **Sortierung** in Spalten wird durch Klicken auf den Spaltenheader aktiviert:

![table](assets/table.png)
![Sortieren von Daten nach Spaltenüberschrift in der DHTMLX Pivot-Tabelle](assets/table.png)

## Nächste Schritte {#whats-next}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,6 @@ platformBrowserDynamic()

앱을 시작하면 Pivot이 페이지에 데이터를 렌더링하는 것을 확인할 수 있습니다.

![Pivot 초기화](../assets/trial_pivot.png)
![샘플 데이터와 함께 Angular 애플리케이션에 렌더링된 DHTMLX Pivot](../assets/trial_pivot.png)

이제 Pivot이 Angular와 통합되었습니다. 프로젝트 요구 사항에 맞게 구성을 커스터마이즈하세요. 최종 예제는 [**GitHub의 angular-pivot-demo**](https://github.com/DHTMLX/angular-pivot-demo)를 참조하세요.
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,6 @@ useEffect(() => {

앱을 시작하면 페이지에 Pivot이 데이터를 렌더링하는 것을 확인할 수 있습니다.

![Pivot 초기화](../assets/trial_pivot.png)
![샘플 데이터와 함께 React 애플리케이션에 렌더링된 DHTMLX Pivot](../assets/trial_pivot.png)

이제 Pivot이 React와 통합되었습니다. 프로젝트 요구 사항에 맞게 설정을 사용자 정의하세요. 최종 예제는 [**GitHub의 react-pivot-demo**](https://github.com/DHTMLX/react-pivot-demo)를 참고하세요.
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,6 @@ onDestroy(() => {

앱을 시작하면 Pivot이 페이지에 데이터를 렌더링하는 것을 확인할 수 있습니다.

![Pivot 초기화](../assets/trial_pivot.png)
![샘플 데이터와 함께 Svelte 애플리케이션에 렌더링된 DHTMLX Pivot](../assets/trial_pivot.png)

이제 Pivot이 Svelte와 통합되었습니다. 프로젝트 요구사항에 맞게 설정을 커스터마이즈하세요. 최종 예제는 [**GitHub의 svelte-pivot-demo**](https://github.com/DHTMLX/svelte-pivot-demo)를 참조하세요.
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,6 @@ export default {

앱을 시작하면 페이지에서 Pivot이 데이터를 렌더링하는 것을 확인할 수 있습니다.

![Pivot 초기화](../assets/trial_pivot.png)
![샘플 데이터와 함께 Vue 애플리케이션에 렌더링된 DHTMLX Pivot](../assets/trial_pivot.png)

이제 Pivot이 Vue와 통합되었습니다. 프로젝트 요구 사항에 맞게 구성을 사용자 정의하세요. 최종 예제는 [**GitHub의 vue-pivot-demo**](https://github.com/DHTMLX/vue-pivot-demo)를 참고하세요.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: DHTMLX JavaScript Pivot 라이브러리 문서에서 DHTMLX Pivot

이 명확하고 포괄적인 튜토리얼은 페이지에 완전한 기능을 갖춘 Pivot를 구성하기 위해 필요한 단계를 안내합니다.

![pivot-main](/assets/pivot_main.png)
![구성 패널과 데이터 테이블을 보여주는 DHTMLX Pivot 인터페이스](/assets/pivot_main.png)

## 1단계. 패키지 다운로드 및 설치 {#step-1-downloading-and-installing-packages}

Expand Down
14 changes: 7 additions & 7 deletions i18n/ko/docusaurus-plugin-content-docs/current/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ JavaScript Pivot 라이브러리는 대용량 데이터셋으로 피벗 테이

Pivot UI는 구성 패널과 데이터 테이블, 두 가지 주요 컴포넌트로 구성됩니다.

![Main](assets/pivot-main.png)
![구성 패널과 데이터 테이블을 보여주는 DHTMLX Pivot 인터페이스](assets/pivot-main.png)

## 구성 패널 {#configuration-panel}

Expand All @@ -25,7 +25,7 @@ Pivot UI는 구성 패널과 데이터 테이블, 두 가지 주요 컴포넌트

구성 패널을 숨기려면 **설정 숨기기** 버튼을 클릭하십시오:

![config_panel](assets/config_panel.png)
![Values, Columns, Rows 영역이 있는 DHTMLX Pivot 구성 패널](assets/config_panel.png)

### Values 영역 {#values-area}

Expand Down Expand Up @@ -66,15 +66,15 @@ Pivot UI는 구성 패널과 데이터 테이블, 두 가지 주요 컴포넌트

항목을 제거하려면 삭제 버튼("x")을 클릭하십시오.

![add_remove](assets/add_remove.png)
![DHTMLX Pivot 구성 패널에서 필드 추가 및 제거](assets/add_remove.png)

테이블에서 값/행/열의 순서를 변경하려면 항목을 원하는 위치로 드래그하십시오. 영역 툴바 목록에서 항목이 왼쪽에 위치할수록 테이블 내 우선순위와 위치가 높아집니다.

![priority](assets/priority.png)
![DHTMLX Pivot 영역에서 필드의 순서와 우선순위 변경](assets/priority.png)

테이블 열의 모든 데이터에 적용할 연산을 설정하려면 **Values** 영역에서 원하는 필드의 값 연산을 클릭한 후 목록에서 필요한 옵션을 선택하십시오.

![operations](assets/operations.png)
![DHTMLX Pivot에서 값 필드의 데이터 집계 연산 선택](assets/operations.png)

### 필터 {#filters}

Expand All @@ -86,13 +86,13 @@ Pivot UI는 구성 패널과 데이터 테이블, 두 가지 주요 컴포넌트

테이블에서 데이터를 필터링하려면 원하는 영역의 항목에서 필터 아이콘을 클릭한 후 연산자를 선택하고 필터링 기준값을 설정한 다음 **적용**을 클릭하십시오. 필터링이 적용된 필드에는 특별한 필터 아이콘이 표시됩니다.

![filters](assets/filter.png)
![DHTMLX Pivot에서 필드 데이터 필터링](assets/filter.png)

## 테이블 {#table}

테이블의 데이터는 구성 패널에서 설정한 대로 표시됩니다. 열 헤더를 클릭하면 열 **정렬**이 활성화됩니다:

![table](assets/table.png)
![DHTMLX Pivot 테이블에서 열 헤더 기준으로 데이터 정렬](assets/table.png)

## 다음 단계 {#whats-next}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,6 @@ platformBrowserDynamic()

Запустите приложение, чтобы увидеть отрисовку данных в Pivot на странице.

![Инициализация Pivot](../assets/trial_pivot.png)
![DHTMLX Pivot, отрендеренный в приложении Angular с демонстрационными данными](../assets/trial_pivot.png)

Pivot теперь интегрирован с Angular. Настройте конфигурацию в соответствии с требованиями проекта. Итоговый пример см. в [**angular-pivot-demo на GitHub**](https://github.com/DHTMLX/angular-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,6 @@ useEffect(() => {

Запустите приложение, чтобы увидеть, как Pivot отображает данные на странице.

![Инициализация Pivot](../assets/trial_pivot.png)
![DHTMLX Pivot, отрендеренный в приложении React с демонстрационными данными](../assets/trial_pivot.png)

Pivot теперь интегрирован с React. Настройте конфигурацию под требования проекта. Готовый пример см. в [**react-pivot-demo на GitHub**](https://github.com/DHTMLX/react-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,6 @@ onDestroy(() => {

Запустите приложение, чтобы увидеть, как Pivot отображает данные на странице.

![Инициализация Pivot](../assets/trial_pivot.png)
![DHTMLX Pivot, отрендеренный в приложении Svelte с демонстрационными данными](../assets/trial_pivot.png)

Pivot теперь интегрирован со Svelte. Настройте конфигурацию в соответствии с требованиями проекта. Финальный пример см. на [**svelte-pivot-demo на GitHub**](https://github.com/DHTMLX/svelte-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,6 @@ export default {

Запустите приложение, чтобы увидеть, как Pivot отображает данные на странице.

![Инициализация Pivot](../assets/trial_pivot.png)
![DHTMLX Pivot, отрендеренный в приложении Vue с демонстрационными данными](../assets/trial_pivot.png)

Pivot теперь интегрирован с Vue. Настройте конфигурацию в соответствии с требованиями проекта. Финальный пример см. в [**vue-pivot-demo на GitHub**](https://github.com/DHTMLX/vue-pivot-demo).
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Вы можете узнать, как начать работу с

Это понятное и подробное руководство проведёт вас через все шаги, необходимые для размещения полнофункционального Pivot на странице.

![pivot-main](/assets/pivot_main.png)
![Интерфейс DHTMLX Pivot: панель настройки и таблица с данными](/assets/pivot_main.png)

## Шаг 1. Загрузка и установка пакетов {#step-1-downloading-and-installing-packages}

Expand Down
Loading
Loading