Getting Started with React Spreadsheet in Remix

27 Aug 20263 minutes to read

This guide provides a step-by-step workflow for integrating Syncfusion React Spreadsheet into a new Remix application.

Prerequisites

Ensure the following requirements are met before starting:
System requirements for Syncfusion React Spreadsheet

Benefits of using Remix

Nested pages

Pages within the ./routes directory are structured as nested routes, allowing components to be embedded hierarchically in parent pages. This organization helps reduce page loading times.

Error boundaries

Errors within nested routes or individual Remix components are isolated. If a failure occurs, only the affected route/component fails to render, preserving the rest of the page.

Transition

Remix automatically manages loading states during navigation or data fetching. Developers can configure what displays while the application loads, improving user experience.

Create Remix application

To set up a basic Remix sample, run the following command:

npx create-react-router@latest

The create-react-router@latest command creates a remix app using the latest package versions.

When you run this command, you will be asked the following questions.

   dir   Where should we create your new project?
         ./my-react-router-app

      ◼  Using default template See https://github.com/remix-run/react-router-templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

Navigate into the project directory using the following command.

cd my-react-router-app

Adding Syncfusion® Spreadsheet package

To include the React Spreadsheet component in your project, use the following command:

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

Import the required CSS styles

Themes for Spreadsheet can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the required Spreadsheet theme style reference to app.css file.

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

Configure Server-Side Rendering (SSR)

For Syncfusion React Spreadsheet to function with Remix server-side rendering (via Vite), update your vite.config.ts file as shown:

import { defineConfig } from "vite";

export default defineConfig({
  ...
  ssr: {
    noExternal: [/@syncfusion/]
  },
  ...
});

This configuration ensures Syncfusion modules are properly compiled for SSR compatibility.

Adding Spreadsheet component

Add the React Spreadsheet component in ~/app/routes/_index.ts file using the following code:

import type { Route } from "./+types/home";
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Index() {
  return <SpreadsheetComponent />;
}

Run the application

Start your Remix application in development mode:

npm run dev

For deployment, build your app for production.

npm run build

Then run the app in production mode:

npm run start

See Also

• Getting Started with React Spreadsheet