Syncfusion AI Assistant

How can I help you?

Getting Started with the React Grid Component in the Preact Framework

28 May 20265 minutes to read

This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion® React Grid 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

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 framework variant to build this Preact project using JavaScript and React.

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 Grid packages

Syncfusion® React component packages are available on npmjs.com. This article uses the React Grid component as an example. To use the React Grid component in the project, the @syncfusion/ej2-react-grids package needs to be installed using the following command:

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

or

yarn add @syncfusion/ej2-react-grids

Before including Syncfusion styles, make sure to remove the default styles defined in index.css. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly.

Adding CSS reference

You can import themes for the Syncfusion® React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to theme’s in a React project.

In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages. The necessary Material 3 CSS styles for the Grid component and its dependents were imported into the src/style.css file.

@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material3.css";

Adding Grid component

The grid code should be added to the src/index.jsx file.

import { render } from 'preact';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import './style.css';

export function App() {
  // Defines the data to be displayed in the Grid.
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 }
  ];

  return (
    {/* Assigns the dataset to the Grid component */}
    <GridComponent dataSource={data}>
      {/* Define the columns to be displayed */}
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' textAlign="Right" />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
        <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
        <ColumnDirective field='ShipCountry' width='100' />
      </ColumnsDirective>
    </GridComponent>
  );
}

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

Run the project

npm run dev

or

yarn run dev

The output will appear as follows:

preact

See also