### Install WebDataRocks for Vue.js
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Install the necessary packages for WebDataRocks Vue.js integration using npm.
```bash
npm install @webdatarocks/webdatarocks @webdatarocks/vue-webdatarocks
```
--------------------------------
### Configure Pivot Table Options with Custom CSS Theme
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Initialize WebDataRocks with specific report and global options, including grid configurations like showing headers and totals. This example demonstrates applying a dark theme via CSS link in the head.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
global: {
options: {
grid: {
showHeaders: true,
showTotals: "on",
showGrandTotals: "on"
}
}
},
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
options: {
grid: {
type: "compact",
showTotals: "on",
showGrandTotals: "on"
}
}
}
});
```
--------------------------------
### Integrate WebDataRocks with Angular
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Install the Angular-specific package and configure the module and component to use the pivot table.
```bash
npm install @webdatarocks/webdatarocks @webdatarocks/ngx-webdatarocks
```
```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WebdatarocksModule } from '@webdatarocks/ngx-webdatarocks';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, WebdatarocksModule],
bootstrap: [AppComponent]
})
export class AppModule {}
```
```typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
report = {
dataSource: {
data: [
{ Category: 'Electronics', Product: 'Phone', Sales: 15000 },
{ Category: 'Electronics', Product: 'Laptop', Sales: 25000 }
]
},
slice: {
rows: [{ uniqueName: 'Category' }],
columns: [{ uniqueName: 'Product' }],
measures: [{ uniqueName: 'Sales', aggregation: 'sum' }]
}
};
}
```
--------------------------------
### Integrate WebDataRocks with React
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Install the required NPM packages and use the Pivot component wrapper within a React application.
```bash
npm install @webdatarocks/webdatarocks @webdatarocks/react-webdatarocks
```
```jsx
import React from 'react';
import * as WebDataRocksReact from '@webdatarocks/react-webdatarocks';
import '@webdatarocks/webdatarocks/webdatarocks.css';
function App() {
const report = {
dataSource: {
data: [
{ "Category": "Electronics", "Product": "Phone", "Sales": 15000 },
{ "Category": "Electronics", "Product": "Laptop", "Sales": 25000 },
{ "Category": "Clothing", "Product": "Shirt", "Sales": 5000 }
]
},
slice: {
rows: [{ uniqueName: "Category" }],
columns: [{ uniqueName: "Product" }],
measures: [{ uniqueName: "Sales", aggregation: "sum" }]
}
};
return (
);
}
export default App;
```
--------------------------------
### Initialize WebDataRocks Pivot Table
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Embeds the pivot table component into a web page using a container element and a CSV data source.
```html
WebDataRocks Pivot Table
```
--------------------------------
### Apply Number Formatting
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Sets custom display formats for measures, including currency and percentage styles.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
formats: [
{
name: "currency",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
currencySymbolAlign: "left",
nullValue: "-"
},
{
name: "percentage",
decimalPlaces: 1,
percentSign: "%"
}
],
slice: {
rows: [{ uniqueName: "Category" }],
measures: [
{ uniqueName: "Revenue", aggregation: "sum", format: "currency" },
{ uniqueName: "Growth", aggregation: "average", format: "percentage" }
]
}
}
});
```
--------------------------------
### Configure Slice with Aggregations
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Defines complex slice structures including multiple rows, columns, and various aggregation functions.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
slice: {
rows: [
{ uniqueName: "Country" },
{ uniqueName: "City" }
],
columns: [
{ uniqueName: "Business Type" },
{ uniqueName: "Measures" }
],
measures: [
{ uniqueName: "Price", aggregation: "sum" },
{ uniqueName: "Quantity", aggregation: "average" },
{ uniqueName: "Discount", aggregation: "max" }
],
reportFilters: [
{ uniqueName: "Year" }
]
}
}
});
```
--------------------------------
### Apply Custom CSS Theme to Pivot Table
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Include WebDataRocks CSS files in the HTML head to apply default or custom themes. The dark theme is applied by linking its CSS file.
```html
```
--------------------------------
### Apply Conditional Formatting in WebDataRocks
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Define formatting rules within the report configuration to highlight cells based on specific value conditions.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
conditions: [
{
formula: "#value > 10000",
measure: "Price",
format: {
backgroundColor: "#00FF00",
color: "#000000",
fontFamily: "Arial",
fontSize: "14px"
}
},
{
formula: "#value < 1000",
measure: "Price",
format: {
backgroundColor: "#FF0000",
color: "#FFFFFF"
}
}
],
slice: {
rows: [{ uniqueName: "Country" }],
measures: [{ uniqueName: "Price", aggregation: "sum" }]
}
}
});
```
--------------------------------
### Load CSV Data
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Loads data from a remote CSV file URL and defines the initial slice configuration.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
slice: {
rows: [{ uniqueName: "Country" }],
columns: [{ uniqueName: "Business Type" }],
measures: [{ uniqueName: "Price", aggregation: "sum" }]
}
}
});
```
--------------------------------
### Handle Pivot Table Events
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Subscribe to various pivot table events such as `reportcomplete`, `cellclick`, `datachanged`, and `dataerror` to respond to user interactions and data status changes.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
},
reportcomplete: function() {
console.log("Report loaded and ready");
},
cellclick: function(cell) {
console.log("Cell clicked:", cell);
console.log("Value:", cell.value);
console.log("Row:", cell.rows);
console.log("Column:", cell.columns);
},
datachanged: function(data) {
console.log("Data changed:", data);
},
dataerror: function(error) {
console.error("Data loading error:", error);
}
});
```
--------------------------------
### Load JSON Data
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Configures the pivot table to use an inline JSON array as the data source.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
data: [
{ "Category": "Electronics", "Product": "Phone", "Revenue": 15000, "Quantity": 50 },
{ "Category": "Electronics", "Product": "Laptop", "Revenue": 25000, "Quantity": 30 },
{ "Category": "Clothing", "Product": "Shirt", "Revenue": 5000, "Quantity": 200 },
{ "Category": "Clothing", "Product": "Pants", "Revenue": 8000, "Quantity": 150 }
]
},
slice: {
rows: [{ uniqueName: "Category" }],
columns: [{ uniqueName: "Product" }],
measures: [{ uniqueName: "Revenue", aggregation: "sum" }]
}
}
});
```
--------------------------------
### Export Pivot Table Report to File
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Export the pivot table report to Excel, PDF, or HTML formats. The export is triggered within the `reportcomplete` event handler.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
},
reportcomplete: function() {
// Export to Excel
pivot.exportTo("excel", {
filename: "report",
destinationType: "file"
});
// Export to PDF
pivot.exportTo("pdf", {
filename: "report",
destinationType: "file"
});
// Export to HTML
pivot.exportTo("html", {
filename: "report",
destinationType: "file"
});
}
});
```
--------------------------------
### Add Calculated Measures to Pivot Table
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Create custom measures by defining formulas that reference existing data fields within the report slice.
```javascript
var pivot = new WebDataRocks({
container: "#wdr-component",
report: {
dataSource: {
data: [
{ "Product": "A", "Revenue": 10000, "Cost": 6000 },
{ "Product": "B", "Revenue": 15000, "Cost": 9000 },
{ "Product": "C", "Revenue": 8000, "Cost": 5000 }
]
},
slice: {
rows: [{ uniqueName: "Product" }],
measures: [
{ uniqueName: "Revenue", aggregation: "sum" },
{ uniqueName: "Cost", aggregation: "sum" },
{
uniqueName: "Profit",
formula: "sum('Revenue') - sum('Cost')",
caption: "Profit"
},
{
uniqueName: "Margin",
formula: "(sum('Revenue') - sum('Cost')) / sum('Revenue') * 100",
caption: "Margin %"
}
]
}
}
});
```
--------------------------------
### Embed WebDataRocks Pivot Table in Vue.js
Source: https://context7.com/webdatarocks/web-pivot-table/llms.txt
Embed the WebDataRocks pivot table component in a Vue.js application. Ensure the component and its CSS are imported.
```vue
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.