Svelte Data Grid

WARNING

We have updated our latest version to support Svelte 5 following its official release. 🎉
Read more about the announcement here: Svelte 5 is Alive.

If you want to continue using Svelte 4, please switch to the svelte-4 branch or use version prior to 4.11.0.

RevoGrid provide special wrapper based on stenciljs svelte adapter. Just import it to your project and it can be used as part of svelte system.

Install your Stencil Data Grid

Install RevoGrid for Stencil using the following command:

npm

npm install @revolist/revogrid @stencil/store @types/lodash lodash

pnpm

pnpm add @revolist/revogrid @stencil/store @types/lodash lodash

yarn

yarn add @revolist/revogrid @stencil/store @types/lodash lodash

bun

bun add @revolist/revogrid @stencil/store @types/lodash lodash

Example

svelte.sample.svelte

<script lang="ts">
    import { RevoGrid, type ColumnRegular } from '@revolist/svelte-datagrid';
    const source = [
    {
      name: '1',
      details: 'Item 1',
    },
    {
      name: '2',
      details: 'Item 2',
    },
  ];
    const columns: ColumnRegular[] = [
    {
      prop: 'name',
      name: 'First',
      cellTemplate(h, { value }) {
        return h('span', { style: { background: 'red' } }, value);
      }
    },
    {
      prop: 'details',
      name: 'Second',
    },
  ];
</script>


<RevoGrid {source} {columns}></RevoGrid>

Edit RG Start (Svelte)

SvelteKit

WARNING

SSR is not compatible with RevoGrid out of the box because it depends on the browser environment. There is no documentation on hybrid projects with server-side rendering (SSR) for SvelteKit at this time. This is going to be added in the future.

Here are two approaches to use RevoGrid in a SvelteKit project:

Option 1: Disable SSR

You can disable SSR for the entire page where RevoGrid is used. This ensures the page is rendered only on the client.

Add a +page.js (For JavaScript Projects) or +page.ts (For TypeScript Projects) file in the same directory as your +page.svelte:

// +page.js or +page.ts
export const ssr = false;

With this setup, your +page.svelte can directly use RevoGrid:

<script>
  import { RevoGrid } from '@revolist/svelte-datagrid';
</script>
<RevoGrid />

Option 2: Use CSR (Client-Side Rendering)

If you don’t want to disable SSR for the entire page, you can render RevoGrid only in the browser using CSR loading techniques.

CSR: Conditional Rendering Based on the Browser

Use the browser variable from SvelteKit to ensure RevoGrid is only rendered on the client side:

<script>
  import { browser } from '$app/environment';
  import { RevoGrid } from '@revolist/svelte-datagrid';
</script>

{#if browser}
  <RevoGrid />
{:else}
  <p>RevoGrid is not available during server-side rendering.</p>
{/if}

CSR: Lazy-Loading

You can dynamically import RevoGrid using Svelte’s onMount lifecycle method. This ensures the library is only loaded after the page is mounted in the browser:

<script>
  import { onMount } from 'svelte';
  let RevoGrid;

  onMount(async () => {
    const module = await import('@revolist/svelte-datagrid');
    RevoGrid = module.RevoGrid;
  });
</script>

{#if RevoGrid}
  <RevoGrid />
{:else}
  <p>Loading RevoGrid...</p>
{/if}

Check out our repo for example: SvelteKit

When to Use These Options?

• Disabling SSR for the Page: Use this if the entire page depends on RevoGrid and SSR isn’t necessary.
• Client-Side Rendering (CSR) for RevoGrid: Use this if you need other parts of the page to be server-rendered but still want to use RevoGrid in the browser.

With these methods, you can successfully integrate RevoGrid into your SvelteKit project while handling its lack of SSR compatibility.