Getting started with Syncfusion® React Spreadsheet in Remix

21 Jul 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

Adding CSS reference

Import the Syncfusion® component themes in the app.css file as shown below:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';

Note: This example uses the Tailwind3 theme. To use a different built-in theme, replace the tailwind3.css references with the corresponding theme stylesheets. Refer to the Themes documentation for information about the available themes and the different ways to include theme styles in a React application.

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