gridjs-svelte

A Svelte wrapper component for Grid.js

Installation

npm install gridjs gridjs-svelte

Usage

Try it out in the browser

<script>
    import Grid from "gridjs-svelte";

    const data = [
        { name: "John", email: "john@example.com" },
        { name: "Mark", email: "mark@gmail.com" },
    ];
</script>

<Grid {data} />

<style global>
    @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

Check the example for more detail.

You can pass all Grid.js configs, refer to Grid.js types for specific configuration options.

How to get instance?

You can use instance and bind it with state, you can check the example here or you can see tutorial for how to bindings component.

<script>
  import Grid from "gridjs-svelte"

+  let grid

  const data = [
    { name: "John", email: "john@example.com" },
    { name: "Mark", email: "mark@gmail.com" },
  ]
</script>

- <Grid {data} />
+ <Grid bind:instance={grid} {data} />

How to add plugin?

Try it out in the browser

1. Write a plugin, you can see how to write the plugin on plugin basic section.
2. Put the list of plugins into plugins props.

- <Grid {data} />
+ <Grid {data} plugins={[awesomePlugin]} />

NOTE: if you want to create an advanced plugin, you need to know React because Grid.js uses preact (an alternative React). If you need help to create an advanced plugin, you can open discussions maybe I can help.

How to formatting cell with Svelte component?

Try it out in the browser

<script>
    import Grid from "gridjs-svelte";
    import { SvelteWrapper } from "gridjs-svelte/plugins";
    import AwesomeComponent from "./components/awesome-component.svelte";

    const columns = [
        "Name",
        {
            name: "Email",
            plugin: {
                component: SvelteWrapper,
                props: {
                    component: AwesomeComponent,
                },
            },
        },
    ];

    const data = [
        { name: "John", email: "john@example.com" },
        { name: "Mark", email: "mark@gmail.com" },
    ];
</script>

<Grid {data} {columns} />

Contributing

PRs are welcome! You noticed a bug, a possible improvement or whatever? Any help is always appreciated, so don't hesitate opening one!

Get started (Devs)

git clone https://github.com/iamyuu/gridjs-svelte
cd gridjs-svelte
npm install
npm run dev:web

Running the tests

npm test

# or on watch mode
npm run test:watch