diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx
index b772eea9c..f6356023d 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx
@@ -24,7 +24,7 @@ function App() {
{ "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
{ "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
{ "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
- { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
+ { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }
];
// maps the appropriate column to fields property
const fields = { text: 'Name', value: 'EmpID' };
diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css
index 64e7fb848..27d6dedcf 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css
@@ -1,3 +1,4 @@
+
/* Represents the styles for loader */
#loader {
color: #008cff;
diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html
index 8a8855929..942b8616e 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html
@@ -15,6 +15,11 @@
+
diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx
index ea746e58a..d2c570ff2 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx
@@ -33,7 +33,7 @@ function App() {
return (
// specifies the tag for render the MultiColumn ComboBox component
-
+
diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx
index ea746e58a..d2c570ff2 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx
@@ -33,7 +33,7 @@ function App() {
return (
// specifies the tag for render the MultiColumn ComboBox component
-
+
diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css b/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css
index a0d4bfcdf..496983c00 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css
+++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css
@@ -7,3 +7,28 @@
top: 45%;
width: 30%;
}
+
+.multicolumn-customize .ename {
+ opacity: .87;
+ font-size: 16px;
+ margin-top: 8px;
+}
+
+.multicolumn-customize .country {
+ opacity: .87;
+ font-size: 16px;
+}
+
+.multicolumn-customize .job {
+ opacity: .54;
+ font-size: 14px;
+ margin-top: 15px;
+ margin-bottom: 7px;
+}
+
+.multicolumn-customize .empImage {
+ margin: 6px 16px;
+ float: left;
+ width: 50px;
+ height: 50px;
+}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx
index eda13eb4e..d06f619e2 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
function App() {
// defined the array of object data
- const empData: { [key: string]: Object }[] = [
+ const empData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
@@ -27,9 +27,9 @@ function App() {
{ "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];
// maps the appropriate column to fields property
- const fields: Object = { text: 'Name', value: 'EmpID' };
+ const fields = { text: 'Name', value: 'EmpID' };
// set text to multicolumn ComboBox input element
- const text: string = 'Michael';
+ const text = 'Michael';
return (
// specifies the tag for render the MultiColumn ComboBox component
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css
index 8c3fa1a37..47e85c66a 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css
@@ -8,7 +8,7 @@
width: 30%;
}
-.e-input-group.e-custom-multi-column {
+span.e-control-wrapper.e-custom-multi-column {
color: #ab3243;
background: #32a5ab;
}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html
index 8a8855929..8d3bb2c05 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html
@@ -15,6 +15,12 @@
+
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx
index ed2679479..25d4c2f85 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
function App() {
// defined the array of object data
- const empData: { [key: string]: Object }[] = [
+ const empData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
@@ -27,9 +27,9 @@ function App() {
{ "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];
// maps the appropriate column to fields property
- const fields: Object = { text: 'Name', value: 'EmpID' };
+ const fields = { text: 'Name', value: 'EmpID' };
// set text to multicolumn ComboBox input element
- const text: string = 'Michael';
+ const text = 'Michael';
return (
// specifies the tag for render the MultiColumn ComboBox component
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx
index f96d17af5..91a7207c3 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
function App() {
// defined the array of object data
- const empData: { [key: string]: Object }[] = [
+ const empData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
@@ -27,9 +27,9 @@ function App() {
{ "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];
// maps the appropriate column to fields property
- const fields: Object = { text: 'Name', value: 'EmpID' };
+ const fields = { text: 'Name', value: 'EmpID' };
// set text to multicolumn ComboBox input element
- const text: string = 'Michael';
+ const text = 'Michael';
return (
// specifies the tag for render the MultiColumn ComboBox component
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx
index d7b57e61a..e9cc9e09a 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
function App() {
// defined the array of object data
- const empData: { [key: string]: Object }[] = [
+ const empData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
@@ -27,9 +27,9 @@ function App() {
{ "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];
// maps the appropriate column to fields property
- const fields: Object = { text: 'Name', value: 'EmpID' };
+ const fields = { text: 'Name', value: 'EmpID' };
// set text to multicolumn ComboBox input element
- const text: string = 'Michael';
+ const text = 'Michael';
return (
// specifies the tag for render the MultiColumn ComboBox component
diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx
index 29c61ff8b..497babc06 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
function App() {
// defined the array of object data
- const empData: { [key: string]: Object }[] = [
+ const empData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
@@ -27,9 +27,9 @@ function App() {
{ "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];
// maps the appropriate column to fields property
- const fields: Object = { text: 'Name', value: 'EmpID' };
+ const fields = { text: 'Name', value: 'EmpID' };
// set text to multicolumn ComboBox input element
- const text: string = 'Michael';
+ const text = 'Michael';
return (
// specifies the tag for render the MultiColumn ComboBox component
diff --git a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx
index c036e8577..a7d1e97de 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx
@@ -1,4 +1,4 @@
-import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
+import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective, SortOrder } from '@syncfusion/ej2-react-multicolumn-combobox';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
diff --git a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx
index 1e1a3b9a4..699321c0d 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx
@@ -1,6 +1,4 @@
-
-
-import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
+import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective, SortOrder} from '@syncfusion/ej2-react-multicolumn-combobox';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -48,5 +46,3 @@ function App() {
);
}
ReactDOM.render(, document.getElementById('multicolumn'));
-
-
diff --git a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css
index 009af4861..a14f8bd62 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css
+++ b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css
@@ -6,4 +6,9 @@
position: absolute;
top: 45%;
width: 30%;
+}
+
+.name, .emp-id, .city {
+ border-bottom: 1px solid #e0e0e0;
+ padding: 6px 6px 4px 20px;
}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html
index 8a8855929..67193b14c 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html
+++ b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html
@@ -15,6 +15,12 @@
+
diff --git a/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx
index 780ad6f2b..785acf203 100644
--- a/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx
+++ b/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx
@@ -1,4 +1,5 @@
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.css b/ej2-react/code-snippet/pivot-table/react-preview/app/App.css
new file mode 100644
index 000000000..98c5fa9ca
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.css
@@ -0,0 +1,12 @@
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-calendars/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-dropdowns/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-grids/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-charts/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-inputs/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-popups/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-splitbuttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-pivotview/styles/material.css');
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx b/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx
new file mode 100644
index 000000000..da7b138c1
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
+import { pivotData } from './datasource';
+import './App.css';
+
+function App() {
+ const dataSourceSettings = {
+ columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
+ dataSource: pivotData,
+ expandAll: false,
+ filters: [],
+ drilledMembers: [{ name: 'Country', items: ['France'] }],
+ formatSettings: [{ name: 'Amount', format: 'C0' }],
+ rows: [{ name: 'Country' }, { name: 'State' }],
+ values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
+ };
+ let pivotObj;
+ return ( pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>
+ );
+};
+
+export default App;
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx
new file mode 100644
index 000000000..f8f58dc9f
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
+import { pivotData } from './datasource';
+import './App.css';
+
+function App() {
+ const dataSourceSettings: IDataOptions = {
+ columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
+ dataSource: pivotData as IDataSet[],
+ expandAll: false,
+ filters: [],
+ drilledMembers: [{ name: 'Country', items: ['France'] }],
+ formatSettings: [{ name: 'Amount', format: 'C0' }],
+ rows: [{ name: 'Country' }, { name: 'State' }],
+ values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
+ };
+ let pivotObj: PivotViewComponent;
+ return (
+ pivotObj = d } height={350} dataSourceSettings={dataSourceSettings}>
+ );
+};
+
+export default App;
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx
new file mode 100644
index 000000000..45396c60d
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx
@@ -0,0 +1,17 @@
+export let pivotData = [
+ { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" },
+ { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" },
+ { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" },
+ { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" },
+ { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" },
+ { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" },
+ { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" },
+ { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" },
+ { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" },
+ { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" },
+ { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" },
+ { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" },
+ { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" },
+ { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" },
+ { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" },
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx
new file mode 100644
index 000000000..35f2ed7fe
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx
@@ -0,0 +1,17 @@
+export let pivotData: { [key: string]: Object }[] = [
+ { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" },
+ { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" },
+ { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" },
+ { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" },
+ { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" },
+ { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" },
+ { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" },
+ { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" },
+ { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" },
+ { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" },
+ { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" },
+ { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" },
+ { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" },
+ { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" },
+ { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" },
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx
new file mode 100644
index 000000000..0fe17b0dc
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+ document.getElementById('root') as HTMLElement
+);
+
+root.render(
+
+
+
+);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/index.css b/ej2-react/code-snippet/pivot-table/react-preview/index.css
new file mode 100644
index 000000000..536bcca4d
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/index.css
@@ -0,0 +1,81 @@
+#PivotViewFieldList {
+ width: 58%;
+ height: 100%;
+ float: left;
+}
+
+.e-pivotfieldlist {
+ width: 42%;
+ height: 100%;
+ float: right;
+}
+
+/* csslint ignore:start */
+
+.e-pivotfieldlist .e-static {
+ width: 100% !important;
+}
+
+/* csslint ignore:end */
+
+.e-custom-class {
+ color: #008cff;
+ text-decoration: underline;
+}
+
+.e-custom-class:hover {
+ color: red;
+ text-decoration: none;
+}
+
+.e-pivotview .e-columnsheader .tempwrap {
+ display: none;
+}
+.e-pivotview .e-rowsheader .tempwrap {
+ display: none;
+}
+
+/* csslint ignore:start */
+@font-face {
+ font-family: 'e-pivot';
+ src:
+ url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjhUSmAAAAEoAAAAVmNtYXCs3q0zAAABkAAAAEpnbHlmdaItOwAAAegAAAE0aGVhZBRYEz0AAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDAAHIAAAHcAAAACm1heHABDwBBAAABCAAAACBuYW1lc0cOBgAAAxwAAAIlcG9zdK9TctUAAAVEAAAARwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAT8kba18PPPUACwPoAAAAANin5zgAAAAA2KfnOAAAAAAD6gPoAAAACAACAAAAAAAAAAEAAAAEADUAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4jToTQNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQANgAAAAgACAACAADiNOI56E3//wAA4jTiOehN//8AAAAAAAAAAQAIAAgACAAAAAEAAwACAAAAAAAAACYAcgCaAAAAAQAAAAADTAPoABUAAAkBBhY7AREUFjsBMjY1ETMyNicBJiIB3f7KCw4SxxAMqgwQxhIPC/7FCBgD3/6tDyH9wAwQEAwCQCEPAVMJAAEAAAAAA+oDTAA0AAABMx8BAR8DDwMBDwMjLwwhLwE1NzUnPwEhPwQ1PwQCXgIFCQFxBAIEAgEDBAf+ogYKBQUEAwQDAwICAQIBAQYJCf3mAgEDAgEBAh4KCAQCAQICAgIDA0wBBf7VAwQJCQkJCQf+4QQGAgEBAQIDBAQFC50DBAQDAQICCuANAgECBQIDAqcMBQQDAQAAAQAAAAADTAPoABYAAAEGFREjIgYXARYyNwE2JisBETQmKwEiAYsIxhIPDAE5CRgJATUMDhPGEAyqDAPgCAz9wCEP/q0JCQFTDyECQAwQAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQADVXAxC2Fycm93LXJpZ2h0CURvd25fU29ydAAAAA==) format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.pv-icons {
+ font-family: 'e-pivot';
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ text-transform: none;
+ line-height: 1;
+}
+
+.sb-icon-profit::before {
+ content: '\e234';
+ padding-left: 30px;
+ margin: auto !important;
+ color: #219122;
+ size: 20px;
+}
+
+.sb-icon-neutral::before {
+ content: '\e84d';
+ padding-left: 30px;
+ margin: auto !important;
+ color: #82b5e9;
+}
+
+.sb-icon-loss::before {
+ content: '\e239';
+ padding-left: 30px;
+ margin: auto !important;
+ color: #ff2222;
+}
+
+/* csslint ignore:end */
+.e-tool-expand::before {
+ content: '\e702';
+}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/index.html b/ej2-react/code-snippet/pivot-table/react-preview/index.html
new file mode 100644
index 000000000..9b02f6ebe
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Syncfusion React Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js b/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js
new file mode 100644
index 000000000..964413a6d
--- /dev/null
+++ b/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js
@@ -0,0 +1,60 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "system",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-pivotview": "syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js",
+ "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-pivotview": "syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js",
+ "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
+ "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+ "css": "https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js"
+ },
+ meta: {
+ '*.json': { loader: 'plugin-json' },
+ 'typescript': {
+ "exports": "ts"
+ },
+ '*.css': { loader: 'css' }
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/ej2-react/pivotview/aggregation.md b/ej2-react/pivotview/aggregation.md
index c355b5a7b..0af9a7b5b 100644
--- a/ej2-react/pivotview/aggregation.md
+++ b/ej2-react/pivotview/aggregation.md
@@ -263,7 +263,3 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs8" %}
-
-## See Also
-
-* [Excel-like Computation Types in PivotGrid](https://www.syncfusion.com/blogs/post/excel-like-computation-types-in-pivotgrid1)
\ No newline at end of file
diff --git a/ej2-react/pivotview/data-binding.md b/ej2-react/pivotview/data-binding.md
index 8fd27b360..8dda52743 100644
--- a/ej2-react/pivotview/data-binding.md
+++ b/ej2-react/pivotview/data-binding.md
@@ -494,5 +494,3 @@ The event [`enginePopulating`](https://ej2.syncfusion.com/react/documentation/ap
* [Customize number, date, and time values](./how-to/customize-number-date-and-time-values)
* [Server Side Engine (Optional)](./server-side-pivot-engine)
* [How to customize null values in Pivot Table?](https://support.syncfusion.com/kb/article/14432/how-to-customize-null-values-in-pivot-table)
-* [Serializing & Deserializing Pivot Grid for WinForms](https://www.syncfusion.com/blogs/post/serializing-and-deserializing-the-pivot-grid-for-windows-forms)
-* [PivotGrid Supports OLAP & Relational Data Sources](https://www.syncfusion.com/blogs/post/pivotgrid-now-supports-both-olap-and-relational-data-sources-within-the-same-grid)
\ No newline at end of file