- Home
- Forum
- JavaScript - EJ 2
- Pivot table not rendering
Pivot table not rendering
Hi,
I am trying a few controls to see if we can work with it.
After copy-pasting the Pivot table example to a lit-element web-component, the table is not rendered.
I did the same with the Grid example, and that worked just fine.
What am i doing wrong here?
export class Pivot extends LitElement {
firstUpdated() {
this._instantiatePivot();
}
_instantiatePivot() {
const pivotObj = new PivotView({
dataSourceSettings: {
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' },
],
dataSource: this.getPivotData(),
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
filters: [],
},
width: '100%',
height: 290,
gridSettings: { columnWidth: 140 },
});
pivotObj.appendTo(this.shadowRoot.querySelector('#container'));
}
render() {
return html`
<div id="container" class="syncfusion-pivot-container"></div>
`;
}
getPivotData() {
const pivotData = [
{
Sold: 31,
Amount: 52824,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 51,
Amount: 86904,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 90,
Amount: 153360,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 25,
Amount: 42600,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 27,
Amount: 46008,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 49,
Amount: 83496,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 95,
Amount: 161880,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 67,
Amount: 114168,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 75,
Amount: 127800,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 67,
Amount: 114168,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 69,
Amount: 117576,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 90,
Amount: 153360,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 16,
Amount: 27264,
Country: 'France',
Products: 'Mountain Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 83,
Amount: 124422,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 57,
Amount: 85448,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 20,
Amount: 29985,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 93,
Amount: 139412,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 35,
Amount: 52470,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 28,
Amount: 41977,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 48,
Amount: 71957,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 36,
Amount: 53969,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 25,
Amount: 37480,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 69,
Amount: 103436,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 16,
Amount: 23989,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 28,
Amount: 41977,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 19,
Amount: 28486,
Country: 'France',
Products: 'Road Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 89,
Amount: 141999.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 91,
Amount: 145190.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 24,
Amount: 38292,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 75,
Amount: 119662.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 100,
Amount: 159550,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 30,
Amount: 47865,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 69,
Amount: 110089.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 25,
Amount: 39887.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 42,
Amount: 67011,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 94,
Amount: 149977,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 76,
Amount: 121258,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 52,
Amount: 82966,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 33,
Amount: 52651.5,
Country: 'France',
Products: 'Touring Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 16,
Amount: 23989,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 21,
Amount: 33505.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 74,
Amount: 126096,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 99,
Amount: 148406,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 31,
Amount: 49460.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 57,
Amount: 97128,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 41,
Amount: 61464,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 64,
Amount: 102112,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 85,
Amount: 144840,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 76,
Amount: 129504,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 33,
Amount: 56232,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 71,
Amount: 120984,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 81,
Amount: 138024,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 65,
Amount: 110760,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 39,
Amount: 66456,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 91,
Amount: 155064,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 16,
Amount: 27264,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 59,
Amount: 100536,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 36,
Amount: 61344,
Country: 'Germany',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 39,
Amount: 58466,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 47,
Amount: 70458,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 19,
Amount: 28486,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 34,
Amount: 50971,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 34,
Amount: 50971,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 26,
Amount: 38979,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 15,
Amount: 22490,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 83,
Amount: 124422,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 79,
Amount: 118426,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 14,
Amount: 20991,
Country: 'Germany',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 15,
Amount: 23932.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 47,
Amount: 74988.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 93,
Amount: 148381.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 13,
Amount: 20741.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 44,
Amount: 70202,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 59,
Amount: 94134.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 34,
Amount: 54247,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 48,
Amount: 76584,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 35,
Amount: 55842.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 71,
Amount: 113280.5,
Country: 'Germany',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 77,
Amount: 131208,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 92,
Amount: 156768,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 51,
Amount: 86904,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 91,
Amount: 155064,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 90,
Amount: 153360,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 56,
Amount: 95424,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 14,
Amount: 23856,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 95,
Amount: 161880,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 24,
Amount: 40896,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 39,
Amount: 66456,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 84,
Amount: 143136,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 40,
Amount: 68160,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 96,
Amount: 163584,
Country: 'United Kingdom',
Products: 'Mountain Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 24,
Amount: 35981,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 86,
Amount: 128919,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 31,
Amount: 46474,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 36,
Amount: 53969,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 40,
Amount: 59965,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 69,
Amount: 103436,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 95,
Amount: 142410,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 95,
Amount: 142410,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 30,
Amount: 44975,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 11,
Amount: 16494,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 97,
Amount: 145408,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 16,
Amount: 23989,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 40,
Amount: 59965,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 68,
Amount: 101937,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 11,
Amount: 16494,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 27,
Amount: 40478,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 45,
Amount: 67460,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 100,
Amount: 149905,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 70,
Amount: 104935,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 83,
Amount: 124422,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 100,
Amount: 149905,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 18,
Amount: 26987,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 70,
Amount: 104935,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 81,
Amount: 121424,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 20,
Amount: 29985,
Country: 'United Kingdom',
Products: 'Road Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 99,
Amount: 148406,
Country: 'United States',
Products: 'Road Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 43,
Amount: 73272,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 43,
Amount: 73272,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 52,
Amount: 88608,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 91,
Amount: 155064,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 37,
Amount: 63048,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 41,
Amount: 69864,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 49,
Amount: 83496,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 23,
Amount: 39192,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 67,
Amount: 114168,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 85,
Amount: 144840,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 25,
Amount: 42600,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 28,
Amount: 47712,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 53,
Amount: 90312,
Country: 'United States',
Products: 'Mountain Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 82,
Amount: 130831,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 41,
Amount: 65415.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q1',
},
{
Sold: 60,
Amount: 95730,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 71,
Amount: 113280.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q2',
},
{
Sold: 45,
Amount: 71797.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 21,
Amount: 33505.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q3',
},
{
Sold: 94,
Amount: 149977,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 34,
Amount: 54247,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2015',
Quarter: 'Q4',
},
{
Sold: 14,
Amount: 22337,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 76,
Amount: 121258,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q1',
},
{
Sold: 50,
Amount: 79775,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 75,
Amount: 119662.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q2',
},
{
Sold: 49,
Amount: 78179.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 40,
Amount: 63820,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q3',
},
{
Sold: 94,
Amount: 149977,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 17,
Amount: 27123.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2016',
Quarter: 'Q4',
},
{
Sold: 45,
Amount: 71797.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 56,
Amount: 89348,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q1',
},
{
Sold: 75,
Amount: 119662.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 11,
Amount: 17550.5,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q2',
},
{
Sold: 54,
Amount: 86157,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 14,
Amount: 22337,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q3',
},
{
Sold: 11,
Amount: 17550.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 76,
Amount: 121258,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2017',
Quarter: 'Q4',
},
{
Sold: 45,
Amount: 71797.5,
Country: 'United Kingdom',
Products: 'Touring Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
{
Sold: 80,
Amount: 127640,
Country: 'United States',
Products: 'Touring Bikes',
Year: 'FY 2018',
Quarter: 'Q1',
},
];
return pivotData;
}
}
SIGN IN To post a reply.
5 Replies
MM
Manikandan Murugesan
Syncfusion Team
July 8, 2021 12:54 PM UTC
Hi Jan,
We have checked the reported problem and we are unable to reproduce it at our end. So, we have prepared a sample for your reference below.
Also, based on the code example provided, it seems that you have used the typescript code standards in your react application. To run the react component, we recommend that you follow the react code standards. Moreover, we have prepared a sample with the pivot table using react component tags for your reference below.
If still the reported problem persists, please reproduce it in the provided sample and revert us (or) send your sample with reported problem reflected. This would help us to investigate the reported problem further and provide the solution at the earliest.
Regards,
Manikandan
JG
Jan Guichelaar
July 9, 2021 05:49 AM UTC
Hi Manikandan,
Thank you for your reply and the examples in stackblitz. I will try these examples in my own code base
One thing: We do NOT use React, but we use lit-element that compiles to webcomponents
Do you have any information on using synfusion components within webcomponents?
JG
Jan Guichelaar
July 12, 2021 05:39 AM UTC
Hi Manikandan,
I think we found why the pivot table is not working inside webcomponent.
In your code bae you are using `document.querySelector` or `document.selectElementById` to target dom elements. Webcomponents are based on encapsulation inside shadowDoms.
This is prob. why the PivotTable is not showing/rendered
Are you aware of this? Or do you have a solution we dont know about.
Regards
Jan
MM
Manikandan Murugesan
Syncfusion Team
July 12, 2021 03:00 PM UTC
Hi Jan,
We have validated the reported problem and considered this as a bug “Pivot table not rendered using LitElement”. Also, we have logged a defect report in our database now. The fix for this issue will be available in our Volume 2 SP1 release which is estimated to be rolled out in the mid of August 2021. You can track the same by using the following link.
Please let us know if you have any concerns.
Regards,
Manikandan
MM
Manikandan Murugesan
Syncfusion Team
August 12, 2021 10:20 AM UTC
Hi Jan,
We are glad to announce that our Essential Studio 2021 Volume 2 service pack Release v19.2.0.55 is rolled out and fix for the issue “Pivot table not rendered using LitElement” has been included in this release. Kindly refer to the following sample.
However, when using native Shadow DOM (Which is used by LitElement) results in component views being attached into their own shadow documents, so querying from within document will not be able to access the DOM elements. Currently we are using regular DOM APIs which are not available in Shadow DOM. For this we need to restructure our components completely [Replace regular DOM APIs with shadow DOM APIs]. We have logged this as a feature task, and it will be available in any one of our upcoming releases. You can track the same by using the following link.
Please let us know if you have any concerns.
Regards,
Manikandan.
SIGN IN To post a reply.
- 5 Replies
- 2 Participants
-
JG Jan Guichelaar
- Jul 7, 2021 09:19 AM UTC
- Aug 12, 2021 10:20 AM UTC
