Pivot Tables
This demo showcases the Jspreadsheet pivot table extension, transforming 200 rows of raw sales records into a compact cross-tabulated summary — right inside the spreadsheet. It features hierarchical row groupings (Region > Salesperson), column groupings by Product Category, SUM aggregation on Revenue and Units, numeric filtering, and collapsible row groups. With cross-worksheet data references and full formula support, Jspreadsheet delivers an Excel-like pivot table experience directly in the browser.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/pivot/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Material+Icons&display=swap" />
<style>
.jss_pivot_table.is-header { background-color: #8093B3 !important; }
.jss_pivot_table.is-highlighted-column { background-color: #DFE4EC !important; }
.jss_pivot_table.is-highlighted-row { background-color: #F4F6F8 !important; }
</style>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/pivot/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MGRkNzJiYzNhOTQyZWZmMGQ2MGZjNGIzMWQyODAxNzE1NjkxM2EzZDFlMTk0ZDgyMjk4Y2MwZmUwOGI0ZjNkYWIzNDg4MjllYjkyZjdjNWRiZmE0MzEyOGEwYzg5OThiODQ1ZWEyYjFmOTU3OTQzYmRhMjU4OWU1ZTRhZTY5YzcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeE56TTVPRGszTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
// Set the extensions
jspreadsheet.setExtensions({ formula, pivot, charts });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
toolbar: true,
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
style: [
'font-family: Inter, sans-serif; font-size: 13px; color: #1e293b;',
'background-color: #1e293b; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; text-align: center;',
'background-color: #f1f5f9; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #1e293b;',
],
worksheets: [
{
worksheetName: 'Pivot',
minDimensions: [14, 40],
filters: true,
columnSorting: true,
pivotTables: [
{
id: 'd13442b8-a1c8-4055-97f3-1455cd3f88a9',
anchor: 'A1',
source: 'Sales!A1:G201',
rows: [
{
columnIndex: 0,
sortBy: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
ascendingOrder: false,
collapsed: ['South'],
},
{
columnIndex: 1,
sortBy: 'name',
ascendingOrder: true,
},
],
columns: [
{
columnIndex: 2,
sortBy: 'name',
ascendingOrder: true,
},
],
cells: [
{
id: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
columnIndex: 5,
method: 'SUM',
},
{
id: 'b2c3d4e5-f6a7-4901-bcde-f12345678901',
columnIndex: 6,
method: 'SUM',
},
],
filters: [
{
columnIndex: 5,
validation: {
type: 'number',
criteria: '>=',
value: [500],
},
},
],
},
],
media: [
{
type: 'chart',
options: {
type: 'column',
range: 'Sales!A203:B207',
title: { text: 'Revenue by Region', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'A23',
width: 365,
height: 380,
left: 0,
top: 0,
},
{
type: 'chart',
options: {
type: 'doughnut',
range: 'Sales!D203:E207',
title: { text: 'Revenue by Category', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { position: 'bottom', display: true },
series: [
{ color: ['#5B7A9D', '#E07A5F', '#81B29A', '#F2CC8F'] },
],
},
cellAnchor: 'E23',
width: 365,
height: 380,
left: 10,
top: 0,
},
{
type: 'chart',
options: {
type: 'bar',
range: 'Sales!A209:B225',
title: { text: 'Revenue by Salesperson', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'I23',
width: 390,
height: 380,
left: 10,
top: 0,
},
],
},
{
worksheetName: 'Sales',
minDimensions: [8, 230],
data: [
['Region', 'Salesperson', 'Category', 'Product', 'Quarter', 'Revenue', 'Units'],
['East', 'Emma', 'Clothing', 'Pants', 'Q1 2025', 3500, 44],
['East', 'Emma', 'Clothing', 'Pants', 'Q2 2025', 3500, 38],
['East', 'Emma', 'Clothing', 'Shirt', 'Q2 2025', 1400, 48],
['East', 'Emma', 'Electronics', 'Laptop', 'Q3 2025', 4000, 29],
['East', 'Emma', 'Electronics', 'Smartphone', 'Q2 2025', 2000, 22],
['East', 'Emma', 'Electronics', 'Tablet', 'Q1 2025', 6500, 26],
['East', 'Emma', 'Electronics', 'Tablet', 'Q2 2025', 5900, 17],
['East', 'Emma', 'Electronics', 'Tablet', 'Q3 2025', 2000, 7],
['East', 'Emma', 'Furniture', 'Chair', 'Q1 2025', 5600, 10],
['East', 'Emma', 'Furniture', 'Sofa', 'Q1 2025', 5000, 15],
['East', 'Emma', 'Furniture', 'Table', 'Q2 2025', 4100, 15],
['East', 'Emma', 'Sports', 'Ball', 'Q2 2025', 2000, 30],
['East', 'Emma', 'Sports', 'Bike', 'Q1 2025', 800, 16],
['East', 'Emma', 'Sports', 'Bike', 'Q4 2025', 3300, 23],
['East', 'Emma', 'Sports', 'Racket', 'Q1 2025', 1400, 40],
['East', 'Emma', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['East', 'Frank', 'Clothing', 'Pants', 'Q1 2025', 1800, 21],
['East', 'Frank', 'Electronics', 'Tablet', 'Q1 2025', 4700, 15],
['East', 'Frank', 'Electronics', 'Tablet', 'Q3 2025', 2000, 15],
['East', 'Frank', 'Furniture', 'Chair', 'Q3 2025', 2200, 6],
['East', 'Frank', 'Furniture', 'Sofa', 'Q3 2025', 4100, 8],
['East', 'Frank', 'Sports', 'Ball', 'Q1 2025', 1800, 9],
['East', 'Frank', 'Sports', 'Bike', 'Q3 2025', 1400, 38],
['East', 'Frank', 'Sports', 'Racket', 'Q1 2025', 1800, 38],
['East', 'Ivy', 'Clothing', 'Jacket', 'Q3 2025', 1400, 48],
['East', 'Ivy', 'Clothing', 'Pants', 'Q4 2025', 3000, 29],
['East', 'Ivy', 'Electronics', 'Smartphone', 'Q2 2025', 2500, 28],
['East', 'Ivy', 'Electronics', 'Tablet', 'Q2 2025', 5900, 16],
['East', 'Ivy', 'Furniture', 'Chair', 'Q1 2025', 3200, 13],
['East', 'Ivy', 'Furniture', 'Table', 'Q2 2025', 5600, 1],
['East', 'Ivy', 'Sports', 'Bike', 'Q1 2025', 800, 10],
['East', 'Ivy', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['East', 'Ivy', 'Sports', 'Racket', 'Q3 2025', 2800, 29],
['East', 'Jack', 'Clothing', 'Jacket', 'Q1 2025', 3000, 38],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q2 2025', 5900, 16],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q3 2025', 6500, 22],
['East', 'Jack', 'Electronics', 'Tablet', 'Q1 2025', 4700, 21],
['East', 'Jack', 'Furniture', 'Chair', 'Q2 2025', 7500, 14],
['East', 'Jack', 'Furniture', 'Chair', 'Q3 2025', 7500, 18],
['East', 'Jack', 'Furniture', 'Sofa', 'Q4 2025', 4100, 8],
['East', 'Jack', 'Furniture', 'Table', 'Q2 2025', 3200, 7],
['East', 'Jack', 'Sports', 'Ball', 'Q3 2025', 3300, 38],
['East', 'Jack', 'Sports', 'Ball', 'Q4 2025', 1400, 26],
['East', 'Jack', 'Sports', 'Bike', 'Q1 2025', 2800, 25],
['East', 'Jack', 'Sports', 'Racket', 'Q1 2025', 2300, 39],
['East', 'Jack', 'Sports', 'Racket', 'Q2 2025', 2800, 29],
['North', 'Alice', 'Clothing', 'Jacket', 'Q1 2025', 1100, 39],
['North', 'Alice', 'Electronics', 'Laptop', 'Q2 2025', 9000, 12],
['North', 'Alice', 'Electronics', 'Smartphone', 'Q3 2025', 5900, 19],
['North', 'Alice', 'Electronics', 'Tablet', 'Q1 2025', 2500, 28],
['North', 'Alice', 'Furniture', 'Chair', 'Q2 2025', 5600, 2],
['North', 'Alice', 'Furniture', 'Table', 'Q4 2025', 3200, 15],
['North', 'Alice', 'Sports', 'Ball', 'Q2 2025', 1400, 39],
['North', 'Alice', 'Sports', 'Bike', 'Q2 2025', 800, 13],
['North', 'Alice', 'Sports', 'Bike', 'Q4 2025', 3300, 25],
['North', 'Bob', 'Clothing', 'Jacket', 'Q3 2025', 3200, 21],
['North', 'Bob', 'Clothing', 'Pants', 'Q1 2025', 2500, 25],
['North', 'Bob', 'Electronics', 'Smartphone', 'Q4 2025', 3500, 18],
['North', 'Bob', 'Electronics', 'Tablet', 'Q4 2025', 8700, 14],
['North', 'Bob', 'Furniture', 'Chair', 'Q1 2025', 7500, 2],
['North', 'Bob', 'Furniture', 'Table', 'Q1 2025', 2900, 3],
['North', 'Bob', 'Sports', 'Racket', 'Q1 2025', 3300, 30],
['North', 'Kevin', 'Clothing', 'Jacket', 'Q1 2025', 1100, 66],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q2 2025', 1400, 40],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q3 2025', 3000, 22],
['North', 'Kevin', 'Electronics', 'Laptop', 'Q3 2025', 5200, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q1 2025', 12800, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q2 2025', 10700, 20],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 29],
['North', 'Kevin', 'Furniture', 'Chair', 'Q1 2025', 2900, 3],
['North', 'Kevin', 'Furniture', 'Table', 'Q1 2025', 5600, 9],
['North', 'Kevin', 'Furniture', 'Table', 'Q2 2025', 5000, 1],
['North', 'Kevin', 'Sports', 'Ball', 'Q2 2025', 1400, 34],
['North', 'Kevin', 'Sports', 'Ball', 'Q4 2025', 800, 28],
['North', 'Kevin', 'Sports', 'Bike', 'Q4 2025', 2000, 25],
['North', 'Kevin', 'Sports', 'Racket', 'Q1 2025', 2000, 27],
['North', 'Kevin', 'Sports', 'Racket', 'Q2 2025', 1800, 27],
['North', 'Laura', 'Clothing', 'Jacket', 'Q3 2025', 3500, 44],
['North', 'Laura', 'Clothing', 'Pants', 'Q3 2025', 1800, 75],
['North', 'Laura', 'Clothing', 'Shirt', 'Q2 2025', 4000, 57],
['North', 'Laura', 'Electronics', 'Smartphone', 'Q1 2025', 4000, 26],
['North', 'Laura', 'Furniture', 'Chair', 'Q1 2025', 5600, 13],
['North', 'Laura', 'Furniture', 'Table', 'Q1 2025', 2900, 9],
['North', 'Laura', 'Furniture', 'Table', 'Q2 2025', 2900, 2],
['North', 'Laura', 'Sports', 'Ball', 'Q4 2025', 4600, 29],
['North', 'Laura', 'Sports', 'Bike', 'Q1 2025', 4200, 20],
['North', 'Laura', 'Sports', 'Bike', 'Q4 2025', 3300, 36],
['North', 'Laura', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['South', 'Carol', 'Clothing', 'Jacket', 'Q3 2025', 3500, 11],
['South', 'Carol', 'Clothing', 'Jacket', 'Q4 2025', 3200, 66],
['South', 'Carol', 'Clothing', 'Pants', 'Q4 2025', 3000, 24],
['South', 'Carol', 'Clothing', 'Shirt', 'Q4 2025', 3000, 68],
['South', 'Carol', 'Electronics', 'Laptop', 'Q2 2025', 6500, 15],
['South', 'Carol', 'Electronics', 'Tablet', 'Q1 2025', 10700, 14],
['South', 'Carol', 'Furniture', 'Chair', 'Q4 2025', 2200, 17],
['South', 'Carol', 'Furniture', 'Sofa', 'Q2 2025', 3200, 12],
['South', 'Carol', 'Furniture', 'Sofa', 'Q4 2025', 4100, 1],
['South', 'Carol', 'Furniture', 'Table', 'Q3 2025', 4100, 2],
['South', 'Carol', 'Furniture', 'Table', 'Q4 2025', 2900, 6],
['South', 'Carol', 'Sports', 'Ball', 'Q4 2025', 800, 13],
['South', 'Carol', 'Sports', 'Bike', 'Q2 2025', 2800, 11],
['South', 'Carol', 'Sports', 'Racket', 'Q1 2025', 4600, 24],
['South', 'David', 'Clothing', 'Jacket', 'Q1 2025', 2500, 34],
['South', 'David', 'Clothing', 'Jacket', 'Q3 2025', 2200, 80],
['South', 'David', 'Clothing', 'Jacket', 'Q4 2025', 2200, 35],
['South', 'David', 'Clothing', 'Pants', 'Q2 2025', 4000, 58],
['South', 'David', 'Clothing', 'Pants', 'Q3 2025', 1800, 69],
['South', 'David', 'Clothing', 'Pants', 'Q4 2025', 2500, 52],
['South', 'David', 'Clothing', 'Shirt', 'Q1 2025', 3500, 79],
['South', 'David', 'Electronics', 'Tablet', 'Q1 2025', 5200, 24],
['South', 'David', 'Electronics', 'Tablet', 'Q4 2025', 3000, 11],
['South', 'David', 'Furniture', 'Chair', 'Q1 2025', 5000, 4],
['South', 'David', 'Furniture', 'Chair', 'Q2 2025', 7500, 6],
['South', 'David', 'Furniture', 'Sofa', 'Q2 2025', 6200, 2],
['South', 'David', 'Furniture', 'Table', 'Q4 2025', 4100, 3],
['South', 'David', 'Sports', 'Bike', 'Q1 2025', 3300, 28],
['South', 'David', 'Sports', 'Bike', 'Q4 2025', 1200, 23],
['South', 'David', 'Sports', 'Racket', 'Q4 2025', 1800, 26],
['South', 'Mia', 'Clothing', 'Jacket', 'Q2 2025', 1100, 69],
['South', 'Mia', 'Clothing', 'Jacket', 'Q3 2025', 1400, 72],
['South', 'Mia', 'Clothing', 'Pants', 'Q3 2025', 2500, 17],
['South', 'Mia', 'Clothing', 'Shirt', 'Q1 2025', 2200, 20],
['South', 'Mia', 'Clothing', 'Shirt', 'Q2 2025', 4000, 46],
['South', 'Mia', 'Electronics', 'Laptop', 'Q1 2025', 12800, 7],
['South', 'Mia', 'Electronics', 'Smartphone', 'Q4 2025', 3000, 14],
['South', 'Mia', 'Electronics', 'Tablet', 'Q2 2025', 6500, 17],
['South', 'Mia', 'Electronics', 'Tablet', 'Q3 2025', 9000, 6],
['South', 'Mia', 'Furniture', 'Chair', 'Q1 2025', 5600, 12],
['South', 'Mia', 'Furniture', 'Sofa', 'Q1 2025', 7500, 3],
['South', 'Mia', 'Furniture', 'Sofa', 'Q4 2025', 3200, 4],
['South', 'Mia', 'Furniture', 'Table', 'Q2 2025', 6200, 1],
['South', 'Mia', 'Sports', 'Ball', 'Q4 2025', 1200, 36],
['South', 'Mia', 'Sports', 'Bike', 'Q3 2025', 4200, 10],
['South', 'Mia', 'Sports', 'Racket', 'Q1 2025', 2000, 29],
['South', 'Mia', 'Sports', 'Racket', 'Q4 2025', 2800, 13],
['South', 'Nathan', 'Clothing', 'Jacket', 'Q3 2025', 1400, 19],
['South', 'Nathan', 'Clothing', 'Pants', 'Q4 2025', 1400, 67],
['South', 'Nathan', 'Electronics', 'Laptop', 'Q3 2025', 3000, 6],
['South', 'Nathan', 'Electronics', 'Smartphone', 'Q4 2025', 4700, 15],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q1 2025', 5900, 30],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q2 2025', 2500, 14],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q4 2025', 7800, 27],
['South', 'Nathan', 'Furniture', 'Chair', 'Q4 2025', 4100, 2],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q3 2025', 7500, 4],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q4 2025', 4100, 16],
['South', 'Nathan', 'Furniture', 'Table', 'Q1 2025', 2200, 7],
['South', 'Nathan', 'Furniture', 'Table', 'Q4 2025', 5500, 9],
['South', 'Nathan', 'Sports', 'Bike', 'Q4 2025', 1800, 26],
['South', 'Nathan', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['West', 'Grace', 'Clothing', 'Pants', 'Q2 2025', 3000, 32],
['West', 'Grace', 'Clothing', 'Pants', 'Q3 2025', 4000, 28],
['West', 'Grace', 'Clothing', 'Pants', 'Q4 2025', 3200, 69],
['West', 'Grace', 'Clothing', 'Shirt', 'Q1 2025', 2200, 17],
['West', 'Grace', 'Electronics', 'Laptop', 'Q3 2025', 4700, 21],
['West', 'Grace', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 24],
['West', 'Grace', 'Electronics', 'Tablet', 'Q3 2025', 10700, 15],
['West', 'Grace', 'Furniture', 'Sofa', 'Q2 2025', 6200, 1],
['West', 'Grace', 'Furniture', 'Table', 'Q2 2025', 2900, 8],
['West', 'Grace', 'Furniture', 'Table', 'Q4 2025', 5600, 11],
['West', 'Grace', 'Sports', 'Ball', 'Q1 2025', 2300, 14],
['West', 'Grace', 'Sports', 'Ball', 'Q2 2025', 2800, 39],
['West', 'Grace', 'Sports', 'Bike', 'Q2 2025', 1800, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q3 2025', 3300, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q4 2025', 1800, 31],
['West', 'Grace', 'Sports', 'Racket', 'Q2 2025', 2000, 10],
['West', 'Henry', 'Clothing', 'Jacket', 'Q1 2025', 3500, 58],
['West', 'Henry', 'Clothing', 'Pants', 'Q2 2025', 900, 36],
['West', 'Henry', 'Clothing', 'Shirt', 'Q2 2025', 3500, 79],
['West', 'Henry', 'Clothing', 'Shirt', 'Q3 2025', 1800, 46],
['West', 'Henry', 'Clothing', 'Shirt', 'Q4 2025', 2200, 46],
['West', 'Henry', 'Electronics', 'Laptop', 'Q2 2025', 7800, 23],
['West', 'Henry', 'Electronics', 'Tablet', 'Q4 2025', 4700, 29],
['West', 'Henry', 'Furniture', 'Chair', 'Q1 2025', 4100, 15],
['West', 'Henry', 'Furniture', 'Table', 'Q1 2025', 2200, 13],
['West', 'Henry', 'Furniture', 'Table', 'Q2 2025', 4100, 17],
['West', 'Henry', 'Furniture', 'Table', 'Q3 2025', 2200, 8],
['West', 'Henry', 'Furniture', 'Table', 'Q4 2025', 1500, 14],
['West', 'Henry', 'Sports', 'Bike', 'Q1 2025', 3300, 12],
['West', 'Henry', 'Sports', 'Racket', 'Q3 2025', 1800, 39],
['West', 'Olivia', 'Clothing', 'Pants', 'Q2 2025', 1100, 29],
['West', 'Olivia', 'Clothing', 'Pants', 'Q3 2025', 3500, 69],
['West', 'Olivia', 'Clothing', 'Pants', 'Q4 2025', 1400, 65],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q3 2025', 6500, 26],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q4 2025', 8700, 29],
['West', 'Olivia', 'Electronics', 'Tablet', 'Q3 2025', 2500, 21],
['West', 'Olivia', 'Furniture', 'Chair', 'Q1 2025', 2200, 1],
['West', 'Olivia', 'Furniture', 'Chair', 'Q3 2025', 3200, 7],
['West', 'Olivia', 'Furniture', 'Chair', 'Q4 2025', 4100, 16],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q1 2025', 2900, 18],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q2 2025', 5500, 16],
['West', 'Olivia', 'Sports', 'Ball', 'Q1 2025', 4200, 32],
['West', 'Olivia', 'Sports', 'Ball', 'Q4 2025', 4200, 25],
['West', 'Olivia', 'Sports', 'Racket', 'Q1 2025', 4600, 26],
['West', 'Olivia', 'Sports', 'Racket', 'Q4 2025', 3300, 26],
['West', 'Paul', 'Clothing', 'Jacket', 'Q1 2025', 2200, 68],
['West', 'Paul', 'Clothing', 'Shirt', 'Q4 2025', 3500, 33],
['West', 'Paul', 'Electronics', 'Laptop', 'Q4 2025', 4700, 10],
['West', 'Paul', 'Electronics', 'Smartphone', 'Q4 2025', 9000, 17],
['West', 'Paul', 'Furniture', 'Sofa', 'Q2 2025', 6200, 14],
['West', 'Paul', 'Sports', 'Racket', 'Q2 2025', 3300, 27],
[],
['Region', 'Revenue', '', 'Category', 'Revenue', '', ''],
['North', '=SUMIF(A2:A201,"North",F2:F201)', '', 'Electronics', '=SUMIF(C2:C201,"Electronics",F2:F201)', '', ''],
['South', '=SUMIF(A2:A201,"South",F2:F201)', '', 'Clothing', '=SUMIF(C2:C201,"Clothing",F2:F201)', '', ''],
['East', '=SUMIF(A2:A201,"East",F2:F201)', '', 'Furniture', '=SUMIF(C2:C201,"Furniture",F2:F201)', '', ''],
['West', '=SUMIF(A2:A201,"West",F2:F201)', '', 'Sports', '=SUMIF(C2:C201,"Sports",F2:F201)', '', ''],
[],
['Salesperson', 'Revenue', '', '', '', '', ''],
['Alice', '=SUMIF(B2:B201,"Alice",F2:F201)', '', '', '', '', ''],
['Bob', '=SUMIF(B2:B201,"Bob",F2:F201)', '', '', '', '', ''],
['Carol', '=SUMIF(B2:B201,"Carol",F2:F201)', '', '', '', '', ''],
['David', '=SUMIF(B2:B201,"David",F2:F201)', '', '', '', '', ''],
['Emma', '=SUMIF(B2:B201,"Emma",F2:F201)', '', '', '', '', ''],
['Frank', '=SUMIF(B2:B201,"Frank",F2:F201)', '', '', '', '', ''],
['Grace', '=SUMIF(B2:B201,"Grace",F2:F201)', '', '', '', '', ''],
['Henry', '=SUMIF(B2:B201,"Henry",F2:F201)', '', '', '', '', ''],
['Ivy', '=SUMIF(B2:B201,"Ivy",F2:F201)', '', '', '', '', ''],
['Jack', '=SUMIF(B2:B201,"Jack",F2:F201)', '', '', '', '', ''],
['Kevin', '=SUMIF(B2:B201,"Kevin",F2:F201)', '', '', '', '', ''],
['Laura', '=SUMIF(B2:B201,"Laura",F2:F201)', '', '', '', '', ''],
['Mia', '=SUMIF(B2:B201,"Mia",F2:F201)', '', '', '', '', ''],
['Nathan', '=SUMIF(B2:B201,"Nathan",F2:F201)', '', '', '', '', ''],
['Olivia', '=SUMIF(B2:B201,"Olivia",F2:F201)', '', '', '', '', ''],
['Paul', '=SUMIF(B2:B201,"Paul",F2:F201)', '', '', '', '', ''],
],
},
],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";
import pivot from "@jspreadsheet/pivot";
import charts from "@jspreadsheet/charts";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jspreadsheet/pivot/dist/style.css";
import "@jspreadsheet/charts/dist/style.css";
import "@lemonadejs/studio/dist/style.css";
import "./styles.css"; // .jss_pivot_table.is-header { background-color: #8093B3 !important; }
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MGRkNzJiYzNhOTQyZWZmMGQ2MGZjNGIzMWQyODAxNzE1NjkxM2EzZDFlMTk0ZDgyMjk4Y2MwZmUwOGI0ZjNkYWIzNDg4MjllYjkyZjdjNWRiZmE0MzEyOGEwYzg5OThiODQ1ZWEyYjFmOTU3OTQzYmRhMjU4OWU1ZTRhZTY5YzcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeE56TTVPRGszTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
// Set the extensions
jspreadsheet.setExtensions({ formula, pivot, charts });
// Sales data with summary formulas
const salesData = [
['Region', 'Salesperson', 'Category', 'Product', 'Quarter', 'Revenue', 'Units'],
['East', 'Emma', 'Clothing', 'Pants', 'Q1 2025', 3500, 44],
['East', 'Emma', 'Clothing', 'Pants', 'Q2 2025', 3500, 38],
['East', 'Emma', 'Clothing', 'Shirt', 'Q2 2025', 1400, 48],
['East', 'Emma', 'Electronics', 'Laptop', 'Q3 2025', 4000, 29],
['East', 'Emma', 'Electronics', 'Smartphone', 'Q2 2025', 2000, 22],
['East', 'Emma', 'Electronics', 'Tablet', 'Q1 2025', 6500, 26],
['East', 'Emma', 'Electronics', 'Tablet', 'Q2 2025', 5900, 17],
['East', 'Emma', 'Electronics', 'Tablet', 'Q3 2025', 2000, 7],
['East', 'Emma', 'Furniture', 'Chair', 'Q1 2025', 5600, 10],
['East', 'Emma', 'Furniture', 'Sofa', 'Q1 2025', 5000, 15],
['East', 'Emma', 'Furniture', 'Table', 'Q2 2025', 4100, 15],
['East', 'Emma', 'Sports', 'Ball', 'Q2 2025', 2000, 30],
['East', 'Emma', 'Sports', 'Bike', 'Q1 2025', 800, 16],
['East', 'Emma', 'Sports', 'Bike', 'Q4 2025', 3300, 23],
['East', 'Emma', 'Sports', 'Racket', 'Q1 2025', 1400, 40],
['East', 'Emma', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['East', 'Frank', 'Clothing', 'Pants', 'Q1 2025', 1800, 21],
['East', 'Frank', 'Electronics', 'Tablet', 'Q1 2025', 4700, 15],
['East', 'Frank', 'Electronics', 'Tablet', 'Q3 2025', 2000, 15],
['East', 'Frank', 'Furniture', 'Chair', 'Q3 2025', 2200, 6],
['East', 'Frank', 'Furniture', 'Sofa', 'Q3 2025', 4100, 8],
['East', 'Frank', 'Sports', 'Ball', 'Q1 2025', 1800, 9],
['East', 'Frank', 'Sports', 'Bike', 'Q3 2025', 1400, 38],
['East', 'Frank', 'Sports', 'Racket', 'Q1 2025', 1800, 38],
['East', 'Ivy', 'Clothing', 'Jacket', 'Q3 2025', 1400, 48],
['East', 'Ivy', 'Clothing', 'Pants', 'Q4 2025', 3000, 29],
['East', 'Ivy', 'Electronics', 'Smartphone', 'Q2 2025', 2500, 28],
['East', 'Ivy', 'Electronics', 'Tablet', 'Q2 2025', 5900, 16],
['East', 'Ivy', 'Furniture', 'Chair', 'Q1 2025', 3200, 13],
['East', 'Ivy', 'Furniture', 'Table', 'Q2 2025', 5600, 1],
['East', 'Ivy', 'Sports', 'Bike', 'Q1 2025', 800, 10],
['East', 'Ivy', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['East', 'Ivy', 'Sports', 'Racket', 'Q3 2025', 2800, 29],
['East', 'Jack', 'Clothing', 'Jacket', 'Q1 2025', 3000, 38],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q2 2025', 5900, 16],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q3 2025', 6500, 22],
['East', 'Jack', 'Electronics', 'Tablet', 'Q1 2025', 4700, 21],
['East', 'Jack', 'Furniture', 'Chair', 'Q2 2025', 7500, 14],
['East', 'Jack', 'Furniture', 'Chair', 'Q3 2025', 7500, 18],
['East', 'Jack', 'Furniture', 'Sofa', 'Q4 2025', 4100, 8],
['East', 'Jack', 'Furniture', 'Table', 'Q2 2025', 3200, 7],
['East', 'Jack', 'Sports', 'Ball', 'Q3 2025', 3300, 38],
['East', 'Jack', 'Sports', 'Ball', 'Q4 2025', 1400, 26],
['East', 'Jack', 'Sports', 'Bike', 'Q1 2025', 2800, 25],
['East', 'Jack', 'Sports', 'Racket', 'Q1 2025', 2300, 39],
['East', 'Jack', 'Sports', 'Racket', 'Q2 2025', 2800, 29],
['North', 'Alice', 'Clothing', 'Jacket', 'Q1 2025', 1100, 39],
['North', 'Alice', 'Electronics', 'Laptop', 'Q2 2025', 9000, 12],
['North', 'Alice', 'Electronics', 'Smartphone', 'Q3 2025', 5900, 19],
['North', 'Alice', 'Electronics', 'Tablet', 'Q1 2025', 2500, 28],
['North', 'Alice', 'Furniture', 'Chair', 'Q2 2025', 5600, 2],
['North', 'Alice', 'Furniture', 'Table', 'Q4 2025', 3200, 15],
['North', 'Alice', 'Sports', 'Ball', 'Q2 2025', 1400, 39],
['North', 'Alice', 'Sports', 'Bike', 'Q2 2025', 800, 13],
['North', 'Alice', 'Sports', 'Bike', 'Q4 2025', 3300, 25],
['North', 'Bob', 'Clothing', 'Jacket', 'Q3 2025', 3200, 21],
['North', 'Bob', 'Clothing', 'Pants', 'Q1 2025', 2500, 25],
['North', 'Bob', 'Electronics', 'Smartphone', 'Q4 2025', 3500, 18],
['North', 'Bob', 'Electronics', 'Tablet', 'Q4 2025', 8700, 14],
['North', 'Bob', 'Furniture', 'Chair', 'Q1 2025', 7500, 2],
['North', 'Bob', 'Furniture', 'Table', 'Q1 2025', 2900, 3],
['North', 'Bob', 'Sports', 'Racket', 'Q1 2025', 3300, 30],
['North', 'Kevin', 'Clothing', 'Jacket', 'Q1 2025', 1100, 66],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q2 2025', 1400, 40],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q3 2025', 3000, 22],
['North', 'Kevin', 'Electronics', 'Laptop', 'Q3 2025', 5200, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q1 2025', 12800, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q2 2025', 10700, 20],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 29],
['North', 'Kevin', 'Furniture', 'Chair', 'Q1 2025', 2900, 3],
['North', 'Kevin', 'Furniture', 'Table', 'Q1 2025', 5600, 9],
['North', 'Kevin', 'Furniture', 'Table', 'Q2 2025', 5000, 1],
['North', 'Kevin', 'Sports', 'Ball', 'Q2 2025', 1400, 34],
['North', 'Kevin', 'Sports', 'Ball', 'Q4 2025', 800, 28],
['North', 'Kevin', 'Sports', 'Bike', 'Q4 2025', 2000, 25],
['North', 'Kevin', 'Sports', 'Racket', 'Q1 2025', 2000, 27],
['North', 'Kevin', 'Sports', 'Racket', 'Q2 2025', 1800, 27],
['North', 'Laura', 'Clothing', 'Jacket', 'Q3 2025', 3500, 44],
['North', 'Laura', 'Clothing', 'Pants', 'Q3 2025', 1800, 75],
['North', 'Laura', 'Clothing', 'Shirt', 'Q2 2025', 4000, 57],
['North', 'Laura', 'Electronics', 'Smartphone', 'Q1 2025', 4000, 26],
['North', 'Laura', 'Furniture', 'Chair', 'Q1 2025', 5600, 13],
['North', 'Laura', 'Furniture', 'Table', 'Q1 2025', 2900, 9],
['North', 'Laura', 'Furniture', 'Table', 'Q2 2025', 2900, 2],
['North', 'Laura', 'Sports', 'Ball', 'Q4 2025', 4600, 29],
['North', 'Laura', 'Sports', 'Bike', 'Q1 2025', 4200, 20],
['North', 'Laura', 'Sports', 'Bike', 'Q4 2025', 3300, 36],
['North', 'Laura', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['South', 'Carol', 'Clothing', 'Jacket', 'Q3 2025', 3500, 11],
['South', 'Carol', 'Clothing', 'Jacket', 'Q4 2025', 3200, 66],
['South', 'Carol', 'Clothing', 'Pants', 'Q4 2025', 3000, 24],
['South', 'Carol', 'Clothing', 'Shirt', 'Q4 2025', 3000, 68],
['South', 'Carol', 'Electronics', 'Laptop', 'Q2 2025', 6500, 15],
['South', 'Carol', 'Electronics', 'Tablet', 'Q1 2025', 10700, 14],
['South', 'Carol', 'Furniture', 'Chair', 'Q4 2025', 2200, 17],
['South', 'Carol', 'Furniture', 'Sofa', 'Q2 2025', 3200, 12],
['South', 'Carol', 'Furniture', 'Sofa', 'Q4 2025', 4100, 1],
['South', 'Carol', 'Furniture', 'Table', 'Q3 2025', 4100, 2],
['South', 'Carol', 'Furniture', 'Table', 'Q4 2025', 2900, 6],
['South', 'Carol', 'Sports', 'Ball', 'Q4 2025', 800, 13],
['South', 'Carol', 'Sports', 'Bike', 'Q2 2025', 2800, 11],
['South', 'Carol', 'Sports', 'Racket', 'Q1 2025', 4600, 24],
['South', 'David', 'Clothing', 'Jacket', 'Q1 2025', 2500, 34],
['South', 'David', 'Clothing', 'Jacket', 'Q3 2025', 2200, 80],
['South', 'David', 'Clothing', 'Jacket', 'Q4 2025', 2200, 35],
['South', 'David', 'Clothing', 'Pants', 'Q2 2025', 4000, 58],
['South', 'David', 'Clothing', 'Pants', 'Q3 2025', 1800, 69],
['South', 'David', 'Clothing', 'Pants', 'Q4 2025', 2500, 52],
['South', 'David', 'Clothing', 'Shirt', 'Q1 2025', 3500, 79],
['South', 'David', 'Electronics', 'Tablet', 'Q1 2025', 5200, 24],
['South', 'David', 'Electronics', 'Tablet', 'Q4 2025', 3000, 11],
['South', 'David', 'Furniture', 'Chair', 'Q1 2025', 5000, 4],
['South', 'David', 'Furniture', 'Chair', 'Q2 2025', 7500, 6],
['South', 'David', 'Furniture', 'Sofa', 'Q2 2025', 6200, 2],
['South', 'David', 'Furniture', 'Table', 'Q4 2025', 4100, 3],
['South', 'David', 'Sports', 'Bike', 'Q1 2025', 3300, 28],
['South', 'David', 'Sports', 'Bike', 'Q4 2025', 1200, 23],
['South', 'David', 'Sports', 'Racket', 'Q4 2025', 1800, 26],
['South', 'Mia', 'Clothing', 'Jacket', 'Q2 2025', 1100, 69],
['South', 'Mia', 'Clothing', 'Jacket', 'Q3 2025', 1400, 72],
['South', 'Mia', 'Clothing', 'Pants', 'Q3 2025', 2500, 17],
['South', 'Mia', 'Clothing', 'Shirt', 'Q1 2025', 2200, 20],
['South', 'Mia', 'Clothing', 'Shirt', 'Q2 2025', 4000, 46],
['South', 'Mia', 'Electronics', 'Laptop', 'Q1 2025', 12800, 7],
['South', 'Mia', 'Electronics', 'Smartphone', 'Q4 2025', 3000, 14],
['South', 'Mia', 'Electronics', 'Tablet', 'Q2 2025', 6500, 17],
['South', 'Mia', 'Electronics', 'Tablet', 'Q3 2025', 9000, 6],
['South', 'Mia', 'Furniture', 'Chair', 'Q1 2025', 5600, 12],
['South', 'Mia', 'Furniture', 'Sofa', 'Q1 2025', 7500, 3],
['South', 'Mia', 'Furniture', 'Sofa', 'Q4 2025', 3200, 4],
['South', 'Mia', 'Furniture', 'Table', 'Q2 2025', 6200, 1],
['South', 'Mia', 'Sports', 'Ball', 'Q4 2025', 1200, 36],
['South', 'Mia', 'Sports', 'Bike', 'Q3 2025', 4200, 10],
['South', 'Mia', 'Sports', 'Racket', 'Q1 2025', 2000, 29],
['South', 'Mia', 'Sports', 'Racket', 'Q4 2025', 2800, 13],
['South', 'Nathan', 'Clothing', 'Jacket', 'Q3 2025', 1400, 19],
['South', 'Nathan', 'Clothing', 'Pants', 'Q4 2025', 1400, 67],
['South', 'Nathan', 'Electronics', 'Laptop', 'Q3 2025', 3000, 6],
['South', 'Nathan', 'Electronics', 'Smartphone', 'Q4 2025', 4700, 15],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q1 2025', 5900, 30],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q2 2025', 2500, 14],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q4 2025', 7800, 27],
['South', 'Nathan', 'Furniture', 'Chair', 'Q4 2025', 4100, 2],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q3 2025', 7500, 4],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q4 2025', 4100, 16],
['South', 'Nathan', 'Furniture', 'Table', 'Q1 2025', 2200, 7],
['South', 'Nathan', 'Furniture', 'Table', 'Q4 2025', 5500, 9],
['South', 'Nathan', 'Sports', 'Bike', 'Q4 2025', 1800, 26],
['South', 'Nathan', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['West', 'Grace', 'Clothing', 'Pants', 'Q2 2025', 3000, 32],
['West', 'Grace', 'Clothing', 'Pants', 'Q3 2025', 4000, 28],
['West', 'Grace', 'Clothing', 'Pants', 'Q4 2025', 3200, 69],
['West', 'Grace', 'Clothing', 'Shirt', 'Q1 2025', 2200, 17],
['West', 'Grace', 'Electronics', 'Laptop', 'Q3 2025', 4700, 21],
['West', 'Grace', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 24],
['West', 'Grace', 'Electronics', 'Tablet', 'Q3 2025', 10700, 15],
['West', 'Grace', 'Furniture', 'Sofa', 'Q2 2025', 6200, 1],
['West', 'Grace', 'Furniture', 'Table', 'Q2 2025', 2900, 8],
['West', 'Grace', 'Furniture', 'Table', 'Q4 2025', 5600, 11],
['West', 'Grace', 'Sports', 'Ball', 'Q1 2025', 2300, 14],
['West', 'Grace', 'Sports', 'Ball', 'Q2 2025', 2800, 39],
['West', 'Grace', 'Sports', 'Bike', 'Q2 2025', 1800, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q3 2025', 3300, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q4 2025', 1800, 31],
['West', 'Grace', 'Sports', 'Racket', 'Q2 2025', 2000, 10],
['West', 'Henry', 'Clothing', 'Jacket', 'Q1 2025', 3500, 58],
['West', 'Henry', 'Clothing', 'Pants', 'Q2 2025', 900, 36],
['West', 'Henry', 'Clothing', 'Shirt', 'Q2 2025', 3500, 79],
['West', 'Henry', 'Clothing', 'Shirt', 'Q3 2025', 1800, 46],
['West', 'Henry', 'Clothing', 'Shirt', 'Q4 2025', 2200, 46],
['West', 'Henry', 'Electronics', 'Laptop', 'Q2 2025', 7800, 23],
['West', 'Henry', 'Electronics', 'Tablet', 'Q4 2025', 4700, 29],
['West', 'Henry', 'Furniture', 'Chair', 'Q1 2025', 4100, 15],
['West', 'Henry', 'Furniture', 'Table', 'Q1 2025', 2200, 13],
['West', 'Henry', 'Furniture', 'Table', 'Q2 2025', 4100, 17],
['West', 'Henry', 'Furniture', 'Table', 'Q3 2025', 2200, 8],
['West', 'Henry', 'Furniture', 'Table', 'Q4 2025', 1500, 14],
['West', 'Henry', 'Sports', 'Bike', 'Q1 2025', 3300, 12],
['West', 'Henry', 'Sports', 'Racket', 'Q3 2025', 1800, 39],
['West', 'Olivia', 'Clothing', 'Pants', 'Q2 2025', 1100, 29],
['West', 'Olivia', 'Clothing', 'Pants', 'Q3 2025', 3500, 69],
['West', 'Olivia', 'Clothing', 'Pants', 'Q4 2025', 1400, 65],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q3 2025', 6500, 26],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q4 2025', 8700, 29],
['West', 'Olivia', 'Electronics', 'Tablet', 'Q3 2025', 2500, 21],
['West', 'Olivia', 'Furniture', 'Chair', 'Q1 2025', 2200, 1],
['West', 'Olivia', 'Furniture', 'Chair', 'Q3 2025', 3200, 7],
['West', 'Olivia', 'Furniture', 'Chair', 'Q4 2025', 4100, 16],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q1 2025', 2900, 18],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q2 2025', 5500, 16],
['West', 'Olivia', 'Sports', 'Ball', 'Q1 2025', 4200, 32],
['West', 'Olivia', 'Sports', 'Ball', 'Q4 2025', 4200, 25],
['West', 'Olivia', 'Sports', 'Racket', 'Q1 2025', 4600, 26],
['West', 'Olivia', 'Sports', 'Racket', 'Q4 2025', 3300, 26],
['West', 'Paul', 'Clothing', 'Jacket', 'Q1 2025', 2200, 68],
['West', 'Paul', 'Clothing', 'Shirt', 'Q4 2025', 3500, 33],
['West', 'Paul', 'Electronics', 'Laptop', 'Q4 2025', 4700, 10],
['West', 'Paul', 'Electronics', 'Smartphone', 'Q4 2025', 9000, 17],
['West', 'Paul', 'Furniture', 'Sofa', 'Q2 2025', 6200, 14],
['West', 'Paul', 'Sports', 'Racket', 'Q2 2025', 3300, 27],
[],
['Region', 'Revenue', '', 'Category', 'Revenue', '', ''],
['North', '=SUMIF(A2:A201,"North",F2:F201)', '', 'Electronics', '=SUMIF(C2:C201,"Electronics",F2:F201)', '', ''],
['South', '=SUMIF(A2:A201,"South",F2:F201)', '', 'Clothing', '=SUMIF(C2:C201,"Clothing",F2:F201)', '', ''],
['East', '=SUMIF(A2:A201,"East",F2:F201)', '', 'Furniture', '=SUMIF(C2:C201,"Furniture",F2:F201)', '', ''],
['West', '=SUMIF(A2:A201,"West",F2:F201)', '', 'Sports', '=SUMIF(C2:C201,"Sports",F2:F201)', '', ''],
[],
['Salesperson', 'Revenue', '', '', '', '', ''],
['Alice', '=SUMIF(B2:B201,"Alice",F2:F201)', '', '', '', '', ''],
['Bob', '=SUMIF(B2:B201,"Bob",F2:F201)', '', '', '', '', ''],
['Carol', '=SUMIF(B2:B201,"Carol",F2:F201)', '', '', '', '', ''],
['David', '=SUMIF(B2:B201,"David",F2:F201)', '', '', '', '', ''],
['Emma', '=SUMIF(B2:B201,"Emma",F2:F201)', '', '', '', '', ''],
['Frank', '=SUMIF(B2:B201,"Frank",F2:F201)', '', '', '', '', ''],
['Grace', '=SUMIF(B2:B201,"Grace",F2:F201)', '', '', '', '', ''],
['Henry', '=SUMIF(B2:B201,"Henry",F2:F201)', '', '', '', '', ''],
['Ivy', '=SUMIF(B2:B201,"Ivy",F2:F201)', '', '', '', '', ''],
['Jack', '=SUMIF(B2:B201,"Jack",F2:F201)', '', '', '', '', ''],
['Kevin', '=SUMIF(B2:B201,"Kevin",F2:F201)', '', '', '', '', ''],
['Laura', '=SUMIF(B2:B201,"Laura",F2:F201)', '', '', '', '', ''],
['Mia', '=SUMIF(B2:B201,"Mia",F2:F201)', '', '', '', '', ''],
['Nathan', '=SUMIF(B2:B201,"Nathan",F2:F201)', '', '', '', '', ''],
['Olivia', '=SUMIF(B2:B201,"Olivia",F2:F201)', '', '', '', '', ''],
['Paul', '=SUMIF(B2:B201,"Paul",F2:F201)', '', '', '', '', ''],
];
// Pivot table configuration
const pivotTables = [
{
id: 'd13442b8-a1c8-4055-97f3-1455cd3f88a9',
anchor: 'A1',
source: 'Sales!A1:G201',
rows: [
{
columnIndex: 0,
sortBy: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
ascendingOrder: false,
collapsed: ['South'],
},
{
columnIndex: 1,
sortBy: 'name',
ascendingOrder: true,
},
],
columns: [
{
columnIndex: 2,
sortBy: 'name',
ascendingOrder: true,
},
],
cells: [
{
id: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
columnIndex: 5,
method: 'SUM',
},
{
id: 'b2c3d4e5-f6a7-4901-bcde-f12345678901',
columnIndex: 6,
method: 'SUM',
},
],
filters: [
{
columnIndex: 5,
validation: {
type: 'number',
criteria: '>=',
value: [500],
},
},
],
},
];
// Chart media for the Pivot worksheet
const pivotMedia = [
{
type: 'chart',
options: {
type: 'column',
range: 'Sales!A203:B207',
title: { text: 'Revenue by Region', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'A23',
width: 365,
height: 380,
left: 0,
top: 0,
},
{
type: 'chart',
options: {
type: 'doughnut',
range: 'Sales!D203:E207',
title: { text: 'Revenue by Category', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { position: 'bottom', display: true },
series: [
{ color: ['#5B7A9D', '#E07A5F', '#81B29A', '#F2CC8F'] },
],
},
cellAnchor: 'E23',
width: 365,
height: 380,
left: 10,
top: 0,
},
{
type: 'chart',
options: {
type: 'bar',
range: 'Sales!A209:B225',
title: { text: 'Revenue by Salesperson', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'I23',
width: 390,
height: 380,
left: 10,
top: 0,
},
];
export default function App() {
// Spreadsheet ref
const spreadsheet = useRef();
// Render component
return (
<Spreadsheet ref={spreadsheet} tabs toolbar tableOverflow resizable tableWidth="1360" tableHeight="620"
style={['font-family: Inter, sans-serif; font-size: 13px; color: #1e293b;', 'background-color: #1e293b; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; text-align: center;', 'background-color: #f1f5f9; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #1e293b;']}>
<Worksheet worksheetName="Pivot" pivotTables={pivotTables} media={pivotMedia} minDimensions={[14, 40]} filters columnSorting />
<Worksheet worksheetName="Sales" data={salesData} minDimensions={[8, 230]} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :tabs="true" :toolbar="true" :tableOverflow="true" :resizable="true" tableWidth="1360" tableHeight="620"
:style="spreadsheetStyle">
<Worksheet worksheetName="Pivot" :pivotTables="pivotTables" :media="pivotMedia" :minDimensions="[14, 40]" :filters="true" :columnSorting="true" />
<Worksheet worksheetName="Sales" :data="salesData" :minDimensions="[8, 230]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import formula from "@jspreadsheet/formula-pro";
import pivot from "@jspreadsheet/pivot";
import charts from "@jspreadsheet/charts";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jspreadsheet/pivot/dist/style.css";
import "@jspreadsheet/charts/dist/style.css";
import "@lemonadejs/studio/dist/style.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MGRkNzJiYzNhOTQyZWZmMGQ2MGZjNGIzMWQyODAxNzE1NjkxM2EzZDFlMTk0ZDgyMjk4Y2MwZmUwOGI0ZjNkYWIzNDg4MjllYjkyZjdjNWRiZmE0MzEyOGEwYzg5OThiODQ1ZWEyYjFmOTU3OTQzYmRhMjU4OWU1ZTRhZTY5YzcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeE56TTVPRGszTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
// Set the extensions
jspreadsheet.setExtensions({ formula, pivot, charts });
export default {
components: { Spreadsheet, Worksheet },
setup() {
// Spreadsheet style
const spreadsheetStyle = ['font-family: Inter, sans-serif; font-size: 13px; color: #1e293b;', 'background-color: #1e293b; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; text-align: center;', 'background-color: #f1f5f9; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #1e293b;'];
// Sales data with summary formulas
const salesData = [
['Region', 'Salesperson', 'Category', 'Product', 'Quarter', 'Revenue', 'Units'],
['East', 'Emma', 'Clothing', 'Pants', 'Q1 2025', 3500, 44],
['East', 'Emma', 'Clothing', 'Pants', 'Q2 2025', 3500, 38],
['East', 'Emma', 'Clothing', 'Shirt', 'Q2 2025', 1400, 48],
['East', 'Emma', 'Electronics', 'Laptop', 'Q3 2025', 4000, 29],
['East', 'Emma', 'Electronics', 'Smartphone', 'Q2 2025', 2000, 22],
['East', 'Emma', 'Electronics', 'Tablet', 'Q1 2025', 6500, 26],
['East', 'Emma', 'Electronics', 'Tablet', 'Q2 2025', 5900, 17],
['East', 'Emma', 'Electronics', 'Tablet', 'Q3 2025', 2000, 7],
['East', 'Emma', 'Furniture', 'Chair', 'Q1 2025', 5600, 10],
['East', 'Emma', 'Furniture', 'Sofa', 'Q1 2025', 5000, 15],
['East', 'Emma', 'Furniture', 'Table', 'Q2 2025', 4100, 15],
['East', 'Emma', 'Sports', 'Ball', 'Q2 2025', 2000, 30],
['East', 'Emma', 'Sports', 'Bike', 'Q1 2025', 800, 16],
['East', 'Emma', 'Sports', 'Bike', 'Q4 2025', 3300, 23],
['East', 'Emma', 'Sports', 'Racket', 'Q1 2025', 1400, 40],
['East', 'Emma', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['East', 'Frank', 'Clothing', 'Pants', 'Q1 2025', 1800, 21],
['East', 'Frank', 'Electronics', 'Tablet', 'Q1 2025', 4700, 15],
['East', 'Frank', 'Electronics', 'Tablet', 'Q3 2025', 2000, 15],
['East', 'Frank', 'Furniture', 'Chair', 'Q3 2025', 2200, 6],
['East', 'Frank', 'Furniture', 'Sofa', 'Q3 2025', 4100, 8],
['East', 'Frank', 'Sports', 'Ball', 'Q1 2025', 1800, 9],
['East', 'Frank', 'Sports', 'Bike', 'Q3 2025', 1400, 38],
['East', 'Frank', 'Sports', 'Racket', 'Q1 2025', 1800, 38],
['East', 'Ivy', 'Clothing', 'Jacket', 'Q3 2025', 1400, 48],
['East', 'Ivy', 'Clothing', 'Pants', 'Q4 2025', 3000, 29],
['East', 'Ivy', 'Electronics', 'Smartphone', 'Q2 2025', 2500, 28],
['East', 'Ivy', 'Electronics', 'Tablet', 'Q2 2025', 5900, 16],
['East', 'Ivy', 'Furniture', 'Chair', 'Q1 2025', 3200, 13],
['East', 'Ivy', 'Furniture', 'Table', 'Q2 2025', 5600, 1],
['East', 'Ivy', 'Sports', 'Bike', 'Q1 2025', 800, 10],
['East', 'Ivy', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['East', 'Ivy', 'Sports', 'Racket', 'Q3 2025', 2800, 29],
['East', 'Jack', 'Clothing', 'Jacket', 'Q1 2025', 3000, 38],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q2 2025', 5900, 16],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q3 2025', 6500, 22],
['East', 'Jack', 'Electronics', 'Tablet', 'Q1 2025', 4700, 21],
['East', 'Jack', 'Furniture', 'Chair', 'Q2 2025', 7500, 14],
['East', 'Jack', 'Furniture', 'Chair', 'Q3 2025', 7500, 18],
['East', 'Jack', 'Furniture', 'Sofa', 'Q4 2025', 4100, 8],
['East', 'Jack', 'Furniture', 'Table', 'Q2 2025', 3200, 7],
['East', 'Jack', 'Sports', 'Ball', 'Q3 2025', 3300, 38],
['East', 'Jack', 'Sports', 'Ball', 'Q4 2025', 1400, 26],
['East', 'Jack', 'Sports', 'Bike', 'Q1 2025', 2800, 25],
['East', 'Jack', 'Sports', 'Racket', 'Q1 2025', 2300, 39],
['East', 'Jack', 'Sports', 'Racket', 'Q2 2025', 2800, 29],
['North', 'Alice', 'Clothing', 'Jacket', 'Q1 2025', 1100, 39],
['North', 'Alice', 'Electronics', 'Laptop', 'Q2 2025', 9000, 12],
['North', 'Alice', 'Electronics', 'Smartphone', 'Q3 2025', 5900, 19],
['North', 'Alice', 'Electronics', 'Tablet', 'Q1 2025', 2500, 28],
['North', 'Alice', 'Furniture', 'Chair', 'Q2 2025', 5600, 2],
['North', 'Alice', 'Furniture', 'Table', 'Q4 2025', 3200, 15],
['North', 'Alice', 'Sports', 'Ball', 'Q2 2025', 1400, 39],
['North', 'Alice', 'Sports', 'Bike', 'Q2 2025', 800, 13],
['North', 'Alice', 'Sports', 'Bike', 'Q4 2025', 3300, 25],
['North', 'Bob', 'Clothing', 'Jacket', 'Q3 2025', 3200, 21],
['North', 'Bob', 'Clothing', 'Pants', 'Q1 2025', 2500, 25],
['North', 'Bob', 'Electronics', 'Smartphone', 'Q4 2025', 3500, 18],
['North', 'Bob', 'Electronics', 'Tablet', 'Q4 2025', 8700, 14],
['North', 'Bob', 'Furniture', 'Chair', 'Q1 2025', 7500, 2],
['North', 'Bob', 'Furniture', 'Table', 'Q1 2025', 2900, 3],
['North', 'Bob', 'Sports', 'Racket', 'Q1 2025', 3300, 30],
['North', 'Kevin', 'Clothing', 'Jacket', 'Q1 2025', 1100, 66],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q2 2025', 1400, 40],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q3 2025', 3000, 22],
['North', 'Kevin', 'Electronics', 'Laptop', 'Q3 2025', 5200, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q1 2025', 12800, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q2 2025', 10700, 20],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 29],
['North', 'Kevin', 'Furniture', 'Chair', 'Q1 2025', 2900, 3],
['North', 'Kevin', 'Furniture', 'Table', 'Q1 2025', 5600, 9],
['North', 'Kevin', 'Furniture', 'Table', 'Q2 2025', 5000, 1],
['North', 'Kevin', 'Sports', 'Ball', 'Q2 2025', 1400, 34],
['North', 'Kevin', 'Sports', 'Ball', 'Q4 2025', 800, 28],
['North', 'Kevin', 'Sports', 'Bike', 'Q4 2025', 2000, 25],
['North', 'Kevin', 'Sports', 'Racket', 'Q1 2025', 2000, 27],
['North', 'Kevin', 'Sports', 'Racket', 'Q2 2025', 1800, 27],
['North', 'Laura', 'Clothing', 'Jacket', 'Q3 2025', 3500, 44],
['North', 'Laura', 'Clothing', 'Pants', 'Q3 2025', 1800, 75],
['North', 'Laura', 'Clothing', 'Shirt', 'Q2 2025', 4000, 57],
['North', 'Laura', 'Electronics', 'Smartphone', 'Q1 2025', 4000, 26],
['North', 'Laura', 'Furniture', 'Chair', 'Q1 2025', 5600, 13],
['North', 'Laura', 'Furniture', 'Table', 'Q1 2025', 2900, 9],
['North', 'Laura', 'Furniture', 'Table', 'Q2 2025', 2900, 2],
['North', 'Laura', 'Sports', 'Ball', 'Q4 2025', 4600, 29],
['North', 'Laura', 'Sports', 'Bike', 'Q1 2025', 4200, 20],
['North', 'Laura', 'Sports', 'Bike', 'Q4 2025', 3300, 36],
['North', 'Laura', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['South', 'Carol', 'Clothing', 'Jacket', 'Q3 2025', 3500, 11],
['South', 'Carol', 'Clothing', 'Jacket', 'Q4 2025', 3200, 66],
['South', 'Carol', 'Clothing', 'Pants', 'Q4 2025', 3000, 24],
['South', 'Carol', 'Clothing', 'Shirt', 'Q4 2025', 3000, 68],
['South', 'Carol', 'Electronics', 'Laptop', 'Q2 2025', 6500, 15],
['South', 'Carol', 'Electronics', 'Tablet', 'Q1 2025', 10700, 14],
['South', 'Carol', 'Furniture', 'Chair', 'Q4 2025', 2200, 17],
['South', 'Carol', 'Furniture', 'Sofa', 'Q2 2025', 3200, 12],
['South', 'Carol', 'Furniture', 'Sofa', 'Q4 2025', 4100, 1],
['South', 'Carol', 'Furniture', 'Table', 'Q3 2025', 4100, 2],
['South', 'Carol', 'Furniture', 'Table', 'Q4 2025', 2900, 6],
['South', 'Carol', 'Sports', 'Ball', 'Q4 2025', 800, 13],
['South', 'Carol', 'Sports', 'Bike', 'Q2 2025', 2800, 11],
['South', 'Carol', 'Sports', 'Racket', 'Q1 2025', 4600, 24],
['South', 'David', 'Clothing', 'Jacket', 'Q1 2025', 2500, 34],
['South', 'David', 'Clothing', 'Jacket', 'Q3 2025', 2200, 80],
['South', 'David', 'Clothing', 'Jacket', 'Q4 2025', 2200, 35],
['South', 'David', 'Clothing', 'Pants', 'Q2 2025', 4000, 58],
['South', 'David', 'Clothing', 'Pants', 'Q3 2025', 1800, 69],
['South', 'David', 'Clothing', 'Pants', 'Q4 2025', 2500, 52],
['South', 'David', 'Clothing', 'Shirt', 'Q1 2025', 3500, 79],
['South', 'David', 'Electronics', 'Tablet', 'Q1 2025', 5200, 24],
['South', 'David', 'Electronics', 'Tablet', 'Q4 2025', 3000, 11],
['South', 'David', 'Furniture', 'Chair', 'Q1 2025', 5000, 4],
['South', 'David', 'Furniture', 'Chair', 'Q2 2025', 7500, 6],
['South', 'David', 'Furniture', 'Sofa', 'Q2 2025', 6200, 2],
['South', 'David', 'Furniture', 'Table', 'Q4 2025', 4100, 3],
['South', 'David', 'Sports', 'Bike', 'Q1 2025', 3300, 28],
['South', 'David', 'Sports', 'Bike', 'Q4 2025', 1200, 23],
['South', 'David', 'Sports', 'Racket', 'Q4 2025', 1800, 26],
['South', 'Mia', 'Clothing', 'Jacket', 'Q2 2025', 1100, 69],
['South', 'Mia', 'Clothing', 'Jacket', 'Q3 2025', 1400, 72],
['South', 'Mia', 'Clothing', 'Pants', 'Q3 2025', 2500, 17],
['South', 'Mia', 'Clothing', 'Shirt', 'Q1 2025', 2200, 20],
['South', 'Mia', 'Clothing', 'Shirt', 'Q2 2025', 4000, 46],
['South', 'Mia', 'Electronics', 'Laptop', 'Q1 2025', 12800, 7],
['South', 'Mia', 'Electronics', 'Smartphone', 'Q4 2025', 3000, 14],
['South', 'Mia', 'Electronics', 'Tablet', 'Q2 2025', 6500, 17],
['South', 'Mia', 'Electronics', 'Tablet', 'Q3 2025', 9000, 6],
['South', 'Mia', 'Furniture', 'Chair', 'Q1 2025', 5600, 12],
['South', 'Mia', 'Furniture', 'Sofa', 'Q1 2025', 7500, 3],
['South', 'Mia', 'Furniture', 'Sofa', 'Q4 2025', 3200, 4],
['South', 'Mia', 'Furniture', 'Table', 'Q2 2025', 6200, 1],
['South', 'Mia', 'Sports', 'Ball', 'Q4 2025', 1200, 36],
['South', 'Mia', 'Sports', 'Bike', 'Q3 2025', 4200, 10],
['South', 'Mia', 'Sports', 'Racket', 'Q1 2025', 2000, 29],
['South', 'Mia', 'Sports', 'Racket', 'Q4 2025', 2800, 13],
['South', 'Nathan', 'Clothing', 'Jacket', 'Q3 2025', 1400, 19],
['South', 'Nathan', 'Clothing', 'Pants', 'Q4 2025', 1400, 67],
['South', 'Nathan', 'Electronics', 'Laptop', 'Q3 2025', 3000, 6],
['South', 'Nathan', 'Electronics', 'Smartphone', 'Q4 2025', 4700, 15],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q1 2025', 5900, 30],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q2 2025', 2500, 14],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q4 2025', 7800, 27],
['South', 'Nathan', 'Furniture', 'Chair', 'Q4 2025', 4100, 2],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q3 2025', 7500, 4],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q4 2025', 4100, 16],
['South', 'Nathan', 'Furniture', 'Table', 'Q1 2025', 2200, 7],
['South', 'Nathan', 'Furniture', 'Table', 'Q4 2025', 5500, 9],
['South', 'Nathan', 'Sports', 'Bike', 'Q4 2025', 1800, 26],
['South', 'Nathan', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['West', 'Grace', 'Clothing', 'Pants', 'Q2 2025', 3000, 32],
['West', 'Grace', 'Clothing', 'Pants', 'Q3 2025', 4000, 28],
['West', 'Grace', 'Clothing', 'Pants', 'Q4 2025', 3200, 69],
['West', 'Grace', 'Clothing', 'Shirt', 'Q1 2025', 2200, 17],
['West', 'Grace', 'Electronics', 'Laptop', 'Q3 2025', 4700, 21],
['West', 'Grace', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 24],
['West', 'Grace', 'Electronics', 'Tablet', 'Q3 2025', 10700, 15],
['West', 'Grace', 'Furniture', 'Sofa', 'Q2 2025', 6200, 1],
['West', 'Grace', 'Furniture', 'Table', 'Q2 2025', 2900, 8],
['West', 'Grace', 'Furniture', 'Table', 'Q4 2025', 5600, 11],
['West', 'Grace', 'Sports', 'Ball', 'Q1 2025', 2300, 14],
['West', 'Grace', 'Sports', 'Ball', 'Q2 2025', 2800, 39],
['West', 'Grace', 'Sports', 'Bike', 'Q2 2025', 1800, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q3 2025', 3300, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q4 2025', 1800, 31],
['West', 'Grace', 'Sports', 'Racket', 'Q2 2025', 2000, 10],
['West', 'Henry', 'Clothing', 'Jacket', 'Q1 2025', 3500, 58],
['West', 'Henry', 'Clothing', 'Pants', 'Q2 2025', 900, 36],
['West', 'Henry', 'Clothing', 'Shirt', 'Q2 2025', 3500, 79],
['West', 'Henry', 'Clothing', 'Shirt', 'Q3 2025', 1800, 46],
['West', 'Henry', 'Clothing', 'Shirt', 'Q4 2025', 2200, 46],
['West', 'Henry', 'Electronics', 'Laptop', 'Q2 2025', 7800, 23],
['West', 'Henry', 'Electronics', 'Tablet', 'Q4 2025', 4700, 29],
['West', 'Henry', 'Furniture', 'Chair', 'Q1 2025', 4100, 15],
['West', 'Henry', 'Furniture', 'Table', 'Q1 2025', 2200, 13],
['West', 'Henry', 'Furniture', 'Table', 'Q2 2025', 4100, 17],
['West', 'Henry', 'Furniture', 'Table', 'Q3 2025', 2200, 8],
['West', 'Henry', 'Furniture', 'Table', 'Q4 2025', 1500, 14],
['West', 'Henry', 'Sports', 'Bike', 'Q1 2025', 3300, 12],
['West', 'Henry', 'Sports', 'Racket', 'Q3 2025', 1800, 39],
['West', 'Olivia', 'Clothing', 'Pants', 'Q2 2025', 1100, 29],
['West', 'Olivia', 'Clothing', 'Pants', 'Q3 2025', 3500, 69],
['West', 'Olivia', 'Clothing', 'Pants', 'Q4 2025', 1400, 65],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q3 2025', 6500, 26],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q4 2025', 8700, 29],
['West', 'Olivia', 'Electronics', 'Tablet', 'Q3 2025', 2500, 21],
['West', 'Olivia', 'Furniture', 'Chair', 'Q1 2025', 2200, 1],
['West', 'Olivia', 'Furniture', 'Chair', 'Q3 2025', 3200, 7],
['West', 'Olivia', 'Furniture', 'Chair', 'Q4 2025', 4100, 16],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q1 2025', 2900, 18],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q2 2025', 5500, 16],
['West', 'Olivia', 'Sports', 'Ball', 'Q1 2025', 4200, 32],
['West', 'Olivia', 'Sports', 'Ball', 'Q4 2025', 4200, 25],
['West', 'Olivia', 'Sports', 'Racket', 'Q1 2025', 4600, 26],
['West', 'Olivia', 'Sports', 'Racket', 'Q4 2025', 3300, 26],
['West', 'Paul', 'Clothing', 'Jacket', 'Q1 2025', 2200, 68],
['West', 'Paul', 'Clothing', 'Shirt', 'Q4 2025', 3500, 33],
['West', 'Paul', 'Electronics', 'Laptop', 'Q4 2025', 4700, 10],
['West', 'Paul', 'Electronics', 'Smartphone', 'Q4 2025', 9000, 17],
['West', 'Paul', 'Furniture', 'Sofa', 'Q2 2025', 6200, 14],
['West', 'Paul', 'Sports', 'Racket', 'Q2 2025', 3300, 27],
[],
['Region', 'Revenue', '', 'Category', 'Revenue', '', ''],
['North', '=SUMIF(A2:A201,"North",F2:F201)', '', 'Electronics', '=SUMIF(C2:C201,"Electronics",F2:F201)', '', ''],
['South', '=SUMIF(A2:A201,"South",F2:F201)', '', 'Clothing', '=SUMIF(C2:C201,"Clothing",F2:F201)', '', ''],
['East', '=SUMIF(A2:A201,"East",F2:F201)', '', 'Furniture', '=SUMIF(C2:C201,"Furniture",F2:F201)', '', ''],
['West', '=SUMIF(A2:A201,"West",F2:F201)', '', 'Sports', '=SUMIF(C2:C201,"Sports",F2:F201)', '', ''],
[],
['Salesperson', 'Revenue', '', '', '', '', ''],
['Alice', '=SUMIF(B2:B201,"Alice",F2:F201)', '', '', '', '', ''],
['Bob', '=SUMIF(B2:B201,"Bob",F2:F201)', '', '', '', '', ''],
['Carol', '=SUMIF(B2:B201,"Carol",F2:F201)', '', '', '', '', ''],
['David', '=SUMIF(B2:B201,"David",F2:F201)', '', '', '', '', ''],
['Emma', '=SUMIF(B2:B201,"Emma",F2:F201)', '', '', '', '', ''],
['Frank', '=SUMIF(B2:B201,"Frank",F2:F201)', '', '', '', '', ''],
['Grace', '=SUMIF(B2:B201,"Grace",F2:F201)', '', '', '', '', ''],
['Henry', '=SUMIF(B2:B201,"Henry",F2:F201)', '', '', '', '', ''],
['Ivy', '=SUMIF(B2:B201,"Ivy",F2:F201)', '', '', '', '', ''],
['Jack', '=SUMIF(B2:B201,"Jack",F2:F201)', '', '', '', '', ''],
['Kevin', '=SUMIF(B2:B201,"Kevin",F2:F201)', '', '', '', '', ''],
['Laura', '=SUMIF(B2:B201,"Laura",F2:F201)', '', '', '', '', ''],
['Mia', '=SUMIF(B2:B201,"Mia",F2:F201)', '', '', '', '', ''],
['Nathan', '=SUMIF(B2:B201,"Nathan",F2:F201)', '', '', '', '', ''],
['Olivia', '=SUMIF(B2:B201,"Olivia",F2:F201)', '', '', '', '', ''],
['Paul', '=SUMIF(B2:B201,"Paul",F2:F201)', '', '', '', '', ''],
];
// Pivot table configuration
const pivotTables = [
{
id: 'd13442b8-a1c8-4055-97f3-1455cd3f88a9',
anchor: 'A1',
source: 'Sales!A1:G201',
rows: [
{
columnIndex: 0,
sortBy: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
ascendingOrder: false,
collapsed: ['South'],
},
{
columnIndex: 1,
sortBy: 'name',
ascendingOrder: true,
},
],
columns: [
{
columnIndex: 2,
sortBy: 'name',
ascendingOrder: true,
},
],
cells: [
{
id: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
columnIndex: 5,
method: 'SUM',
},
{
id: 'b2c3d4e5-f6a7-4901-bcde-f12345678901',
columnIndex: 6,
method: 'SUM',
},
],
filters: [
{
columnIndex: 5,
validation: {
type: 'number',
criteria: '>=',
value: [500],
},
},
],
},
];
// Chart media for the Pivot worksheet
const pivotMedia = [
{
type: 'chart',
options: {
type: 'column',
range: 'Sales!A203:B207',
title: { text: 'Revenue by Region', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'A23',
width: 365,
height: 380,
left: 0,
top: 0,
},
{
type: 'chart',
options: {
type: 'doughnut',
range: 'Sales!D203:E207',
title: { text: 'Revenue by Category', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { position: 'bottom', display: true },
series: [
{ color: ['#5B7A9D', '#E07A5F', '#81B29A', '#F2CC8F'] },
],
},
cellAnchor: 'E23',
width: 365,
height: 380,
left: 10,
top: 0,
},
{
type: 'chart',
options: {
type: 'bar',
range: 'Sales!A209:B225',
title: { text: 'Revenue by Salesperson', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'I23',
width: 390,
height: 380,
left: 10,
top: 0,
},
];
return {
salesData,
pivotTables,
pivotMedia,
spreadsheetStyle,
};
}
}
</script>
<style>
.jss_pivot_table.is-header { background-color: #8093B3 !important; }
.jss_pivot_table.is-highlighted-column { background-color: #DFE4EC !important; }
.jss_pivot_table.is-highlighted-row { background-color: #F4F6F8 !important; }
</style>
import { Component, ViewChild, ElementRef, ViewEncapsulation } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import formula from "@jspreadsheet/formula-pro";
import pivot from "@jspreadsheet/pivot";
import charts from "@jspreadsheet/charts";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jspreadsheet/pivot/dist/style.css";
import "@jspreadsheet/charts/dist/style.css";
import "@lemonadejs/studio/dist/style.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MGRkNzJiYzNhOTQyZWZmMGQ2MGZjNGIzMWQyODAxNzE1NjkxM2EzZDFlMTk0ZDgyMjk4Y2MwZmUwOGI0ZjNkYWIzNDg4MjllYjkyZjdjNWRiZmE0MzEyOGEwYzg5OThiODQ1ZWEyYjFmOTU3OTQzYmRhMjU4OWU1ZTRhZTY5YzcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeE56TTVPRGszTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
// Set the extensions
jspreadsheet.setExtensions({ formula, pivot, charts });
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`,
styles: [`.jss_pivot_table.is-header { background-color: #8093B3 !important; }
.jss_pivot_table.is-highlighted-column { background-color: #DFE4EC !important; }
.jss_pivot_table.is-highlighted-row { background-color: #F4F6F8 !important; }`],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
toolbar: true,
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
style: [
'font-family: Inter, sans-serif; font-size: 13px; color: #1e293b;',
'background-color: #1e293b; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; text-align: center;',
'background-color: #f1f5f9; font-family: Inter, sans-serif; font-size: 13px; font-weight: bold; color: #1e293b;',
],
worksheets: [
{
worksheetName: 'Pivot',
minDimensions: [14, 40],
filters: true,
columnSorting: true,
pivotTables: [
{
id: 'd13442b8-a1c8-4055-97f3-1455cd3f88a9',
anchor: 'A1',
source: 'Sales!A1:G201',
rows: [
{
columnIndex: 0,
sortBy: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
ascendingOrder: false,
collapsed: ['South'],
},
{
columnIndex: 1,
sortBy: 'name',
ascendingOrder: true,
},
],
columns: [
{
columnIndex: 2,
sortBy: 'name',
ascendingOrder: true,
},
],
cells: [
{
id: 'a1b2c3d4-e5f6-4890-abcd-ef1234567890',
columnIndex: 5,
method: 'SUM',
},
{
id: 'b2c3d4e5-f6a7-4901-bcde-f12345678901',
columnIndex: 6,
method: 'SUM',
},
],
filters: [
{
columnIndex: 5,
validation: {
type: 'number',
criteria: '>=',
value: [500],
},
},
],
},
],
media: [
{
type: 'chart',
options: {
type: 'column',
range: 'Sales!A203:B207',
title: { text: 'Revenue by Region', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'A23',
width: 365,
height: 380,
left: 0,
top: 0,
},
{
type: 'chart',
options: {
type: 'doughnut',
range: 'Sales!D203:E207',
title: { text: 'Revenue by Category', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { position: 'bottom', display: true },
series: [
{ color: ['#5B7A9D', '#E07A5F', '#81B29A', '#F2CC8F'] },
],
},
cellAnchor: 'E23',
width: 365,
height: 380,
left: 10,
top: 0,
},
{
type: 'chart',
options: {
type: 'bar',
range: 'Sales!A209:B225',
title: { text: 'Revenue by Salesperson', position: 'top', font: { size: 14, color: '#1e293b' } },
legend: { display: false },
series: [
{ color: '#5B7A9D' },
],
},
cellAnchor: 'I23',
width: 390,
height: 380,
left: 10,
top: 0,
},
],
},
{
worksheetName: 'Sales',
minDimensions: [8, 230],
data: [
['Region', 'Salesperson', 'Category', 'Product', 'Quarter', 'Revenue', 'Units'],
['East', 'Emma', 'Clothing', 'Pants', 'Q1 2025', 3500, 44],
['East', 'Emma', 'Clothing', 'Pants', 'Q2 2025', 3500, 38],
['East', 'Emma', 'Clothing', 'Shirt', 'Q2 2025', 1400, 48],
['East', 'Emma', 'Electronics', 'Laptop', 'Q3 2025', 4000, 29],
['East', 'Emma', 'Electronics', 'Smartphone', 'Q2 2025', 2000, 22],
['East', 'Emma', 'Electronics', 'Tablet', 'Q1 2025', 6500, 26],
['East', 'Emma', 'Electronics', 'Tablet', 'Q2 2025', 5900, 17],
['East', 'Emma', 'Electronics', 'Tablet', 'Q3 2025', 2000, 7],
['East', 'Emma', 'Furniture', 'Chair', 'Q1 2025', 5600, 10],
['East', 'Emma', 'Furniture', 'Sofa', 'Q1 2025', 5000, 15],
['East', 'Emma', 'Furniture', 'Table', 'Q2 2025', 4100, 15],
['East', 'Emma', 'Sports', 'Ball', 'Q2 2025', 2000, 30],
['East', 'Emma', 'Sports', 'Bike', 'Q1 2025', 800, 16],
['East', 'Emma', 'Sports', 'Bike', 'Q4 2025', 3300, 23],
['East', 'Emma', 'Sports', 'Racket', 'Q1 2025', 1400, 40],
['East', 'Emma', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['East', 'Frank', 'Clothing', 'Pants', 'Q1 2025', 1800, 21],
['East', 'Frank', 'Electronics', 'Tablet', 'Q1 2025', 4700, 15],
['East', 'Frank', 'Electronics', 'Tablet', 'Q3 2025', 2000, 15],
['East', 'Frank', 'Furniture', 'Chair', 'Q3 2025', 2200, 6],
['East', 'Frank', 'Furniture', 'Sofa', 'Q3 2025', 4100, 8],
['East', 'Frank', 'Sports', 'Ball', 'Q1 2025', 1800, 9],
['East', 'Frank', 'Sports', 'Bike', 'Q3 2025', 1400, 38],
['East', 'Frank', 'Sports', 'Racket', 'Q1 2025', 1800, 38],
['East', 'Ivy', 'Clothing', 'Jacket', 'Q3 2025', 1400, 48],
['East', 'Ivy', 'Clothing', 'Pants', 'Q4 2025', 3000, 29],
['East', 'Ivy', 'Electronics', 'Smartphone', 'Q2 2025', 2500, 28],
['East', 'Ivy', 'Electronics', 'Tablet', 'Q2 2025', 5900, 16],
['East', 'Ivy', 'Furniture', 'Chair', 'Q1 2025', 3200, 13],
['East', 'Ivy', 'Furniture', 'Table', 'Q2 2025', 5600, 1],
['East', 'Ivy', 'Sports', 'Bike', 'Q1 2025', 800, 10],
['East', 'Ivy', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['East', 'Ivy', 'Sports', 'Racket', 'Q3 2025', 2800, 29],
['East', 'Jack', 'Clothing', 'Jacket', 'Q1 2025', 3000, 38],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q2 2025', 5900, 16],
['East', 'Jack', 'Electronics', 'Smartphone', 'Q3 2025', 6500, 22],
['East', 'Jack', 'Electronics', 'Tablet', 'Q1 2025', 4700, 21],
['East', 'Jack', 'Furniture', 'Chair', 'Q2 2025', 7500, 14],
['East', 'Jack', 'Furniture', 'Chair', 'Q3 2025', 7500, 18],
['East', 'Jack', 'Furniture', 'Sofa', 'Q4 2025', 4100, 8],
['East', 'Jack', 'Furniture', 'Table', 'Q2 2025', 3200, 7],
['East', 'Jack', 'Sports', 'Ball', 'Q3 2025', 3300, 38],
['East', 'Jack', 'Sports', 'Ball', 'Q4 2025', 1400, 26],
['East', 'Jack', 'Sports', 'Bike', 'Q1 2025', 2800, 25],
['East', 'Jack', 'Sports', 'Racket', 'Q1 2025', 2300, 39],
['East', 'Jack', 'Sports', 'Racket', 'Q2 2025', 2800, 29],
['North', 'Alice', 'Clothing', 'Jacket', 'Q1 2025', 1100, 39],
['North', 'Alice', 'Electronics', 'Laptop', 'Q2 2025', 9000, 12],
['North', 'Alice', 'Electronics', 'Smartphone', 'Q3 2025', 5900, 19],
['North', 'Alice', 'Electronics', 'Tablet', 'Q1 2025', 2500, 28],
['North', 'Alice', 'Furniture', 'Chair', 'Q2 2025', 5600, 2],
['North', 'Alice', 'Furniture', 'Table', 'Q4 2025', 3200, 15],
['North', 'Alice', 'Sports', 'Ball', 'Q2 2025', 1400, 39],
['North', 'Alice', 'Sports', 'Bike', 'Q2 2025', 800, 13],
['North', 'Alice', 'Sports', 'Bike', 'Q4 2025', 3300, 25],
['North', 'Bob', 'Clothing', 'Jacket', 'Q3 2025', 3200, 21],
['North', 'Bob', 'Clothing', 'Pants', 'Q1 2025', 2500, 25],
['North', 'Bob', 'Electronics', 'Smartphone', 'Q4 2025', 3500, 18],
['North', 'Bob', 'Electronics', 'Tablet', 'Q4 2025', 8700, 14],
['North', 'Bob', 'Furniture', 'Chair', 'Q1 2025', 7500, 2],
['North', 'Bob', 'Furniture', 'Table', 'Q1 2025', 2900, 3],
['North', 'Bob', 'Sports', 'Racket', 'Q1 2025', 3300, 30],
['North', 'Kevin', 'Clothing', 'Jacket', 'Q1 2025', 1100, 66],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q2 2025', 1400, 40],
['North', 'Kevin', 'Clothing', 'Shirt', 'Q3 2025', 3000, 22],
['North', 'Kevin', 'Electronics', 'Laptop', 'Q3 2025', 5200, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q1 2025', 12800, 12],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q2 2025', 10700, 20],
['North', 'Kevin', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 29],
['North', 'Kevin', 'Furniture', 'Chair', 'Q1 2025', 2900, 3],
['North', 'Kevin', 'Furniture', 'Table', 'Q1 2025', 5600, 9],
['North', 'Kevin', 'Furniture', 'Table', 'Q2 2025', 5000, 1],
['North', 'Kevin', 'Sports', 'Ball', 'Q2 2025', 1400, 34],
['North', 'Kevin', 'Sports', 'Ball', 'Q4 2025', 800, 28],
['North', 'Kevin', 'Sports', 'Bike', 'Q4 2025', 2000, 25],
['North', 'Kevin', 'Sports', 'Racket', 'Q1 2025', 2000, 27],
['North', 'Kevin', 'Sports', 'Racket', 'Q2 2025', 1800, 27],
['North', 'Laura', 'Clothing', 'Jacket', 'Q3 2025', 3500, 44],
['North', 'Laura', 'Clothing', 'Pants', 'Q3 2025', 1800, 75],
['North', 'Laura', 'Clothing', 'Shirt', 'Q2 2025', 4000, 57],
['North', 'Laura', 'Electronics', 'Smartphone', 'Q1 2025', 4000, 26],
['North', 'Laura', 'Furniture', 'Chair', 'Q1 2025', 5600, 13],
['North', 'Laura', 'Furniture', 'Table', 'Q1 2025', 2900, 9],
['North', 'Laura', 'Furniture', 'Table', 'Q2 2025', 2900, 2],
['North', 'Laura', 'Sports', 'Ball', 'Q4 2025', 4600, 29],
['North', 'Laura', 'Sports', 'Bike', 'Q1 2025', 4200, 20],
['North', 'Laura', 'Sports', 'Bike', 'Q4 2025', 3300, 36],
['North', 'Laura', 'Sports', 'Racket', 'Q3 2025', 800, 26],
['South', 'Carol', 'Clothing', 'Jacket', 'Q3 2025', 3500, 11],
['South', 'Carol', 'Clothing', 'Jacket', 'Q4 2025', 3200, 66],
['South', 'Carol', 'Clothing', 'Pants', 'Q4 2025', 3000, 24],
['South', 'Carol', 'Clothing', 'Shirt', 'Q4 2025', 3000, 68],
['South', 'Carol', 'Electronics', 'Laptop', 'Q2 2025', 6500, 15],
['South', 'Carol', 'Electronics', 'Tablet', 'Q1 2025', 10700, 14],
['South', 'Carol', 'Furniture', 'Chair', 'Q4 2025', 2200, 17],
['South', 'Carol', 'Furniture', 'Sofa', 'Q2 2025', 3200, 12],
['South', 'Carol', 'Furniture', 'Sofa', 'Q4 2025', 4100, 1],
['South', 'Carol', 'Furniture', 'Table', 'Q3 2025', 4100, 2],
['South', 'Carol', 'Furniture', 'Table', 'Q4 2025', 2900, 6],
['South', 'Carol', 'Sports', 'Ball', 'Q4 2025', 800, 13],
['South', 'Carol', 'Sports', 'Bike', 'Q2 2025', 2800, 11],
['South', 'Carol', 'Sports', 'Racket', 'Q1 2025', 4600, 24],
['South', 'David', 'Clothing', 'Jacket', 'Q1 2025', 2500, 34],
['South', 'David', 'Clothing', 'Jacket', 'Q3 2025', 2200, 80],
['South', 'David', 'Clothing', 'Jacket', 'Q4 2025', 2200, 35],
['South', 'David', 'Clothing', 'Pants', 'Q2 2025', 4000, 58],
['South', 'David', 'Clothing', 'Pants', 'Q3 2025', 1800, 69],
['South', 'David', 'Clothing', 'Pants', 'Q4 2025', 2500, 52],
['South', 'David', 'Clothing', 'Shirt', 'Q1 2025', 3500, 79],
['South', 'David', 'Electronics', 'Tablet', 'Q1 2025', 5200, 24],
['South', 'David', 'Electronics', 'Tablet', 'Q4 2025', 3000, 11],
['South', 'David', 'Furniture', 'Chair', 'Q1 2025', 5000, 4],
['South', 'David', 'Furniture', 'Chair', 'Q2 2025', 7500, 6],
['South', 'David', 'Furniture', 'Sofa', 'Q2 2025', 6200, 2],
['South', 'David', 'Furniture', 'Table', 'Q4 2025', 4100, 3],
['South', 'David', 'Sports', 'Bike', 'Q1 2025', 3300, 28],
['South', 'David', 'Sports', 'Bike', 'Q4 2025', 1200, 23],
['South', 'David', 'Sports', 'Racket', 'Q4 2025', 1800, 26],
['South', 'Mia', 'Clothing', 'Jacket', 'Q2 2025', 1100, 69],
['South', 'Mia', 'Clothing', 'Jacket', 'Q3 2025', 1400, 72],
['South', 'Mia', 'Clothing', 'Pants', 'Q3 2025', 2500, 17],
['South', 'Mia', 'Clothing', 'Shirt', 'Q1 2025', 2200, 20],
['South', 'Mia', 'Clothing', 'Shirt', 'Q2 2025', 4000, 46],
['South', 'Mia', 'Electronics', 'Laptop', 'Q1 2025', 12800, 7],
['South', 'Mia', 'Electronics', 'Smartphone', 'Q4 2025', 3000, 14],
['South', 'Mia', 'Electronics', 'Tablet', 'Q2 2025', 6500, 17],
['South', 'Mia', 'Electronics', 'Tablet', 'Q3 2025', 9000, 6],
['South', 'Mia', 'Furniture', 'Chair', 'Q1 2025', 5600, 12],
['South', 'Mia', 'Furniture', 'Sofa', 'Q1 2025', 7500, 3],
['South', 'Mia', 'Furniture', 'Sofa', 'Q4 2025', 3200, 4],
['South', 'Mia', 'Furniture', 'Table', 'Q2 2025', 6200, 1],
['South', 'Mia', 'Sports', 'Ball', 'Q4 2025', 1200, 36],
['South', 'Mia', 'Sports', 'Bike', 'Q3 2025', 4200, 10],
['South', 'Mia', 'Sports', 'Racket', 'Q1 2025', 2000, 29],
['South', 'Mia', 'Sports', 'Racket', 'Q4 2025', 2800, 13],
['South', 'Nathan', 'Clothing', 'Jacket', 'Q3 2025', 1400, 19],
['South', 'Nathan', 'Clothing', 'Pants', 'Q4 2025', 1400, 67],
['South', 'Nathan', 'Electronics', 'Laptop', 'Q3 2025', 3000, 6],
['South', 'Nathan', 'Electronics', 'Smartphone', 'Q4 2025', 4700, 15],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q1 2025', 5900, 30],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q2 2025', 2500, 14],
['South', 'Nathan', 'Electronics', 'Tablet', 'Q4 2025', 7800, 27],
['South', 'Nathan', 'Furniture', 'Chair', 'Q4 2025', 4100, 2],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q3 2025', 7500, 4],
['South', 'Nathan', 'Furniture', 'Sofa', 'Q4 2025', 4100, 16],
['South', 'Nathan', 'Furniture', 'Table', 'Q1 2025', 2200, 7],
['South', 'Nathan', 'Furniture', 'Table', 'Q4 2025', 5500, 9],
['South', 'Nathan', 'Sports', 'Bike', 'Q4 2025', 1800, 26],
['South', 'Nathan', 'Sports', 'Racket', 'Q2 2025', 3300, 15],
['West', 'Grace', 'Clothing', 'Pants', 'Q2 2025', 3000, 32],
['West', 'Grace', 'Clothing', 'Pants', 'Q3 2025', 4000, 28],
['West', 'Grace', 'Clothing', 'Pants', 'Q4 2025', 3200, 69],
['West', 'Grace', 'Clothing', 'Shirt', 'Q1 2025', 2200, 17],
['West', 'Grace', 'Electronics', 'Laptop', 'Q3 2025', 4700, 21],
['West', 'Grace', 'Electronics', 'Smartphone', 'Q3 2025', 3500, 24],
['West', 'Grace', 'Electronics', 'Tablet', 'Q3 2025', 10700, 15],
['West', 'Grace', 'Furniture', 'Sofa', 'Q2 2025', 6200, 1],
['West', 'Grace', 'Furniture', 'Table', 'Q2 2025', 2900, 8],
['West', 'Grace', 'Furniture', 'Table', 'Q4 2025', 5600, 11],
['West', 'Grace', 'Sports', 'Ball', 'Q1 2025', 2300, 14],
['West', 'Grace', 'Sports', 'Ball', 'Q2 2025', 2800, 39],
['West', 'Grace', 'Sports', 'Bike', 'Q2 2025', 1800, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q3 2025', 3300, 13],
['West', 'Grace', 'Sports', 'Bike', 'Q4 2025', 1800, 31],
['West', 'Grace', 'Sports', 'Racket', 'Q2 2025', 2000, 10],
['West', 'Henry', 'Clothing', 'Jacket', 'Q1 2025', 3500, 58],
['West', 'Henry', 'Clothing', 'Pants', 'Q2 2025', 900, 36],
['West', 'Henry', 'Clothing', 'Shirt', 'Q2 2025', 3500, 79],
['West', 'Henry', 'Clothing', 'Shirt', 'Q3 2025', 1800, 46],
['West', 'Henry', 'Clothing', 'Shirt', 'Q4 2025', 2200, 46],
['West', 'Henry', 'Electronics', 'Laptop', 'Q2 2025', 7800, 23],
['West', 'Henry', 'Electronics', 'Tablet', 'Q4 2025', 4700, 29],
['West', 'Henry', 'Furniture', 'Chair', 'Q1 2025', 4100, 15],
['West', 'Henry', 'Furniture', 'Table', 'Q1 2025', 2200, 13],
['West', 'Henry', 'Furniture', 'Table', 'Q2 2025', 4100, 17],
['West', 'Henry', 'Furniture', 'Table', 'Q3 2025', 2200, 8],
['West', 'Henry', 'Furniture', 'Table', 'Q4 2025', 1500, 14],
['West', 'Henry', 'Sports', 'Bike', 'Q1 2025', 3300, 12],
['West', 'Henry', 'Sports', 'Racket', 'Q3 2025', 1800, 39],
['West', 'Olivia', 'Clothing', 'Pants', 'Q2 2025', 1100, 29],
['West', 'Olivia', 'Clothing', 'Pants', 'Q3 2025', 3500, 69],
['West', 'Olivia', 'Clothing', 'Pants', 'Q4 2025', 1400, 65],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q3 2025', 6500, 26],
['West', 'Olivia', 'Electronics', 'Laptop', 'Q4 2025', 8700, 29],
['West', 'Olivia', 'Electronics', 'Tablet', 'Q3 2025', 2500, 21],
['West', 'Olivia', 'Furniture', 'Chair', 'Q1 2025', 2200, 1],
['West', 'Olivia', 'Furniture', 'Chair', 'Q3 2025', 3200, 7],
['West', 'Olivia', 'Furniture', 'Chair', 'Q4 2025', 4100, 16],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q1 2025', 2900, 18],
['West', 'Olivia', 'Furniture', 'Sofa', 'Q2 2025', 5500, 16],
['West', 'Olivia', 'Sports', 'Ball', 'Q1 2025', 4200, 32],
['West', 'Olivia', 'Sports', 'Ball', 'Q4 2025', 4200, 25],
['West', 'Olivia', 'Sports', 'Racket', 'Q1 2025', 4600, 26],
['West', 'Olivia', 'Sports', 'Racket', 'Q4 2025', 3300, 26],
['West', 'Paul', 'Clothing', 'Jacket', 'Q1 2025', 2200, 68],
['West', 'Paul', 'Clothing', 'Shirt', 'Q4 2025', 3500, 33],
['West', 'Paul', 'Electronics', 'Laptop', 'Q4 2025', 4700, 10],
['West', 'Paul', 'Electronics', 'Smartphone', 'Q4 2025', 9000, 17],
['West', 'Paul', 'Furniture', 'Sofa', 'Q2 2025', 6200, 14],
['West', 'Paul', 'Sports', 'Racket', 'Q2 2025', 3300, 27],
[],
['Region', 'Revenue', '', 'Category', 'Revenue', '', ''],
['North', '=SUMIF(A2:A201,"North",F2:F201)', '', 'Electronics', '=SUMIF(C2:C201,"Electronics",F2:F201)', '', ''],
['South', '=SUMIF(A2:A201,"South",F2:F201)', '', 'Clothing', '=SUMIF(C2:C201,"Clothing",F2:F201)', '', ''],
['East', '=SUMIF(A2:A201,"East",F2:F201)', '', 'Furniture', '=SUMIF(C2:C201,"Furniture",F2:F201)', '', ''],
['West', '=SUMIF(A2:A201,"West",F2:F201)', '', 'Sports', '=SUMIF(C2:C201,"Sports",F2:F201)', '', ''],
[],
['Salesperson', 'Revenue', '', '', '', '', ''],
['Alice', '=SUMIF(B2:B201,"Alice",F2:F201)', '', '', '', '', ''],
['Bob', '=SUMIF(B2:B201,"Bob",F2:F201)', '', '', '', '', ''],
['Carol', '=SUMIF(B2:B201,"Carol",F2:F201)', '', '', '', '', ''],
['David', '=SUMIF(B2:B201,"David",F2:F201)', '', '', '', '', ''],
['Emma', '=SUMIF(B2:B201,"Emma",F2:F201)', '', '', '', '', ''],
['Frank', '=SUMIF(B2:B201,"Frank",F2:F201)', '', '', '', '', ''],
['Grace', '=SUMIF(B2:B201,"Grace",F2:F201)', '', '', '', '', ''],
['Henry', '=SUMIF(B2:B201,"Henry",F2:F201)', '', '', '', '', ''],
['Ivy', '=SUMIF(B2:B201,"Ivy",F2:F201)', '', '', '', '', ''],
['Jack', '=SUMIF(B2:B201,"Jack",F2:F201)', '', '', '', '', ''],
['Kevin', '=SUMIF(B2:B201,"Kevin",F2:F201)', '', '', '', '', ''],
['Laura', '=SUMIF(B2:B201,"Laura",F2:F201)', '', '', '', '', ''],
['Mia', '=SUMIF(B2:B201,"Mia",F2:F201)', '', '', '', '', ''],
['Nathan', '=SUMIF(B2:B201,"Nathan",F2:F201)', '', '', '', '', ''],
['Olivia', '=SUMIF(B2:B201,"Olivia",F2:F201)', '', '', '', '', ''],
['Paul', '=SUMIF(B2:B201,"Paul",F2:F201)', '', '', '', '', ''],
],
},
],
});
}
}