🚀 Syncfusion React Pivot Table with Server-Side Engine (Docker-Based Deployment)

This repository demonstrates how to deploy the Syncfusion React Pivot Table with a server-side pivot engine using Docker. It includes two main components:

1. 📦 PivotController – An ASP.NET Core application that hosts the server-side pivot engine.
2. ⚛️ Sample – A React application that connects to the server-side engine running inside a Docker container.

🌟 Why Server-Side?

The Syncfusion Pivot Table supports a server-side engine that efficiently handles large datasets by performing operations like aggregation, filtering, and sorting on the backend. This approach:

• 🚀 Improves performance for large datasets.
• 📉 Reduces network traffic by sending only the required data to the client.
• 🖱️ Supports virtual scrolling for smoother rendering.
• 📁 Works with multiple data formats such as JSON, CSV, and collections.

🐳 Why Docker?

Docker simplifies the deployment of the server-side engine by packaging all dependencies (e.g., .NET runtime, Syncfusion libraries) into a container. Benefits include:

• 🔁 Consistent behavior across environments.
• ⚙️ Simplified setup with no manual configuration.
• ⚡ Faster deployment and easier sharing.
• 🧼 Isolated execution for stability and conflict-free operation.

🧰 Prerequisites

Ensure the following tools are installed:

• 🧑‍💻 Visual Studio (for backend development)
• 🐳 Docker Desktop
• 🟢 Node.js (for the React frontend)
• 🔷 .NET SDK
• 📝 Visual Studio Code (optional for frontend editing)

📁 Repository Structure

/root-directory/
│
├── PivotController/                           # ASP.NET Core backend
│   ├── Dockerfile
│   ├── .dockerignore
│   ├── Controllers/
│   │   └── PivotController.cs
│   ├── DataSource/
│   │   ├── DataSource.cs
│   │   └── sales-analysis.json
│   ├── Models/
│   │   └── ErrorViewModel.cs
│   ├── Views/
│   │   ├── Home/
│   │   │   ├── Index.cshtml
│   │   │   └── Privacy.cshtml
│   │   └── Shared/
│   │       ├── _Layout.cshtml
│   │       ├── Error.cshtml
│   │       └── _ValidationScriptsPartial.cshtml
│   └── wwwroot/
│       ├── css/
│       │   └── site.css
│       ├── js/
│       │   └── site.js
│       └── lib/
│           ├── bootstrap/
│           ├── jquery/
│           └── jquery-validation/
│
└── Sample/  # React frontend
    ├── package.json
    ├── public/
    │   ├── index.html
    │   └── manifest.json
    └── src/
        ├── App.js
        ├── App.css
        ├── index.js
        └── setupTests.js

⚡ Quick Start Guide

1️⃣ Clone the Repository

git clone https://github.com/SyncfusionExamples/deploy-pivot-server-side-engine-docker
cd deploy-pivot-server-side-engine-docker

2️⃣ Build the Docker Image

Option A: Using Visual Studio

• Open PivotController.sln in Visual Studio.
• Right-click the Dockerfile > Build Docker Image.

Option B: Using Command Line

cd PivotController
docker build -t pivotcontroller .

3️⃣ Run the Docker Container

Using Docker Desktop

• Open Docker Desktop.
• Run the pivotcontroller image.
• Map host port 5000 to container port 8080.

Using Command Line

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

4️⃣ Verify the Container

• Open Docker Desktop > Containers tab.
• Confirm pivot-container is running.

5️⃣ Run the React Application

cd Sample
npm install
npm start

6️⃣ Connect React to the Server-Side Engine

Update dataSourceSettings in App.js:

const dataSourceSettings = {
  url: 'http://localhost:5000/api/pivot/post',
  mode: 'Server',
  columns: [{ name: 'Year', caption: 'Production Year' }],
  rows: [{ name: 'Country' }, { name: 'Product' }],
  values: [
    { name: 'Sold', caption: 'Units Sold' },
    { name: 'Price', caption: 'Sold Amount' }
  ],
  formatSettings: [{ name: 'Price', format: 'N' }],
  enableSorting: true,
  expandAll: false
};

🔍 How It Works

• The React Pivot Table sends data requests to the server.
• The Docker container processes the request using Syncfusion’s server-side engine.
• Only the processed data is returned to the client.
• The Pivot Table renders the data efficiently.

🖼️ Rendered React Pivot Table Screenshot

Below is a screenshot of the rendered React Pivot Table application:

📚 Resources

• Syncfusion React Pivot Table Documentation
• Docker Documentation
• Syncfusion GitHub Sample