How to Build a Flexmonster Pivot Table as a Claude Artifact

Can you ask Claude to build a Flexmonster pivot table without creating a project, installing npm packages, or even opening an editor? The answer is yes, and it takes just a few prompts to create a pivot table as a Claude artifact. 

Why build a pivot table inside Claude?

If you want to test an idea without creating a project, installing packages, or writing code, you can generate a working Flexmonster example as a live Claude artifact right inside the chat.

By using Flexmonster in Claude, you can quickly try different report layouts, test report configurations, or explore features using generated sample data. It’s a simple way to experiment with the component, learn how it works, or build a quick demo before starting a real project.

When you’re ready to connect to real data, customize the interface, or integrate Flexmonster into your application, you’ll need a proper project. But for trying out ideas and creating quick prototypes, it’s a fast and convenient approach.

So, let's dive in!

The one thing to know before you start

Now, Claude runs generated code in a sandbox that allows only scripts from a few approved CDNs, including jsDelivr, unpkg, cdnjs, and esm.sh. Since cdn.flexmonster.com isn’t on that list, you’ll need to load flexmonster.full.js from jsDelivr instead. It’s the same library, packaged as a single file that’s fully compatible with Claude’s sandbox. As result, the pivot table itself renders as a Claude artifact: an interactive, live component embedded in the conversation that updates in real time as you refine your prompts.

Generate a pivot table

As the first prompt, you should initialize Flexmonster, generate a dataset, build the report and define which fields go in the rows and which in the columns. For this example, here we will use a mock dataset of video game sales.

Note: You can also upload your own dataset. Just keep in mind that larger datasets take up more of the conversation's context, which can slow things down or use up your usage limits faster.

Open a chat with Claude and use a prompt like this one:

Embed Flexmonster pivot table in Claude artifact. Load the CSS from “https://cdn.jsdelivr.net/npm/flexmonster/flexmonster.min.css”, load the script from “https://cdn.jsdelivr.net/npm/flexmonster”, and set “componentFolder: "https://cdn.jsdelivr.net/npm/flexmonster/" in the config.
Generate 100 video game records with fields: Title, Platform (PS5, Xbox Series X, Switch, PC), Genre (Action, RPG, Sports, Puzzle, Racing), Region (North America, Europe, Asia), Units Sold in millions (0.1–15.0), Release Year (2019–2025).
Configure the pivot's slice: rows = Platform, Genre; columns = Region; measure = sum of Units Sold.
Set the pivot container size to height = 550px

In a single response, Claude generates the dataset and configures the report. All rendering live, with no license pop-up and no broken loading state.

Experiment with different report layouts

Once you’ve generated your first report, you can start shaping it to match your own use case.

You don’t need to generate a new pivot table from scratch. You can simply ask Claude to update the report you’ve already created. For example, you can move fields between rows, columns, and filters, change the measure, or completely reorganize the report to explore your data from a different perspective.

Depending on your data and reporting needs, you can adjust the prompt. For example:

Change the report layout:
- Keep the platform on the rows
- Move release_year to the columns
- Move genre to the report filter
- Keep units_sold_millions as the measure

Claude updates the existing report while keeping the rest of the configuration as in the previous version, making it easy to compare different report layouts.

Customize the report

Flexmonster is highly customizable, and Claude makes it easy to apply those customizations through simple prompts. Whether you want to customize the grid, component behavior, toolbar, calculations, or formatting, you can do it without manually editing the code. Claude can even identify the appropriate Flexmonster options for you, so you don’t have to search through the documentation yourself. If you’re curious about the available settings, you can also explore, for example the Grid Options and Component-wide Options documentation and use them in your prompts.

Let’s go through things that you can try:

Add a calculated measures

Calculated measures let you create new measures directly inside the report without modifying the source data.

Try a prompt like this:

Add a "Year-over-Year Change (%)" measure: for each Platform, % change in Units Sold vs. that platform's previous Release Year, resetting per platform. Compute it manually in JS.

Customize number formatting

You can also adjust how values are displayed.

Format all measure values to display one decimal place.
Use thousands separators where needed and display empty cells as “—”.
Keep all existing report settings.

Change conditional formatting

Conditional formatting can be updated just as easily.

Update the report so that:
- Values above 10 should appear in bold green
- Values below 3 should appear in bold red

Change the theme

Want to see how your report looks with a different appearance? Just ask Claude to switch the theme.

Change the Flexmonster theme to Midnight.
Load the Midnight theme CSS from the Flexmonster package on jsDelivr.

Visualize the report with pivot charts

As Flexmoonster provides built-in charts, you can add them as well. They let you visualize the current report while keeping the chart synchronized with the pivot table.

Just continue the conversation with another prompt:

Display a stacked column chart based on the current report.
Keep the chart synchronized with the pivot table, so any changes to the report are reflected automatically.
Place the chart below the pivot table.

Claude adds the chart without recreating the report. Once it’s connected, sorting, filtering, expanding, or changing the report layout automatically updates the visualization, making it easy to explore your data from different angles.

Note: always name the library

One more tip worth keeping in mind: if you ask for "a JavaScript pivot table" without naming Flexmonster specifically, there's a good chance you'll get a different, older library back instead. Naming Flexmonster explicitly and pointing to the correct CDN saves wasted tokens and gives you the result you actually want on the first try.

If something doesn't render

Run into a sandbox error we haven't covered here? It's often worth just asking Claude directly what went wrong — in our experience, it can accurately diagnose its own restrictions once you ask and adjust on the next try.

Wrapping up

AI assistants are changing the way we experiment with UI components, and Flexmonster fits naturally into this workflow. Instead of setting up a project just to test an idea, you can generate a working pivot table, refine its layout, add visualizations, and explore different features, all inside one conversation.

While this isn’t a replacement for building a real application, it’s a fast and convenient way to prototype reports, learn Flexmonster, or prepare a quick demo before writing production code.

Give it a try, experiment with your own prompts, and let us know what you build!