Grid.js for Svelte

Svelte component for Grid.js. Highly inspired by abandoned library gridjs-svelte and library gridjs-react

Install

npm install --save svelte-gridjs

Also, make sure you have Grid.js installed already as it's a peer dependency of gridjs-svelte:

npm install --save gridjs

Usage

Import the Grid component first

import Grid from "svelte-gridjs";

<Grid
  data={[
        { name: "John", email: "john@example.com" },
        { name: "Mark", email: "mark@gmail.com" }
    ]}
  columns={['Name', 'Email']}
  search
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Then you can pass all Grid.js configs to the Grid component. See Grid.js Config for more details.

Svelte component in cells

You can bind your svelte components in Table cells (both in header and body cells) : The composer function _ allows you to pass a svelte component, props and events with listeners to attach to it. It is fully functionnal with svelte reactivity. Component will unmount properly.

import Grid, {_} from "svelte-gridjs";
import MockComponent from "./MockComponent.svelte";

<Grid
  data={[
        { name: "John", email: "john@example.com" },
        { name: "Mark", email: "mark@gmail.com" }
    ]}
  columns={[
        'Name', 
        {
            name: 'Email',
            formatter: (cell) => _({component : MockComponent, props : {cell}, events : [{event : 'myevent', callback : () => {console.log('hello')}}]})
        }
    ]}
  search
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Example

See the Svelte example.

License

MIT