Back to homepage

Prompt-to-Pivot: Building WebDataRocks Report Inside Claude

Lately, LLMs have advanced to the point where they can not only answer questions or write code but also build working interfaces. This makes them a handy place to quickly test ideas for reports and data analysis. Instead of starting with a project and writing the code yourself, you can start with a simple prompt in your AI assistant. For example, you can ask it to build an interactive WebDataRocks pivot table right in the chat.

WebDataRocks is a free JavaScript pivot table built for exactly this kind of quick reporting job. It’s simple enough for an AI assistant to set up from one prompt and free, so you can seamlessly experiment and try out your ideas. Describe the report you want, and Claude hands back a working, interactive grid in the same message.

Here we’ll show how to build one using made-up coffee shop sales data. Step by step, with copy-paste prompts that you can use as a base for your own projects.

Why this is worth doing before you write any real code

Analysts and developers use pivot tables for the same reason: to see how a metric breaks down across two or three dimensions without writing a query for every combination. Normally, that means opening a project, wiring up a data source, and configuring the grid by hand.

Skipping straight to a chat window compresses that into a conversation. You’re not shipping anything, you’re checking whether a particular row/column split tells you what you think it will, or showing a colleague a rough mockup of “what if we grouped by store type instead.” Once the shape is right, translating it into a real WebDataRocks integration is copy-paste work, because the report configuration object is identical either way.

One setup detail to keep in mind

WebDataRocks’ documentation points you to cdn.webdatarocks.com by default. That domain won’t load inside most of AI assistants’ preview pane — each of these environments only executes scripts pulled from a short allowlist of public CDNs, and WebDataRocks’ own domain isn’t on it. So, in this tutorial we’ll use WebDataRocks files from jsDelivr instead.

Step 1: Describe the data and the first slice in one go

Rather than asking for the library first and the data second, put everything in one message — the field list, the row/column split, and the measure. That’s the fastest way to a usable result on the first try.

Build an interactive WebDataRocks pivot table in the Claude artifact.
Load the library from jsDelivr: CSS from
"https://cdn.jsdelivr.net/npm/webdatarocks/webdatarocks.min.css",
and the core script from
"https://cdn.jsdelivr.net/npm/webdatarocks/webdatarocks.js".
Generate 80 records of coffee shop sales as a JSON array with fields:
City, Store Format, Product Category, Units Sold, Revenue in USD, Month.
Configure the report: 
rows = City, 
Store Format; 
columns = Product Category;
measure = sum of Revenue. 
Enable the toolbar. 
Set the container height to 520px.

What comes back is a built-in pivot table already sliced: city and store format down the rows, product category across the top, revenue totals filling the cells.

One prompt, one working report. The only real work was clearly describing the fields and the slice. Also, if it’s more convenient, you can split it into different prompts and watch your grid creation gradually.

Step 2: Change the slice without losing the data

Here’s a mistake worth avoiding: asking for a fresh pivot table every time you want a different view. That regenerates the underlying dataset, too, so your numbers change between screenshots, and nothing stays comparable. Moreover, it wastes many more of your generating tokens.

Instead, refer back to what’s already there:

Update the existing report, don't regenerate the data:
- Rows: Product Category, then City
- Columns: Month
- Move Store Format to the report filter
- Keep Revenue as the measure, sum aggregation

WebDataRocks keeps the entire layout: rows, columns, filters, measures, in a single report object, so this kind of request is edited rather than rebuilt. Same 80 records, but new angle on them.

Step 3: Layer on a calculated metric and some formatting rules

Once the slice looks exactly as you expect, it’s possible to try a calculated value too, something that isn’t in the raw data at all.

Add a calculated value "Avg Revenue per Unit" = Revenue / Units Sold,
formatted as currency with 2 decimal places.
Add it as a second measure next to Revenue.
Format all Revenue cells with a thousands separator and a "$" prefix.
Where Revenue is above $2,000 in bold green text, and cells below $300 in red.

Mentioning a function name or a syntax detail isn’t necessary at all. You can describe the outcome you want, and Claude picks the matching WebDataRocks option or callback on its own.

Step 4: Try a different look or a different source

What about more styling? You can apply any theme you want with only one prompt.

Switch WebDataRocks theme to green, loading the green theme CSS from the same jsDelivr package.

However, we recommend checking the available built-in themes provided by WebDataRocks to avoid unexpected errors and data regeneration.

It also runs outside Claude

Everything above was built in Claude, but none of the prompts are Claude-specific. It can also be done in ChatGPT or Grok. So, try to experiment with data in your favorite AI assistant!

Where the demo ends, and real integration begins

Think of this as a quick way to test ideas, not a way to build a production app. It works well for:

•  Testing different row and column layouts before adding them to your real project
•  Showing a stakeholder a quick report with sample data while you’re discussing an idea
•  Learning how the WebDataRocks report API works without going through the docs step by step
•  Creating a working demo in just a few minutes

But if you want to connect real data, match your app’s design, or use the pivot table for real users, you’ll need to move to a proper project and install WebDataRocks there. That’s a separate step from the quick demo we built here.

Your turn

Take the Step 1 prompt, swap the coffee-shop fields for any dataset you want, and see what comes back. WebDataRocks is free to use for exactly this kind of exploration, so there’s no reason not to try it before you write a single line of setup code.

If you’re working with data visualization, you probably have heard about PivotTable.js. It’s a lightweight, open-source JavaScript Pivot Table written by Nicola Kruchten and has been a well-known tool in data visualization for a long time.

You can explore the library yourself on its official GitHub repository, where the full source code is available, or check out a quick demo on YouTube recorded by the author to see how it works in practice.

What makes it stand out is its openness. Because it’s fully open source, you can get free access to the code and full control. It works quite well when you want to build a custom solution from the ground up.

There’s also even a React version called react-pivottable and maintained by the same author, which makes integration into modern apps a bit easier.

At the same time, the library shows its age, as it was built in 2012. It wasn’t updated at all recently, and you can feel that in the overall experience. 

This is where WebDataRocks pivot grid component takes a different direction.

It gives you a complete, polished solution out of the box. The built-in UI is already there; it looks modern, and you can integrate it into your project much faster without building everything from scratch. But even if you want to add more customization, you can also achieve it! 

As examples, we’ve got lots of showcases that demonstrate how WebDataRocks can be used in different ways: from complex analytical dashboards to daily usage habits trackers. 

• HR Analytics with WebDataRocks
• Marketing Campaigns Analysis
• WebDataRocks analytical sport Dashboard
• WebDataRocks Bento Styles Dashboard
• Santa’s Letter Management System

Even just looking at these titles, you can already see how diverse the use cases are and, for sure, it’s not even near the limit of its possibilities.

In reality, it’s a very flexible data visualization component that can be used across many areas and industries, including finance, analytics, audit, logistics, and more. Also, we’ve got some practical examples about how to use it in marketing, sales, industry, and HR analytics.  Some of the more “fun” demos are just there to show how flexible it is and how easily it can work with very different kinds of data.

In short, WebDataRocks works as a universal tool for handling data. You can structure, filter, and display it however you need. That’s why it’s useful both for serious, data-heavy projects and for more creative use cases.

What people say about PivotTable.js and WebDataRocks

PivotTable.js struggles with large datasets, which may be problematic for users. There’s no information about its limits in official docs, but some users on StackOverflow inform that while working with 2000 rows, there’s a slight delay, but with 5000 rows, it completely freezes.

On the other hand, WebDataRocks handles larger datasets (the limit is 1 MB, but it’s actually enough for most use cases) more comfortably and continues to receive updates, which makes it feel better aligned with current development needs. Also, WebDataRocks appears in numerous Reddit discussions. You may notice that people there describe it as a feature-rich component.

Flexmonster as an alternative to PivotTable.js & WebDataRocks

Even though WebDataRocks isn’t open source, it’s still completely free. Unlike many similar tools that are limited to non-profit or personal use, you’re welcome to use it in commercial projects and real business applications as well. And if you ever need something more advanced, there’s also Flexmonster – a commercial product created by the same team. It’s designed to handle even larger datasets, advanced analytics, and enterprise-level requirements.

For example, it has better performance with really large datasets, including built-in support for server-side processing. This means you can work with millions of records without loading everything into the browser, which isn’t really possible with lighter tools.

Another big advantage is the wide range of integrations. Flexmonster allows connecting to more advanced data sources, such as backend databases, and supports server-side technologies. 

Also, it supports many popular frameworks such as React, Angular, and Vue.js (which are also supported by WebDataRocks), but it doesn’t stop there. It also works with less common or newer tools like Svelte, Flutter, Blazor, Nuxt, Next.js, and much more. This makes it a very flexible choice for real-world applications.

Wrap-up

In conclusion, it really depends on what you really need. PivotTable.js is great when you value openness and want full control, especially for smaller projects. But when the goal is to move faster, work with more data, and get a clean interface without extra effort, WebDataRocks feels like a better choice.

That’s why it works so well as an alternative – not because one is completely better than another, but because they’re designed for slightly different tasks.

As you may have already noticed, we love participating in CodePen Challenges! This time, the topic was “food”, so we decided to use a dataset that is familiar to everyone — McDonald’s menu items. ​​You can find McDonald’s almost everywhere, and their burgers? Loved by lots of people. We thought it’d be fun to turn their menu data into an insightful visual report.

(more…)

In this article, we’ll take a look at the best free pivot table libraries you can integrate into your project to improve your web reporting. Pivot tables are great tools that not only help you organize and visualize data but also allow you to sort, filter, and export it. Here you can read more detailed information about what a pivot table is.  The pivot table component can transform your data into a readable format and provide valuable insights. However,  many developers have the challenge “how to choose a pivot table for your project.”  That is why we decided to evaluate various pivot controls. 

(more…)

Collapses all nodes and performs the drill-up of all hierarchies in the slice on the grid.

Example

webdatarocks.collapseAllData();

Check out the CodePen example.

See also

• expandAllData

expandAllData(withAllChildren: Boolean)

Expands all nodes and performs the drill-down of all hierarchies in the slice on the grid.

Parameters

Name	Type	Description
withAllChildren	Boolean	optional Defines whether to drill down all levels of all hierarchies or not. Set this property to false to expand all nodes and not to drill down hierarchies. Default value is true.

Examples

1) Expand all nodes and drill down all hierarchies in the slice:

webdatarocks.expandAllData();

Check out the CodePen example.

2) Expand all nodes without drilling down the hierarchies in the slice:

webdatarocks.expandAllData(false);

See also

• collapseAllData

dataloaded: String

The event is triggered once the component loads data.

Example

webdatarocks.on('dataloaded', function(){
  alert('Data loaded!');
});

Check out the CodePen example.

Move up