React Pivot Table in Preact

This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion® React Pivot Table component.

Preact is a fast and lightweight JavaScript library for building user interfaces. It’s often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors.

Prerequisites

System requirements for Syncfusion® React UI components

Ensure Node.js LTS and a package manager (npm or yarn) are installed before starting.

Set up the Preact project

Create a new Preact project using the initialization command:

npm init preact

or

yarn init preact

Using one of the above commands will lead you to set up additional configurations for the project, as below:

Project name

Specify the project name as my-project.

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Project directory:
|  my-project
—

Project language

Choose JavaScript as the project language.

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Project language:
|  > JavaScript
|    TypeScript
—

Configuration options

Respond to the following prompts with the default selections:

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Use router?
|    Yes / > No
—
|
*  Prerender app (SSG)?
|    Yes / > No
—
|
*  Use ESLint?
|    Yes / > No
—

Navigate to project

Once setup is complete, navigate to your project directory:

cd my-project

Now that my-project is ready to run with default settings, let’s add Syncfusion® components to the project.

Adding Syncfusion® React Pivot Table packages

Syncfusion® React component packages are available on npmjs.com. This article uses the React Pivot Table component as an example. To use the React Pivot Table component in the project, install the @syncfusion/ej2-react-pivotview package using the following command:

npm install @syncfusion/ej2-react-pivotview --save

or

yarn add @syncfusion/ej2-react-pivotview

Adding CSS reference

Themes for the Syncfusion® React Pivot Table can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, refer to the themes documentation.

The following example demonstrates the installation of the Tailwind 3 theme package from npm. Each component in this theme package includes an index.css file that automatically loads all required dependency styles.

To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme --save
yarn add @syncfusion/ej2-tailwind3-theme

By default, Preact projects include a src/style.css file with default styles. These default styles may conflict with Syncfusion component styles. Replace the contents of src/style.css with the following import to apply the Pivot Table theme styles:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css';

Adding Pivot Table component

The Pivot Table code should be placed in the src/index.jsx file.

import { render } from 'preact';

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import './style.css';

let pivotData = [
	{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q1' },
	{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q2' },
	{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q3' },
	{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q4' }
];

export function App() {
	const dataSourceSettings = {
		columns: [{ name: 'Year' }, { name: 'Quarter' }],
		dataSource: pivotData,
		expandAll: true,
		formatSettings: [{ name: 'Amount', format: 'C0' }],
		rows: [{ name: 'Country' }, { name: 'Products' }],
		values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }]
	};
	return (<PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>
	</PivotViewComponent>);
}

render(<App />, document.getElementById('app'));

Run the project

npm run dev

or

yarn run dev

Once the dev server starts, open http://localhost:5173 in your browser to view the rendered Pivot Table, which displays sales data grouped by Country/Products on rows and Year/Quarter on columns with Sold Amount and Units Sold values.

See also