@syncfusion/ej2-react-pivotview 20.3.59 → 20.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -0
- package/README.md +118 -36
- package/diConfig.json +50 -10
- package/dist/ej2-react-pivotview.min.js +1 -1
- package/dist/ej2-react-pivotview.umd.min.js +1 -1
- package/package.json +55 -13
- package/styles/bootstrap-dark.css +15 -4
- package/styles/bootstrap.css +16 -5
- package/styles/bootstrap4.css +24 -7
- package/styles/bootstrap5-dark.css +23 -10
- package/styles/bootstrap5.css +23 -10
- package/styles/fabric-dark.css +39 -8
- package/styles/fabric.css +42 -8
- package/styles/fluent-dark.css +44 -20
- package/styles/fluent.css +44 -20
- package/styles/highcontrast-light.css +29 -6
- package/styles/highcontrast.css +29 -6
- package/styles/material-dark.css +19 -4
- package/styles/material.css +25 -4
- package/styles/pivotfieldlist/bootstrap-dark.css +8 -2
- package/styles/pivotfieldlist/bootstrap.css +9 -3
- package/styles/pivotfieldlist/bootstrap4.css +9 -3
- package/styles/pivotfieldlist/bootstrap5-dark.css +15 -3
- package/styles/pivotfieldlist/bootstrap5.css +15 -3
- package/styles/pivotfieldlist/fabric-dark.css +19 -4
- package/styles/pivotfieldlist/fabric.css +19 -4
- package/styles/pivotfieldlist/fluent-dark.css +19 -7
- package/styles/pivotfieldlist/fluent.css +19 -7
- package/styles/pivotfieldlist/highcontrast-light.css +19 -4
- package/styles/pivotfieldlist/highcontrast.css +19 -4
- package/styles/pivotfieldlist/material-dark.css +12 -2
- package/styles/pivotfieldlist/material.css +12 -2
- package/styles/pivotfieldlist/tailwind-dark.css +15 -3
- package/styles/pivotfieldlist/tailwind.css +15 -3
- package/styles/pivotview/bootstrap-dark.css +7 -2
- package/styles/pivotview/bootstrap.css +7 -2
- package/styles/pivotview/bootstrap4.css +15 -4
- package/styles/pivotview/bootstrap5-dark.css +8 -7
- package/styles/pivotview/bootstrap5.css +8 -7
- package/styles/pivotview/fabric-dark.css +20 -4
- package/styles/pivotview/fabric.css +23 -4
- package/styles/pivotview/fluent-dark.css +25 -13
- package/styles/pivotview/fluent.css +25 -13
- package/styles/pivotview/highcontrast-light.css +10 -2
- package/styles/pivotview/highcontrast.css +10 -2
- package/styles/pivotview/material-dark.css +7 -2
- package/styles/pivotview/material.css +13 -2
- package/styles/pivotview/tailwind-dark.css +12 -10
- package/styles/pivotview/tailwind.css +12 -10
- package/styles/tailwind-dark.css +27 -13
- package/styles/tailwind.css +27 -13
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,55 @@
|
|
|
6
6
|
|
|
7
7
|
#### Bug Fixes
|
|
8
8
|
|
|
9
|
+
- `#I423050` - Filter state will now be properly maintained in the member editor.
|
|
10
|
+
- `#I420253` - When virtual scrolling is enabled, the pivot table will now scroll properly.
|
|
11
|
+
- Number formatting is now applied properly to row and column headers in the pivot table.
|
|
12
|
+
|
|
13
|
+
#### New Features
|
|
14
|
+
|
|
15
|
+
- `#I347303`, `#I400764`, `#F172939` - Provided support for displaying row and column sub-totals at the top or bottom of the header group in the pivot table.
|
|
16
|
+
- `#I310709`, `#I346859` - Provided support to display pivot chart's series for multiple measures on a single y-axis.
|
|
17
|
+
- `#I398184` - The pivot table now supports customising the size of PDF document while exporting.
|
|
18
|
+
- `#I305545` - The pivot table now allows you to export both the table and the chart to a single PDF document.
|
|
19
|
+
|
|
20
|
+
#### Breaking Changes
|
|
21
|
+
|
|
22
|
+
- The `chartSettings.showMemberSeries` property is deprecated and will no longer to be used. Use `chartSettings.showPointColorByMembers` to achieve the same.
|
|
23
|
+
|
|
24
|
+
| Previous | Now |
|
|
25
|
+
|---|---|
|
|
26
|
+
| showMemberSeries | showPointColorByMembers |
|
|
27
|
+
|
|
28
|
+
- The `chartExport` method parameters for the pivot table have now been changed.
|
|
29
|
+
|
|
30
|
+
**Previous**
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
| Parameter | Type | Description |
|
|
34
|
+
|---|---|---|
|
|
35
|
+
| type | ExportType | Defines the export type. |
|
|
36
|
+
| fileName | string | Defines file name of export document. |
|
|
37
|
+
| orientation | PdfPageOrientation | Defines the page orientation on pdf export(0 for Portrait mode, 1 for Landscape mode). |
|
|
38
|
+
| width | number | Defines width of the export document. |
|
|
39
|
+
| height | number | Defines width of the export document. |
|
|
40
|
+
|
|
41
|
+
**Now**
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
| Parameter | Type | Description |
|
|
45
|
+
|---|---|---|
|
|
46
|
+
| type | ExportType | Defines the export type. |
|
|
47
|
+
| pdfExportProperties | PdfExportProperties | Allows to define the chart's export properties such as file name, orientation, width and height. |
|
|
48
|
+
| isMultipleExport | boolean | Allows to export multiple tables and charts into a single PDF document. |
|
|
49
|
+
| pdfDoc | Object | Allows the export of an external PDF document along with current PDF document. |
|
|
50
|
+
| isBlob | boolean | Allows the PDF document to be saved as blob data. |
|
|
51
|
+
|
|
52
|
+
## 20.3.59 (2022-11-29)
|
|
53
|
+
|
|
54
|
+
### Pivot Table
|
|
55
|
+
|
|
56
|
+
#### Bug Fixes
|
|
57
|
+
|
|
9
58
|
- `#I405590` - The pivot table will now properly refresh while performing value sorting with the grouping bar and autofit enabled.
|
|
10
59
|
- `#I420612` - The pivot table will now be rendered properly while switching between reports in the toolbar.
|
|
11
60
|
- `#F420612` - The pivot table's alphanumeric sorting will now works properly.
|
package/README.md
CHANGED
|
@@ -1,61 +1,143 @@
|
|
|
1
|
-
#
|
|
1
|
+
# React Pivot Table Component
|
|
2
2
|
|
|
3
|
-
The pivot
|
|
3
|
+
The [React Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm) is a multi-dimensional data visualization component built on top of relational and OLAP data sources. The pivot report can be managed dynamically at runtime, along with other features such as graphical visualization (Pivot Chart), drill down/up, aggregation, filtering, sorting, grouping, conditional formatting, drill through, editing, hyperlink, and more. The large amounts of data are effectively handled by virtualization or paging support.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://ej2.syncfusion.com/react/documentation/pivotview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm">Getting started</a> .
|
|
7
|
+
<a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/bootstrap5/pivot-table/default">Online demos</a> .
|
|
8
|
+
<a href="https://www.syncfusion.com/react-components/react-pivot-table?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm">Learn more</a>
|
|
9
|
+
</p>
|
|
6
10
|
|
|
7
|
-
>
|
|
8
|
-
|
|
11
|
+
<p align="center">
|
|
12
|
+
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-pivot-table.png" alt="React Pivot Table Component" />
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
<p align="center">
|
|
16
|
+
Trusted by the world's leading companies
|
|
17
|
+
<a href="https://www.syncfusion.com">
|
|
18
|
+
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Bootstrap logo">
|
|
19
|
+
</a>
|
|
20
|
+
</p>
|
|
9
21
|
|
|
10
22
|
## Setup
|
|
11
23
|
|
|
12
|
-
|
|
24
|
+
### Create a React Application
|
|
25
|
+
|
|
26
|
+
You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app, use the following command.
|
|
13
27
|
|
|
14
|
-
```
|
|
15
|
-
|
|
28
|
+
```bash
|
|
29
|
+
npx create-react-app my-app --template typescript
|
|
30
|
+
cd my-app
|
|
31
|
+
npm start
|
|
16
32
|
```
|
|
17
33
|
|
|
18
|
-
|
|
34
|
+
### Add Syncfusion Pivot Table package
|
|
19
35
|
|
|
20
|
-
|
|
21
|
-
* [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/default.html)
|
|
22
|
-
* [Product Page](https://www.syncfusion.com/react-ui-components/pivot-table)
|
|
36
|
+
All Syncfusion React packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the React Pivot Table package, use the following command.
|
|
23
37
|
|
|
24
|
-
|
|
38
|
+
```bash
|
|
39
|
+
npm install @syncfusion/ej2-react-pivotview --save
|
|
40
|
+
```
|
|
25
41
|
|
|
26
|
-
|
|
42
|
+
### Add CSS references for Pivot Table
|
|
43
|
+
|
|
44
|
+
Add CSS references needed for a Pivot Table in **src/App.css** from the **../node_modules/@syncfusion** package folder.
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
|
|
48
|
+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
|
|
49
|
+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
|
|
50
|
+
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
|
|
51
|
+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
|
|
52
|
+
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
|
|
53
|
+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
|
|
54
|
+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
|
|
55
|
+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
|
|
56
|
+
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
|
|
57
|
+
@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css';
|
|
58
|
+
```
|
|
27
59
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
60
|
+
### Add Pivot Table Component
|
|
61
|
+
|
|
62
|
+
In the **src/App.tsx** file, use the following code snippet to render the Syncfusion React Pivot Table component and import **App.css** to apply styles to the Pivot Table.
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { IDataSet, IDataOptions, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
|
|
66
|
+
import * as React from 'react';
|
|
67
|
+
import './App.css';
|
|
68
|
+
|
|
69
|
+
export default function App() {
|
|
70
|
+
let pivotData: IDataSet[] = [
|
|
71
|
+
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
|
|
72
|
+
{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
|
|
73
|
+
{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
|
|
74
|
+
{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
|
|
75
|
+
{ 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }
|
|
76
|
+
];
|
|
77
|
+
let dataSourceSettings: IDataOptions = {
|
|
78
|
+
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
|
|
79
|
+
dataSource: pivotData,
|
|
80
|
+
expandAll: false,
|
|
81
|
+
filters: [],
|
|
82
|
+
formatSettings: [{ name: 'Amount', format: 'C0' }],
|
|
83
|
+
rows: [{ name: 'Country' }, { name: 'Products' }],
|
|
84
|
+
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
|
|
85
|
+
};
|
|
86
|
+
return <PivotViewComponent id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>
|
|
87
|
+
}
|
|
88
|
+
```
|
|
33
89
|
|
|
34
|
-
##
|
|
90
|
+
## Supported frameworks
|
|
35
91
|
|
|
36
|
-
|
|
37
|
-
* [**Filtering**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/filtering) - Allows user to view only specific/desired records in the component.
|
|
38
|
-
* [**Sorting**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/sorting) - Both member and value sorting are supported. It’s allows user to order fields and values (column) either in ascending or descending order respectively.
|
|
39
|
-
* [**Field List & Grouping Bar**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/grouping-bar) - Supports UI interaction at runtime to dynamically change the report along with sorting, filtering and remove options.
|
|
40
|
-
* [**Aggregation**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/aggregation) - Provides built in aggregation types like sum, average, min, max and count.
|
|
41
|
-
* [**Calculated Field**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/calculated-field) - Users can add new value field(s) to the report dynamically using this option.
|
|
42
|
-
* **Adaptive Rendering** - Adapts with optimal user interfaces for mobile and desktop form-factors, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
|
|
43
|
-
* [**Exporting**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=pivot-grid#/material/pivot-view/exporting) - Provides the option to exporting records to Excel, CSV and PDF formats.
|
|
92
|
+
Pivot Table component is also offered in the following list of frameworks.
|
|
44
93
|
|
|
45
|
-
|
|
94
|
+
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/> [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
|
|
95
|
+
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
96
|
+
|
|
97
|
+
## Showcase samples
|
|
46
98
|
|
|
47
|
-
|
|
99
|
+
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/default)
|
|
100
|
+
* Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-react-health-tracker-dashboard-demo), [Live Demo](https://ej2.syncfusion.com/showcase/react/fitness-tracker-app/)
|
|
48
101
|
|
|
49
|
-
|
|
50
|
-
* New [GitHub issue](https://github.com/syncfusion/ej2-react-ui-components/issues/new).
|
|
51
|
-
* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
|
|
102
|
+
## Key features
|
|
52
103
|
|
|
53
|
-
|
|
104
|
+
* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/local): Binds the Pivot Table component with an array of JSON objects, CSV files, and web services. It also supports multi-dimensional data sources, such as OLAP.
|
|
105
|
+
* [Pivot chart](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/pivot-chart): Allows user to visualize the pivot data graphically with 20+ chart types.
|
|
106
|
+
* [Drill down](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/drill-down): Provides option to view the bound data in both detailed and abstract view.
|
|
107
|
+
* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/filtering): Allows user to view only specific/desired records in the component.
|
|
108
|
+
* [Sorting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/sorting): Both member and value sorting are supported. It’s allows user to order fields and values (column) either in ascending or descending order respectively.
|
|
109
|
+
* [Field list and grouping bar](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/grouping-bar): Supports UI interaction at runtime to dynamically change the report along with sorting, filtering and remove options.
|
|
110
|
+
* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/aggregation): Provides built-in aggregation types such as sum, count, product, average, min, max, and more.
|
|
111
|
+
* [Calculated field](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/calculated-field): Users can add new value field(s) to the report dynamically using this option.
|
|
112
|
+
* [Grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/grouping): Allows you to automatically group date, time, number, and string data based on group interval.
|
|
113
|
+
* [Virtual scrolling and paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/paging): Provides the option to display large amounts of data page by page, using either virtual scrolling or pager UI.
|
|
114
|
+
* [Drill through and editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/editing): Provides the ability to perform CRUD operations such as creating, reading, updating, and deleting raw data at runtime via an interactive UI.
|
|
115
|
+
* [Toolbar](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/tool-bar): Provides the option to access frequently used features like switching between pivot table and pivot chart, changing chart types, conditional formatting, exporting, and so on.
|
|
116
|
+
* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/cell-template): Templates can be used to create custom user experiences in the pivot table.
|
|
117
|
+
* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#/material/pivot-table/exporting): Data can be exported to Excel, CSV, and PDF formats.
|
|
118
|
+
* [Right-to-left (RTL)](https://ej2.syncfusion.com/react/documentation/pivotview/globalization-and-localization/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#right-to-left-rtl): Aligns content in the Pivot Table component from right to left.
|
|
119
|
+
* [Globalization](https://ej2.syncfusion.com/react/documentation/pivotview/globalization-and-localization/?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm#globalization): Personalize the Pivot Table component with different languages, as well as culture-specific date and number formatting.
|
|
54
120
|
|
|
55
|
-
|
|
121
|
+
## Support
|
|
122
|
+
|
|
123
|
+
Product support is available through the following mediums.
|
|
124
|
+
|
|
125
|
+
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
126
|
+
* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm)
|
|
127
|
+
* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
|
|
128
|
+
* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm)
|
|
129
|
+
* Live chat
|
|
56
130
|
|
|
57
131
|
## Changelog
|
|
58
132
|
|
|
59
|
-
Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/CHANGELOG.md?utm_source=npm&utm_campaign=pivot-
|
|
133
|
+
Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
|
134
|
+
|
|
135
|
+
## License and copyright
|
|
136
|
+
|
|
137
|
+
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
|
|
138
|
+
|
|
139
|
+
> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
|
140
|
+
|
|
141
|
+
See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-pivot-table-npm) for more info.
|
|
60
142
|
|
|
61
143
|
© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
package/diConfig.json
CHANGED
|
@@ -4,30 +4,70 @@
|
|
|
4
4
|
"blazorType": "native",
|
|
5
5
|
"keywords": {
|
|
6
6
|
"common": [
|
|
7
|
-
"ej2-pivotview",
|
|
8
|
-
"pivotview",
|
|
9
7
|
"ej2",
|
|
10
8
|
"syncfusion",
|
|
11
|
-
"
|
|
9
|
+
"JavaScript",
|
|
10
|
+
"TypeScript",
|
|
11
|
+
"BI",
|
|
12
|
+
"business-intelligence",
|
|
12
13
|
"data",
|
|
13
|
-
"
|
|
14
|
+
"db",
|
|
15
|
+
"database",
|
|
16
|
+
"json",
|
|
17
|
+
"web-service",
|
|
18
|
+
"relational",
|
|
19
|
+
"excel",
|
|
20
|
+
"csv",
|
|
21
|
+
"olap",
|
|
22
|
+
"cube",
|
|
23
|
+
"sql",
|
|
24
|
+
"analysis-services",
|
|
25
|
+
"multi-dimension",
|
|
26
|
+
"measure",
|
|
27
|
+
"dimension",
|
|
28
|
+
"pivot",
|
|
29
|
+
"aggregation",
|
|
30
|
+
"grid",
|
|
31
|
+
"table",
|
|
32
|
+
"chart",
|
|
33
|
+
"pivotview",
|
|
34
|
+
"pivotgrid",
|
|
35
|
+
"pivottable",
|
|
36
|
+
"pivot-grid",
|
|
37
|
+
"pivot-table",
|
|
38
|
+
"pivotchart",
|
|
39
|
+
"pivot-chart",
|
|
40
|
+
"field-list",
|
|
41
|
+
"pivot-field-list",
|
|
42
|
+
"pivottable-field-list",
|
|
43
|
+
"pivot-table-field-list",
|
|
44
|
+
"filtering",
|
|
45
|
+
"sorting",
|
|
46
|
+
"expand",
|
|
47
|
+
"collapse",
|
|
48
|
+
"summary",
|
|
49
|
+
"totals",
|
|
50
|
+
"formatting",
|
|
51
|
+
"grouping",
|
|
52
|
+
"calculated-field",
|
|
53
|
+
"drill-through",
|
|
54
|
+
"editing",
|
|
55
|
+
"virtual-scrolling",
|
|
56
|
+
"paging"
|
|
14
57
|
],
|
|
15
58
|
"angular": [
|
|
16
59
|
"angular",
|
|
17
|
-
"
|
|
18
|
-
"ej2-ng-pivotview"
|
|
60
|
+
"angular-pivotview"
|
|
19
61
|
],
|
|
20
62
|
"react": [
|
|
21
63
|
"react",
|
|
22
64
|
"reactjs",
|
|
23
|
-
"react-pivotview"
|
|
24
|
-
"ej2-react-pivotview"
|
|
65
|
+
"react-pivotview"
|
|
25
66
|
],
|
|
26
67
|
"vue": [
|
|
27
68
|
"vue",
|
|
28
69
|
"vuejs",
|
|
29
|
-
"vue-pivotview"
|
|
30
|
-
"ej2-vue-pivotview"
|
|
70
|
+
"vue-pivotview"
|
|
31
71
|
]
|
|
32
72
|
},
|
|
33
73
|
"repository": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-pivotview.min.js
|
|
3
|
-
* version : 20.
|
|
3
|
+
* version : 20.4.38
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-pivotview.umd.min.js
|
|
3
|
-
* version : 20.
|
|
3
|
+
* version : 20.4.38
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"_from": "@syncfusion/ej2-react-pivotview@*",
|
|
3
|
-
"_id": "@syncfusion/ej2-react-pivotview@20.
|
|
3
|
+
"_id": "@syncfusion/ej2-react-pivotview@20.8.13",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-Wxna+Lkn3eY1SF2thjC9VeTwntZ4dGhCxJo826O9kXooVVRpIs2s2iYxloz2PVc5lfG+ZqsmYUBiZtwFbytrpw==",
|
|
6
6
|
"_location": "/@syncfusion/ej2-react-pivotview",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"_requiredBy": [
|
|
20
20
|
"/"
|
|
21
21
|
],
|
|
22
|
-
"_resolved": "https://nexus.syncfusion.com/repository/ej2-
|
|
23
|
-
"_shasum": "
|
|
22
|
+
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-20.8.13.tgz",
|
|
23
|
+
"_shasum": "0e8d26f47e77acb0bdddb34771169409ebf52720",
|
|
24
24
|
"_spec": "@syncfusion/ej2-react-pivotview@*",
|
|
25
25
|
"_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
|
|
26
26
|
"author": {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
"bundleDependencies": false,
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@syncfusion/ej2-base": "~20.
|
|
35
|
-
"@syncfusion/ej2-pivotview": "20.
|
|
36
|
-
"@syncfusion/ej2-react-base": "~20.
|
|
34
|
+
"@syncfusion/ej2-base": "~20.4.38",
|
|
35
|
+
"@syncfusion/ej2-pivotview": "20.4.38",
|
|
36
|
+
"@syncfusion/ej2-react-base": "~20.4.38"
|
|
37
37
|
},
|
|
38
38
|
"deprecated": false,
|
|
39
39
|
"description": "The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table. for React",
|
|
@@ -41,17 +41,59 @@
|
|
|
41
41
|
"es2015": "dist/es6/ej2-react-pivotview.es2015.js",
|
|
42
42
|
"homepage": "https://github.com/syncfusion/ej2-react-ui-components#readme",
|
|
43
43
|
"keywords": [
|
|
44
|
-
"ej2-pivotview",
|
|
45
|
-
"pivotview",
|
|
46
44
|
"ej2",
|
|
47
45
|
"syncfusion",
|
|
48
|
-
"
|
|
46
|
+
"JavaScript",
|
|
47
|
+
"TypeScript",
|
|
48
|
+
"BI",
|
|
49
|
+
"business-intelligence",
|
|
49
50
|
"data",
|
|
51
|
+
"db",
|
|
52
|
+
"database",
|
|
53
|
+
"json",
|
|
54
|
+
"web-service",
|
|
55
|
+
"relational",
|
|
56
|
+
"excel",
|
|
57
|
+
"csv",
|
|
58
|
+
"olap",
|
|
59
|
+
"cube",
|
|
60
|
+
"sql",
|
|
61
|
+
"analysis-services",
|
|
62
|
+
"multi-dimension",
|
|
63
|
+
"measure",
|
|
64
|
+
"dimension",
|
|
65
|
+
"pivot",
|
|
66
|
+
"aggregation",
|
|
67
|
+
"grid",
|
|
50
68
|
"table",
|
|
69
|
+
"chart",
|
|
70
|
+
"pivotview",
|
|
71
|
+
"pivotgrid",
|
|
72
|
+
"pivottable",
|
|
73
|
+
"pivot-grid",
|
|
74
|
+
"pivot-table",
|
|
75
|
+
"pivotchart",
|
|
76
|
+
"pivot-chart",
|
|
77
|
+
"field-list",
|
|
78
|
+
"pivot-field-list",
|
|
79
|
+
"pivottable-field-list",
|
|
80
|
+
"pivot-table-field-list",
|
|
81
|
+
"filtering",
|
|
82
|
+
"sorting",
|
|
83
|
+
"expand",
|
|
84
|
+
"collapse",
|
|
85
|
+
"summary",
|
|
86
|
+
"totals",
|
|
87
|
+
"formatting",
|
|
88
|
+
"grouping",
|
|
89
|
+
"calculated-field",
|
|
90
|
+
"drill-through",
|
|
91
|
+
"editing",
|
|
92
|
+
"virtual-scrolling",
|
|
93
|
+
"paging",
|
|
51
94
|
"react",
|
|
52
95
|
"reactjs",
|
|
53
|
-
"react-pivotview"
|
|
54
|
-
"ej2-react-pivotview"
|
|
96
|
+
"react-pivotview"
|
|
55
97
|
],
|
|
56
98
|
"license": "SEE LICENSE IN license",
|
|
57
99
|
"main": "./dist/ej2-react-pivotview.umd.min.js",
|
|
@@ -61,6 +103,6 @@
|
|
|
61
103
|
"type": "git",
|
|
62
104
|
"url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
|
|
63
105
|
},
|
|
64
|
-
"version": "20.
|
|
106
|
+
"version": "20.4.38",
|
|
65
107
|
"sideEffects": false
|
|
66
108
|
}
|
|
@@ -896,6 +896,7 @@
|
|
|
896
896
|
}
|
|
897
897
|
.e-pivotview .e-valuescontent {
|
|
898
898
|
padding-right: 8px;
|
|
899
|
+
text-align: right;
|
|
899
900
|
}
|
|
900
901
|
.e-pivotview .e-grid .e-rowcell {
|
|
901
902
|
/* stylelint-disable */
|
|
@@ -935,7 +936,7 @@
|
|
|
935
936
|
}
|
|
936
937
|
.e-pivotview .e-member-editor-dialog,
|
|
937
938
|
.e-pivotview .e-olap-editor-dialog {
|
|
938
|
-
min-height:
|
|
939
|
+
min-height: 350px !important;
|
|
939
940
|
min-width: 350px !important;
|
|
940
941
|
visibility: hidden;
|
|
941
942
|
}
|
|
@@ -1582,7 +1583,7 @@
|
|
|
1582
1583
|
.e-pivotview .e-expand,
|
|
1583
1584
|
.e-pivotview .e-collapse {
|
|
1584
1585
|
cursor: pointer;
|
|
1585
|
-
display: inline;
|
|
1586
|
+
display: inline-block;
|
|
1586
1587
|
height: 18px;
|
|
1587
1588
|
margin-top: 5px;
|
|
1588
1589
|
text-align: center;
|
|
@@ -1932,6 +1933,9 @@
|
|
|
1932
1933
|
margin-left: 0;
|
|
1933
1934
|
margin-right: 7px;
|
|
1934
1935
|
}
|
|
1936
|
+
.e-pivotview.e-rtl .e-valuescontent {
|
|
1937
|
+
text-align: left;
|
|
1938
|
+
}
|
|
1935
1939
|
.e-pivotview.e-rtl .e-group-values,
|
|
1936
1940
|
.e-pivotview.e-rtl .e-group-columns,
|
|
1937
1941
|
.e-pivotview.e-rtl .e-group-filters,
|
|
@@ -2052,6 +2056,7 @@
|
|
|
2052
2056
|
.e-pivottooltip {
|
|
2053
2057
|
border-radius: 4px;
|
|
2054
2058
|
padding: 3px 2px;
|
|
2059
|
+
text-align: initial;
|
|
2055
2060
|
}
|
|
2056
2061
|
|
|
2057
2062
|
.e-pivottooltip p {
|
|
@@ -3463,6 +3468,7 @@
|
|
|
3463
3468
|
display: inline-table;
|
|
3464
3469
|
height: 100%;
|
|
3465
3470
|
width: 100%;
|
|
3471
|
+
min-width: 265px;
|
|
3466
3472
|
}
|
|
3467
3473
|
.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-fullrow {
|
|
3468
3474
|
cursor: move;
|
|
@@ -3486,6 +3492,8 @@
|
|
|
3486
3492
|
cursor: pointer;
|
|
3487
3493
|
font-size: 13px;
|
|
3488
3494
|
margin-top: 3px;
|
|
3495
|
+
padding-left: 0px;
|
|
3496
|
+
padding-right: 0px;
|
|
3489
3497
|
}
|
|
3490
3498
|
.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
|
|
3491
3499
|
cursor: auto;
|
|
@@ -3900,6 +3908,9 @@
|
|
|
3900
3908
|
margin-left: 0;
|
|
3901
3909
|
margin-right: 10px;
|
|
3902
3910
|
}
|
|
3911
|
+
.e-pivotfieldlist-container .e-member-editor-dialog .e-member-editor-outer-container:not(.e-excelfilter) .e-editor-search-container {
|
|
3912
|
+
padding-top: 4px !important;
|
|
3913
|
+
}
|
|
3903
3914
|
.e-pivotfieldlist-container .e-adaptive-field-list-dialog ul:first-child {
|
|
3904
3915
|
min-height: 170px;
|
|
3905
3916
|
overflow: auto;
|
|
@@ -4415,14 +4426,14 @@
|
|
|
4415
4426
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog,
|
|
4416
4427
|
.e-bigger.e-pivotfieldlist .e-member-editor-dialog,
|
|
4417
4428
|
.e-bigger.e-pivotfieldlist .e-olap-editor-dialog {
|
|
4418
|
-
max-height:
|
|
4429
|
+
max-height: 440px !important;
|
|
4419
4430
|
min-width: 370px !important;
|
|
4420
4431
|
}
|
|
4421
4432
|
.e-bigger .e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div,
|
|
4422
4433
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div,
|
|
4423
4434
|
.e-bigger.e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div,
|
|
4424
4435
|
.e-bigger.e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div {
|
|
4425
|
-
min-height:
|
|
4436
|
+
min-height: 75px !important;
|
|
4426
4437
|
}
|
|
4427
4438
|
.e-bigger .e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div .e-list-parent .e-ul,
|
|
4428
4439
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div .e-list-parent .e-ul,
|
package/styles/bootstrap.css
CHANGED
|
@@ -895,6 +895,7 @@
|
|
|
895
895
|
}
|
|
896
896
|
.e-pivotview .e-valuescontent {
|
|
897
897
|
padding-right: 8px;
|
|
898
|
+
text-align: right;
|
|
898
899
|
}
|
|
899
900
|
.e-pivotview .e-grid .e-rowcell {
|
|
900
901
|
/* stylelint-disable */
|
|
@@ -934,7 +935,7 @@
|
|
|
934
935
|
}
|
|
935
936
|
.e-pivotview .e-member-editor-dialog,
|
|
936
937
|
.e-pivotview .e-olap-editor-dialog {
|
|
937
|
-
min-height:
|
|
938
|
+
min-height: 350px !important;
|
|
938
939
|
min-width: 350px !important;
|
|
939
940
|
visibility: hidden;
|
|
940
941
|
}
|
|
@@ -1581,7 +1582,7 @@
|
|
|
1581
1582
|
.e-pivotview .e-expand,
|
|
1582
1583
|
.e-pivotview .e-collapse {
|
|
1583
1584
|
cursor: pointer;
|
|
1584
|
-
display: inline;
|
|
1585
|
+
display: inline-block;
|
|
1585
1586
|
height: 18px;
|
|
1586
1587
|
margin-top: 5px;
|
|
1587
1588
|
text-align: center;
|
|
@@ -1931,6 +1932,9 @@
|
|
|
1931
1932
|
margin-left: 0;
|
|
1932
1933
|
margin-right: 7px;
|
|
1933
1934
|
}
|
|
1935
|
+
.e-pivotview.e-rtl .e-valuescontent {
|
|
1936
|
+
text-align: left;
|
|
1937
|
+
}
|
|
1934
1938
|
.e-pivotview.e-rtl .e-group-values,
|
|
1935
1939
|
.e-pivotview.e-rtl .e-group-columns,
|
|
1936
1940
|
.e-pivotview.e-rtl .e-group-filters,
|
|
@@ -2051,6 +2055,7 @@
|
|
|
2051
2055
|
.e-pivottooltip {
|
|
2052
2056
|
border-radius: 4px;
|
|
2053
2057
|
padding: 3px 2px;
|
|
2058
|
+
text-align: initial;
|
|
2054
2059
|
}
|
|
2055
2060
|
|
|
2056
2061
|
.e-pivottooltip p {
|
|
@@ -3460,6 +3465,7 @@
|
|
|
3460
3465
|
display: inline-table;
|
|
3461
3466
|
height: 100%;
|
|
3462
3467
|
width: 100%;
|
|
3468
|
+
min-width: 265px;
|
|
3463
3469
|
}
|
|
3464
3470
|
.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-fullrow {
|
|
3465
3471
|
cursor: move;
|
|
@@ -3483,6 +3489,8 @@
|
|
|
3483
3489
|
cursor: pointer;
|
|
3484
3490
|
font-size: 13px;
|
|
3485
3491
|
margin-top: 3px;
|
|
3492
|
+
padding-left: 0px;
|
|
3493
|
+
padding-right: 0px;
|
|
3486
3494
|
}
|
|
3487
3495
|
.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
|
|
3488
3496
|
cursor: auto;
|
|
@@ -3897,6 +3905,9 @@
|
|
|
3897
3905
|
margin-left: 0;
|
|
3898
3906
|
margin-right: 10px;
|
|
3899
3907
|
}
|
|
3908
|
+
.e-pivotfieldlist-container .e-member-editor-dialog .e-member-editor-outer-container:not(.e-excelfilter) .e-editor-search-container {
|
|
3909
|
+
padding-top: 4px !important;
|
|
3910
|
+
}
|
|
3900
3911
|
.e-pivotfieldlist-container .e-adaptive-field-list-dialog ul:first-child {
|
|
3901
3912
|
min-height: 170px;
|
|
3902
3913
|
overflow: auto;
|
|
@@ -4262,7 +4273,7 @@
|
|
|
4262
4273
|
.e-bigger .e-pivotfieldlist-container .e-member-editor-dialog .e-value-filter,
|
|
4263
4274
|
.e-bigger.e-pivotfieldlist-container .e-member-editor-dialog .e-label-filter,
|
|
4264
4275
|
.e-bigger.e-pivotfieldlist-container .e-member-editor-dialog .e-value-filter {
|
|
4265
|
-
height:
|
|
4276
|
+
height: 204px;
|
|
4266
4277
|
}
|
|
4267
4278
|
.e-bigger .e-pivotfieldlist-container .e-member-editor-dialog .e-label-filter .e-filter-text-div,
|
|
4268
4279
|
.e-bigger .e-pivotfieldlist-container .e-member-editor-dialog .e-value-filter .e-filter-text-div,
|
|
@@ -4412,14 +4423,14 @@
|
|
|
4412
4423
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog,
|
|
4413
4424
|
.e-bigger.e-pivotfieldlist .e-member-editor-dialog,
|
|
4414
4425
|
.e-bigger.e-pivotfieldlist .e-olap-editor-dialog {
|
|
4415
|
-
max-height:
|
|
4426
|
+
max-height: 440px !important;
|
|
4416
4427
|
min-width: 370px !important;
|
|
4417
4428
|
}
|
|
4418
4429
|
.e-bigger .e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div,
|
|
4419
4430
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div,
|
|
4420
4431
|
.e-bigger.e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div,
|
|
4421
4432
|
.e-bigger.e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div {
|
|
4422
|
-
min-height:
|
|
4433
|
+
min-height: 75px !important;
|
|
4423
4434
|
}
|
|
4424
4435
|
.e-bigger .e-pivotfieldlist .e-member-editor-dialog .e-member-editor-container-outer-div .e-list-parent .e-ul,
|
|
4425
4436
|
.e-bigger .e-pivotfieldlist .e-olap-editor-dialog .e-member-editor-container-outer-div .e-list-parent .e-ul,
|