How to Scale React Pivot Tables with Docker and Server Side Processing

When you start working with large data sets in Pivot Tables, things can slow down quickly. What works fine with a few thousand rows can be frustrating with hundreds of thousands of rows.

The main problem?
Too much processing is happening in the browser.

That’s where a server side pivot engine enter; it shifts heavy operations like aggregation, filtering, and sorting to the backend.

In this guide, we’ll cover how to:

• Set up Sync^® React Pivot Table server side pivot engine
• Put it in a container using Docker
• Connect to React app

In the end, you will have that setup portable, scalable, and easier to maintain.

Why do you actually need this?

Before diving into the setup, let’s make this real.

You need server-side Pivot Tables when creating things like:

• Sales dashboard with hundreds of thousands of records
• Financial reporting tools with complex aggregations
• A business intelligence UI where users sort through large data sets

In a scenario like this:

• Browser memory becomes stressed
• UI becomes sluggish
• Data processing becomes unreliable

Moving that workload to the server solves all that nicely.

Why Docker makes this easier

Setting up backend services manually can be messy, with different engines, missing dependencies, and version incompatibilities.

Docker simplifies this by packaging everything your application needs into a container.

Think of it like this:

Once your app is containerized:

• He behaves the same everywhere
• You avoid the “it works on my machine” problem.
• Placement becomes predictable

To explore Docker further and start using it on your system, visit the official Docker documentation.

Prerequisite

Before starting, make sure you have the following installed:

• Visual Studio 2022 with ASP.NET workload
• Docker Desktop (installed and running)
• Node.js LTS

Phase 1: Set up the server side machine

Let’s start with the back.

Instead of building everything from scratch, you can use ready-made ASP.NET Core GitHub samples that already include the pivot engine.

Once you download it:

• Open the project in Visual Studio
• Build it

That’s it, the necessary dependencies will be restored automatically.

At this point, you should have a backend capable of:

• Processing pivot data
• Handling API requests
• Work with large data sets efficiently

For more details about the server-side Pivot Engine and how it works, you can refer to our official React Pivot Table documentation.

Phase 2: Containerize the backend using Docker

Now let’s package this backend so it can run anywhere.

Option 1 (simplest): Use Visual Studio

If you’re using Visual Studio, this is almost easy:

Visual Studio automatically generates:

• Docker Files
• A .dockerignore submit

You don’t need to configure anything manually.

Option 2: Use the Dockerfile manually

If you want more control, you can add a docker file yourself.

Sample configuration

# This stage is used when running from VS in fast mode (Default for Debug configuration)

FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
USER $APP_UID
WORKDIR /app
EXPOSE 8080
EXPOSE 8081

# This stage is used to build the service project

FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["PivotController.csproj", "."]
RUN dotnet restore "./PivotController.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "./PivotController.csproj" -c $BUILD_CONFIGURATION -o /app/build


# This stage is used to publish the service project to be copied to the final stage

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./PivotController.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

# This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PivotController.dll"]

Notes: If your application uses a different version of .NET (for example, .NET 8.0 or .NET 7.0), make sure to update the version number in the FROM line.

At a high level, Dockerfile:

• FROM: Sets the base image (usually a .NET SDK image).
• WORK: Defines the working directory inside the container.
• COPY: Copies your project files into the container.
• RUN: Executes commands such as dotnet build or dotnetpublish.
• OPEN: Tells Docker which port the container will use.
• ENTRY POINT: Specifies the command to be executed when the container is started.

Even if you’ve never worked with Dockerfiles before, you don’t need to memorize every instruction; the structure is consistent across most .NET applications.

Build a Docker image

Once the Dockerfile is ready, create an image.

Option 1: Using Visual Studio

Just right click the Dockerfile and create it; it handles everything.

Option 2: Using the terminal

Run:

docker build -t pivotcontroller .

That single command creates your container image.

Notes: Be sure to include a period (.) at the end; it tells Docker to use the current directory.

Image Verification in Docker Desktop

Phase 3: Run and connect everything

Now we will turn on the system.

Run the container

Option 1: Using Docker Desktop

Option 2: Using the command line (optional)

Start your container:

docker run -d -p 5000:8080 --name pivot-container pivotcontroller

This maps your local port (5000) to the container.

Once running, your API will be available at:

http://localhost:5000

Connect React Pivot Tables

Now comes the important part: connecting your frontend to this backend.

In your React app, configure a Pivot Table:

Code example:

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview';

function App() {
    let dataSourceSettings = {
        url: '
        mode: 'Server',
    };

    return (
        <PivotViewComponent
            id='PivotView'
            dataSourceSettings={dataSourceSettings}
        />
    );
}

export default App;

Define a Pivot Table report

You can now configure rows, columns and values ​​based on your data set (such as sales.csv or salesanalysis.json) using dataSourceSettings:

Code example:

let dataSourceSettings = {
    url: '
    mode: 'Server',
    expandAll: false,
    enableSorting: true,
    columns: [
        { name: 'Year', caption: 'Production Year' }
    ],
    values: [
        { name: 'Sold', caption: 'Units Sold' },
        { name: 'Price', caption: 'Sold Amount' },
    ],
    rows: [
        { name: 'Country' },
        { name: 'Product' }
    ],
    formatSettings: [
        { name: 'Price', format: 'N' }
    ],
};

Once your app is running:

• The UI sends requests to the API
• Server processes data
• Results are returned and rendered

Everything heavy stays outside the browser.

What have you achieved

At this point, you have:

• Server-side pivot engine that handles large data sets
• Docker backends that run anywhere
• The React frontend connects neatly via API

And most importantly, you’ve removed the performance bottleneck.

GitHub Reference

To see the complete Docker implementation, check out the sample project on GitHub.

Explore endless possibilities with amazing React UI components from Syncfusion.

Try it Free

Conclusion

If your React Pivot Tables start to struggle with large data sets, moving processing to the server is not just an optimization; it’s a must.

By combining a server-side engine with Docker, you get:

• Predictable performance
• Cleaner architecture
• Zero environmental setup headaches

Once this setup is implemented, you can reuse it throughout your project with minimal effort.

For those building data-heavy React applications, adopting this pattern early on will save you from performance issues later.

If you are a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us via the support forum, support portal, or feedback portal for questions. We are always happy to help you!